Default fonts on iOS / macOS >20 pixels will have tighter spacing

[Leigha Jarett]

TLDR; We’ve updated the way Flutter leverages Apple’s font APIs. As of this commit, Flutter apps on master will see default fonts on iOS and macOS over 20 pixels have tighter spacing. We believe this is a beneficial change as it will match native text styles.

—

Due to a change to Apple’s font APIs, Flutter’s usage of SF has been different from native iOS apps since iOS 13.  The small system font, or “.SF Pro Text” continued to work as expected, but the large system font was incorrectly showing the smaller font.

For context: Apple has their system font split into two variations since iOS 9, currently named “SF Pro Text” and “SF Pro Display”. The “Text” font variation is designed for sizes under 20 pixels, and the “Display” variation is for sizes 20 and over. Stylistically they are very hard to tell apart with the human eye, except that “Text” has a higher default letter spacing to be easier to read at small sizes, and “Display” is more compact for the purpose of titles and other larger text. We have been incorrectly only showing the “SF Pro Text” font even when the “Display” font was requested causing larger text to be more spaced out in Flutter than their native counterparts.

How this looked before, with the text “Large iOS System font from Flutter” more spaced out than the correct font below it:


A fix has been merged that allows the correct Apple system font to be loaded through a proxy string. The framework now uses these font family strings by default on iOS and macOS. This means that your apps might look a little different after this change. 

Specifically, If you use the default Flutter text style then fonts at 20 pixels and above will appear with tighter spacing. We believe this is a beneficial change that will more closely match native.

If you want to keep the older, more spaced out font for larger text, you can set the font family to “CupertinoSystemText” to have it appear as it did before this change.

If you manually set the font family in your code outside of the theme, you will see no changes in your app and you may have to use different font family names in order to migrate to picking up these changes. If the font family “.SF Pro Display” is used, it will continue to incorrectly show the wrong font as before. You can pick up the correct font by setting it to “CupertinoSystemDisplay” to show the change.

If you manually set the font family to “.SF Pro Text” or “.SF UI Text”, those will continue to function as normal, but it is recommended to switch to “CupertinoSystemText”, as that will be safer against changes Apple could make to their font API that are possible and would be breaking.

Of note: the way Flutter accesses these fonts is different then how it is done using Apple APIs when developing native apps. For example in UIKit you would ask for the system font by either size or text style, and the correct font is returned for you so that you never interact with the font name itself. We chose to not put in Apple-specific behavior for these fonts so they can be requested by name the same as any other font.
Best, 
Leigha