In 2015 Apple introduced new versions of their system, iOS 9 and OS X El Capitan and one of the big changes for designers was the new typeface called San Francisco. It replaced the previous system font Helvetica Neue, introduced firstly with iOS 7. Can you see how ‘San Francisco’ is quite similar? So why did they create it?
Problems with ‘Helvetica Neue’
In 1983 the famous Helvetica typeface which was reworked into the new font Helvetica Neue. The goal was to redraw this font for digital use with better legibility on displays. Compared to the original, Helvetica Neue has a more structurally unified set of heights and widths, heavier punctuation marks, and increased spacing in the numbers.
But many designers criticise that the digitalization has too tight spacing for comfortable reading. And that’s a problem, especially when you use small text sizes on the screen, which is a pretty common use case these days.
On the other hand, San Francisco typeface has been created specially for these use cases. It is a brand new modern font, and even if it is heavily inspired by Helvetica Neue, his legibility is much better, especially on a really small screen. And this is particularly important for devices like the Apple Watch. So how do they archive that?
“The secret” behind San Francisco
First of all, San Francisco is not a single font. It comprised of two main subfamilies. One of them is named ‘SF’ and is used in iOS, MacOS and Apple TV, and the second one ‘SF Compact’ is just for the Apple Watch.
The biggest difference is that ‘SF Compact’ has flat vertical lines which gives the letters more margins between them and improving aliasing on digital screens which means better legibility on the Apple Watch displays. You can spot this best on letters with round shapes, such as o, e, and s.
Both families have two cuts that Apple called Optical sizes: ‘Text’ for smaller text, and ‘Display’ for bigger, like titles. And each of them have multiple weights. Here is the table of the whole ‘SF family’. And it’s a big family!
And now the most interesting part. Compared to normal fonts, ‘SF’ is dynamic. Among other things, it means that it automatically switches Optical sizes and Vertical spacing according to the font size for best legibility. The breaking point is 20pt.
So If you use sizes less than 20pt the font will be switched to the ‘Text’ cut and if it is 20pt or more it will switch to the ‘Display’ cut.
If you are a developer, I have good news for you, you don’t have to care about it. The system will do all this work for you and actually you won’t be able to choose another way! (but you should check the Developer documentations for all features about it).
But if you are a designer working on some graphics/mockups in Photoshop or Sketch and you want to have correct typography in your design, sadly you have to do some additional work and take care of this yourself.
How to use San Francisco in Photoshop and Sketch?
First of all you have to choose the right font subfamily. If you are designing for iOS, MacOS or Apple TV, you should use ‘SF’ and for Apple Watch ‘SF Compact’.
Then you have to remember ‘20pt rule’. So if your size is less than 20pt, use ‘Text’ cut and if 20 pt and more use ‘Display’.
And now comes the problematic part, vertical spacing, know as leading (also known as Tracking in Photoshop). Although Apple iOS Human Interface Guidelines has a nice table with all the values you need, sadly it only contains the Tracking values useable for Photoshop.
Lucky you can download a Sketch template with all sizes and correct spacings (they also have this template for Photoshop). But working with the template isn’t very pleasant, therefore when doing basic work with regular weight it is easier to use this basic table.
There are some Sketch plugins available which should do all the work for you, but I tried a few of them and none of them were working properly, especially if you are creating a design in @1x size like I do. But if you know some good plugins, let me know in the comment section.
Where to download?
This is a little bit tricky. Yes, you can download this typeface from the official website but you need a developer account, which is something that most of the designers don’t own. Luckily there are some un-official repository on Github, so check it out.
And btw. licences for this typeface prohibit any other usage except mocking up Apple applications. So you can’t use this font for websites, prints etc. Also the file is purposely broken, so it can’t be installed on Windows and other systems. But a community will always find a way so here is an un-official Windows compatible version if you need it.
This article covers just the basics about SF typeface, but it has even more cool features like vertically centered colons, alternate symbols and monospaced letters.
So If you want to learn more about it I highly recommend the introduction talk by Antonio Cavedoni on #WWDC15 or great article from David Kadavy. And of course check the official guideline specifications.
If you like this article don’t hesitate to give a ❤ and share this among your friends. Thank you!
