default Text widget's letter spacing is a bit off #22572

ghost · 2018-10-02T20:30:10Z

The flutter's line seems to be a bit more spaced out, what do you think?

Steps to Reproduce

Create two views, one in flutter with

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my_app',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Text(
            'hello from flutter yay',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.w400,
              color: Colors.black,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

and one in swift / objc with

  override func viewDidLoad() {
    super.viewDidLoad()
    view.backgroundColor = .white

    let helloLabel = UILabel()
    helloLabel.text = "hello from ios"
    helloLabel.translatesAutoresizingMaskIntoConstraints = false
    view.addSubview(helloLabel)
    helloLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
    helloLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
  }

ghost · 2018-10-02T20:42:40Z

Or maybe the exact letter spacing is a non-goal for Flutter?

ghost · 2018-10-02T20:52:37Z

Tried using CupertinoApp, text is still different, more spaced out and seemingly thinner:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      title: 'my_app',
      home: Container(
        color: Colors.white,
        child: Center(
          child: Text(
            'hello from flutter yay',
            style: TextStyle(
              color: Colors.black,
            ),
          ),
        ),
      ),
    );
  }
}

zoechi · 2018-10-03T07:15:57Z

Please add the output of flutter doctor -v.

ghost · 2018-10-03T08:37:34Z

[✓] Flutter (Channel beta, v0.8.2, on Mac OS X 10.13.6 17G65, locale en-US)
    • Flutter version 0.8.2 at /Users/asd/Developer/flutter
    • Framework revision 5ab9e70727 (4 weeks ago), 2018-09-07 12:33:05 -0700
    • Engine revision 58a1894a1c
    • Dart version 2.1.0-dev.3.1.flutter-760a9690c2

[✓] Android toolchain - develop for Android devices (Android SDK 28.0.3)
    • Android SDK at /Users/asd/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

[✓] iOS toolchain - develop for iOS devices (Xcode 10.0)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.0, Build version 10A255
    • ios-deploy 2.0.0
    • CocoaPods version 1.5.3

[✓] Android Studio (version 3.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 28.0.2
    • Dart plugin version 181.5616
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] VS Code (version 1.27.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 2.18.0

[✓] Connected devices (1 available)
    • iPhone 5s • A989159F-933B-4CF7-90BE-C530C36DE9DE • ios • iOS 12.0 (simulator)

• No issues found!

saurik · 2018-11-27T14:24:18Z

I am going to agree that the text doesn't even feel like the same weight as native text; I haven't like, taken a screenshot of it to compare, so it could be that something else is doing it, but it just feels less thick/dense.

TahaTesser · 2020-03-27T13:47:17Z

Code Sample

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my_app',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Text(
            'hello from flutter yay',
            style: TextStyle(
              fontSize: 18.0,
              fontWeight: FontWeight.w400,
              color: Colors.black,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

flutter doctor -v

[✓] Flutter (Channel dev, 1.21.0-1.0.pre, on Mac OS X 10.15.6 19G73, locale en-GB)
    • Flutter version 1.21.0-1.0.pre at /Users/tahatesser/Code/flutter_dev
    • Framework revision f25bd9c55c (2 weeks ago), 2020-07-14 20:26:01 -0400
    • Engine revision 99c2b3a245
    • Dart version 2.9.0 (build 2.9.0-21.0.dev 20bf2fcf56)

 
[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/tahatesser/Code/sdk
    • Platform android-30, build-tools 30.0.1
    • ANDROID_HOME = /Users/tahatesser/Code/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 11.6)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 11.6, Build version 11E708
    • CocoaPods version 1.9.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 4.0)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 47.1.2
    • Dart plugin version 193.7361
    • Java version OpenJDK Runtime Environment (build 1.8.0_242-release-1644-b3-6222593)

[✓] VS Code (version 1.47.3)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.12.2

 
[✓] Connected device (5 available)            
    • SM M305F (mobile)      • 32003c30dc19668f          • android-arm64  • Android 10 (API 29)
    • Taha’s iPhone (mobile) • 00008020-001059882212002E • ios            • iOS 13.6
    • macOS (desktop)        • macos                     • darwin-x64     • Mac OS X 10.15.6 19G73
    • Web Server (web)       • web-server                • web-javascript • Flutter Tools
    • Chrome (web)           • chrome                    • web-javascript • Google Chrome 84.0.4147.105

• No issues found!

otopba · 2020-06-19T15:40:19Z

Same issue

gaaclarke · 2020-10-12T22:19:52Z

I took the image from #22572 (comment) and pasted the 2 "hello"s next to each other. I think any pixel differences are just tricks of antialiasing and not really representative of a different kern. It would be helpful if we had the companion iOS code that is using to compare.

huycozy · 2022-12-29T10:45:57Z

This issue seems to be reproducible on the latest master channel.

Flutter	iOS native

I tried putting 2 screenshots (ios native is red text, flutter is black text) with the first letter matching, the issue will be more visible (not sure if this is the right test):

Sample code (Flutter and iOS)

Flutter:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'my_app',
      home: Scaffold(
        backgroundColor: Colors.white,
        body: Center(
          child: Text(
            'hello from flutter yay',
            style: TextStyle(
              fontSize: 28.0,
            ),
          ),
        ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),
      ),
    );
  }
}

