San Francisco: Understanding the Features

Dealing with Numerals in San Francisco

The SF Pro font family provides a wide variety of adjustments and features for using numerals.

Proportional and Tabular Numbers

Difference between character widths fo monospaced and proportional numbers
When numbers are used along with static text. They need to blend in with the text by following a similar baseline and having the necessary descenders and ascenders. For Example, “The answer to life universe and everything is 42”, would use proportional numbers.

Difference between updating text on Prop vs Mono

However, if you are using spreadsheets or are using numbers in a situation where the text would update over time. For Example, a label saying “Downloading 42 of 97 files” in your UI, would update over time. And Propotional numbers in that case would cause the text to shift left and right according to their character widths. Using tabular (often called monospaced) numbers in such an interface element helps mitigate that issue. In spreadsheets, you need the different numbers to lineup for greater legibility, and therefore numbers that have the same width (monospaced) would be more useful.

Fractional, Inferior, and Superior Forms

Image Showing Fractional, Inferior and Superior Forms
The San Francisco font also has the option to enable fractionals and inferior and superior forms, so they can be relevantly used to in order to provide better readability and contextual information. This is especially useful for developers who’d otherwise have to use different fonts for providing these glyphs.

Higher Legibility Options

Apart from the above mentioned numerical features. San Francisco’s Higher Legibility feature provides the option to use alternative glyphs for certain number. So users can use, an open 4 representation instead of the closed 4, or a different glyph for 6 and 9 to improve the Legibility of the two. Higher Legibility features also differentiate more clearly between a 0 and an O. These features can also be enabled seperately.

Higher Legibility Alternatives for Text

Image showing difference between high legibility text
In 2013, The DIN (Deutsche Institut fur Normung or the German Institute of Standardisation) acknowledged that certain characters can be easily confused with others. They suggested certain changes to the glyphs for better readability (especially for road signs where visibility can very and it’s highly important to ensure that the user reads the sign correctly).

Confused Characters

The San Francisco font has a a feature to enable these higher Legibility glyphs to improve the readability. But while these make the font look more readable, they’re a departure from the standard San Francisco font glyphs, and can easily be seen as inconsistent with the system type, and therefore they should be used sparingly only when necessary.

The Reminders and Notes app in iOS and macOS use these higher legibility alternatives.

Ligatures for Enclosed Alphanumerics

Enclosed alphanumerics
Enclosed Alphanumerics were originally Intended to be used as bullets, instead of the parenthesis. And while they’re really handy at that purpose, They’ve also found their way into modern graphic in a few other ways as well. Take the New York Subway Stations for example. Enclosed Alphanumerics help in providing emphasis to certain elements.

new York station subway

The San Francisco font offers ligatures to combine enclosing squares and circles (or even a combination of the two) with Alphanumerals, and a bunch of other Unicode symbols to provide enclosed Alphanumerics.

ligature unicodes

For accessing these features in your App, there are developer APIs that can be called to use them. For using them in your word processor, you need to open macOS’ “Show Fonts” tool and look for typographic options to turn them on. Make sure you have the SF Pro font to use them.