About the new SF Pro font

Vidit Bhargava
With iOS 11, Apple’s making updates to its system fonts. Previously called SF UI, the system font is available in two different options, SF Display and SF Text.

Here’s a look at the difference between Display and Text fonts, and the changes made in the new SF Pro fonts.

Difference between Display and Text Fonts

In general, Display fonts are used for anything greater than 19 pts. This would comprise of headings, sub-headings, captions etc. The new title bar headings fall into this category.

Text fonts, are used for body text. They have a slightly greater tracking (seen above), a greater x-height and larger counters (seen left). This is done to increase legibility in smaller sizes.

Difference between SF Pro and SF UI

With SF Pro, Apple’s made iterative changes to their default type. The differences are more profound between Pro display and UI display. Pro display has a shorter x-height, a slightly different modulation, and broader counters.

SF UI Text and SF Pro Text are way more similar. There’s just a minor difference in the shoulders for some characters.

Why were these changes made?
Apple updated the iOS UI in iOS 11, to have large titles. It appears that apple decided to tweak these fonts for an increased legibility for the large title labels in iOS 11.

These changes also make more sense if a user is using a dark background or has certain accessibility settings turned-on (like the improved invert colours options for iOS 11). In that case, smaller counters would be worse, so it makes sense to change that.

It’s important to remember that when Apple introduced the SF UI fonts, these weren’t the intended uses. The iPhone UI looked different back in iOS 9. But as the UI requirements for the default typeface has changed, Apple’s added more font weights, and tweeked its fonts to work more legibly for its OS.