iOS native:

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        view.backgroundColor = .white

        let helloLabel = UILabel()
        helloLabel.text = "hello from flutter yay"
        helloLabel.font = helloLabel.font.withSize(28)
        helloLabel.textColor = UIColor.red
        helloLabel.translatesAutoresizingMaskIntoConstraints = false
        view.addSubview(helloLabel)
        helloLabel.centerYAnchor.constraint(equalTo: view.centerYAnchor).isActive = true
        helloLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor).isActive = true
    }
}

flutter doctor -v (stable and master)

[✓] Flutter (Channel stable, 3.3.10, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.3.10 on channel stable at /Users/huynq/Documents/GitHub/flutter
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 135454af32 (13 hours ago), 2022-12-15 07:36:55 -0800
    • Engine revision 3316dd8728
    • Dart version 2.18.6
    • DevTools version 2.15.0

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.73.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.54.0

[✓] Connected device (3 available)
    • SM T225 (mobile) • R9JT3004VRJ • android-arm64  • Android 12 (API 31)
    • macOS (desktop)  • macos       • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)     • chrome      • web-javascript • Google Chrome 108.0.5359.124

[✓] HTTP Host Availability
    • All required HTTP hosts are available

• No issues found!

[!] Flutter (Channel master, 3.7.0-13.0.pre.92, on macOS 13.0.1 22A400 darwin-x64, locale en-VN)
    • Flutter version 3.7.0-13.0.pre.92 on channel master at /Users/huynq/Documents/GitHub/flutter_master
    ! Warning: `flutter` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/flutter, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    ! Warning: `dart` on your path resolves to /Users/huynq/Documents/GitHub/flutter/bin/dart, which is not inside your current Flutter SDK checkout at /Users/huynq/Documents/GitHub/flutter_master. Consider adding /Users/huynq/Documents/GitHub/flutter_master/bin to the front of your path.
    • Upstream repository https://github.com/flutter/flutter.git
    • Framework revision 4e08ebb2bf (2 hours ago), 2022-12-27 19:31:24 -0500
    • Engine revision 8294e2693a
    • Dart version 3.0.0 (build 3.0.0-66.0.dev)
    • DevTools version 2.20.0
    • If those were intentional, you can disregard the above warnings; however it is recommended to use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 31.0.0)
    • Android SDK at /Users/huynq/Library/Android/sdk
    • Platform android-33, build-tools 31.0.0
    • ANDROID_HOME = /Users/huynq/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 14.1)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 14B47b
    • CocoaPods version 1.11.3

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2021.3)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 11.0.13+0-b1751.21-8125866)

[✓] IntelliJ IDEA Community Edition (version 2022.1.1)
    • IntelliJ at /Users/huynq/Library/Application Support/JetBrains/Toolbox/apps/IDEA-C/ch-0/221.5591.52/IntelliJ IDEA CE.app
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart

[✓] VS Code (version 1.74.2)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.56.0

[✓] Connected device (2 available)
    • macOS (desktop) • macos  • darwin-x64     • macOS 13.0.1 22A400 darwin-x64
    • Chrome (web)    • chrome • web-javascript • Google Chrome 108.0.5359.124

[✓] HTTP Host Availability
    • All required HTTP hosts are available

! Doctor found issues in 1 category.

paaspaas00 · 2024-05-16T16:29:46Z

Hi all, is this being worked on? The issue still persists on master

ghost changed the title ~~default Text's widget letter spacing is a bit off~~ default Text widget's letter spacing is a bit off Oct 2, 2018

ghost changed the title ~~default Text widget's letter spacing is a bit off~~ default Text widget's letter spacing is a bit off imo Oct 2, 2018

zoechi added f: cupertino flutter/packages/flutter/cupertino repository a: typography Text rendering, possibly libtxt waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds labels Oct 3, 2018

zoechi added this to the Goals milestone Oct 3, 2018

no-response bot removed the waiting for customer response The Flutter team cannot make further progress on this issue until the original reporter responds label Oct 3, 2018

xster added this to Fidelity Bugs in iOS Framework Oct 23, 2018

saurik mentioned this issue Nov 27, 2018

drawing of text selection menu looks wrong on iOS #24784

Closed

zoechi added the framework flutter/packages/flutter repository. See also f: labels. label Dec 13, 2018

xster moved this from Fidelity Bugs to Q1 Fidelity Tools in iOS Framework Jan 4, 2019

HansMuller added the a: fidelity Matching the OEM platforms better label May 14, 2019

csells changed the title ~~default Text widget's letter spacing is a bit off imo~~ default Text widget's letter spacing is a bit off Jan 13, 2020

jmagman added this to Awaiting Triage in Mobile - iOS fidelity review Feb 25, 2020

TahaTesser added the has reproducible steps The issue has been confirmed reproducible and is ready to work on label Mar 27, 2020

kf6gpe added the P2 Important issues not at the top of the work list label May 29, 2020

TahaTesser added the found in release: 1.21 Found to occur in 1.21 label Jul 29, 2020

Hixie removed this from the None. milestone Aug 17, 2020

gaaclarke moved this from Awaiting Triage to Engineer Reviewed in Mobile - iOS fidelity review Oct 12, 2020

huycozy added found in release: 3.7 Found to occur in 3.7 and removed found in release: 1.21 Found to occur in 1.21 labels Dec 29, 2022

flutter-triage-bot bot added multiteam-retriage-candidate team-design Owned by Design Languages team triaged-design Triaged by Design Languages team labels Jul 8, 2023

Hixie removed the multiteam-retriage-candidate label Mar 6, 2024

paaspaas00 mentioned this issue May 16, 2024

Font spacing in between characters looks off immich-app/immich#9529

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

default Text widget's letter spacing is a bit off #22572

default Text widget's letter spacing is a bit off #22572

ghost commented Oct 2, 2018 •

edited by ghost

Loading

ghost commented Oct 2, 2018 •

edited by ghost

Loading

ghost commented Oct 2, 2018 •

edited by ghost

Loading

zoechi commented Oct 3, 2018

ghost commented Oct 3, 2018

saurik commented Nov 27, 2018

TahaTesser commented Mar 27, 2020 •

edited

Loading

otopba commented Jun 19, 2020

gaaclarke commented Oct 12, 2020

huycozy commented Dec 29, 2022

paaspaas00 commented May 16, 2024

default Text widget's letter spacing is a bit off #22572

default Text widget's letter spacing is a bit off #22572

Comments

ghost commented Oct 2, 2018 • edited by ghost Loading

Steps to Reproduce

ghost commented Oct 2, 2018 • edited by ghost Loading

ghost commented Oct 2, 2018 • edited by ghost Loading

zoechi commented Oct 3, 2018

ghost commented Oct 3, 2018

saurik commented Nov 27, 2018

TahaTesser commented Mar 27, 2020 • edited Loading

otopba commented Jun 19, 2020

gaaclarke commented Oct 12, 2020

huycozy commented Dec 29, 2022

paaspaas00 commented May 16, 2024

ghost commented Oct 2, 2018 •

edited by ghost

Loading

ghost commented Oct 2, 2018 •

edited by ghost

Loading

ghost commented Oct 2, 2018 •

edited by ghost

Loading

TahaTesser commented Mar 27, 2020 •

edited

Loading