Comparison of system fonts on iOS 8 and iOS 9

Background

Until iOS 9 the well known system font for apps was Helvetica Neue. In iOS 9 Apple changed the default font to San Francisco. For developers it’s not a big issue as long as system fonts are used, which allows to use San Francisco on iOS 9 and Helvetica Neue on iOS 8 without additional code.

There’re two ways to use system fonts in iOS:

1. Using storyboard. Instead of selecting custom font for every element with text, just select the variation of system font (light, regular, medium, etc).

How to select font in storyboard?

2. Through code. Use UIFont methods that return system fonts, instead of explicitly setting the font name.

However, sometimes it’s confusing, which font will correspond to System font with Ultra Light weight on iOS 8 and iOS 9. That’s why I put together a table of font mappings on iOS 8 and iOS 9.

An important catch is that on iOS 9 font selection also depends on the text size. For texts smaller than 20 pt San Francisco UI Text font will be used. For sizes 20pt or greater San Francisco UI Display will be used. San Francisco UI text doesn’t have an UltraLight nor Thin versions and that’s why for texts smaller than 20 pt it’s no difference between UltraLight, Thin and Light weights. For texts bigger than 20pt there’re different font versions for UltraLight, Thin and Light weights.

That also improves readability for every possible text size. One more good reason to prefer system fonts  🙂 !

System fonts on iOS 8 and iOS 9 with sizes less than 20 pt (<= 19pt)

 Font Weight   Font on iOS 9   Font on iOS 8  
UIFontWeightUltraLightSan Francisco UI Text Light
(SFUIText-Light)
Helvetica Neue Ultra Light
(HelveticaNeueInterface-UltraLightP2)
UIFontWeightThinSan Francisco UI Text Light
(SFUIText-Light)
Helvetica Neue Thin
(HelveticaNeueInterface-Thin)
UIFontWeightLightSan Francisco UI Text Light
(SFUIText-Light)
Helvetica Neue Light
(HelveticaNeueInterface-Light)
UIFontWeightRegularSan Francisco UI Text Regular
(SFUIText-Regular)
Helvetica Neue Regular
(HelveticaNeueInterface-Regular)
UIFontWeightMediumSan Francisco UI Text Medium
(SFUIText-Medium)
Helvetica Neue Medium
(HelveticaNeue-Medium)
UIFontWeightSemiboldSan Francisco UI Text Semibold
(SFUIText-Semibold)
Helvetica Neue Medium
(HelveticaNeueInterface-MediumP4)
UIFontWeightBoldSan Francisco UI Text Bold
(SFUIText-Bold)
Helvetica Neue Medium
(HelveticaNeueInterface-MediumP4)
UIFontWeightHeavySan Francisco UI Text Heavy
(SFUIText-Heavy)
 Helvetica Neue Heavy
(HelveticaNeueInterface-Heavy)
UIFontWeightBlackSan Francisco UI Text Heavy
(SFUIText-Heavy)
Helvetica Neue Heavy
(HelveticaNeueInterface-Heavy)

System fonts on iOS 8 and iOS 9 with sizes more than 20 pt (>= 20pt)

 Font Weight   Font on iOS 9   Font on iOS 8  
UIFontWeightUltraLightSan Francisco Display Ultra Light
(SFUIDisplay-Ultralight)
Helvetica Neue Ultra Light
(HelveticaNeueInterface-UltraLightP2)
UIFontWeightThinSan Francisco Display Thin
(SFUIDisplay-Thin)
Helvetica Neue Thin
(HelveticaNeueInterface-Thin)
UIFontWeightLightSan Francisco Display Light
(SFUIDisplay-Light)
Helvetica Neue Light
(HelveticaNeueInterface-Light)
UIFontWeightRegularSan Francisco Display Regular
(SFUIDisplay-Regular)
Helvetica Neue Regular
(HelveticaNeueInterface-Regular)
UIFontWeightMediumSan Francisco Display Medium
(SFUIDisplay-Medium)
Helvetica Neue Medium
(HelveticaNeue-Medium)
UIFontWeightSemiboldSan Francisco Display Semibold
(SFUIDisplay-Semibold)
Helvetica Neue Medium
(HelveticaNeueInterface-MediumP4)
UIFontWeightBoldSan Francisco Display Bold
(SFUIDisplay-Bold)
Helvetica Neue Medium
(HelveticaNeueInterface-MediumP4)
UIFontWeightHeavySan Francisco Display Heavy
(SFUIDisplay-Heavy)
 Helvetica Neue Heavy
(HelveticaNeueInterface-Heavy)
UIFontWeightBlackSan Francisco Display Black
(SFUIDisplay-Black)
Helvetica Neue Heavy
(HelveticaNeueInterface-Heavy)

Predefined text styles

Another convinient feature is to use predefined text styles provided by Apple. Selecting a predefined text style is very easy, when using storyboard:

Text styles in storyboard

Text styles map to following font and size combinations:

 Text Style Font on iOS 9   Font on iOS 8  
BodySan Francisco UI Text Regular 17pt
(SFUIText-Regular 17.00pt)
Helvetica Neue Regular 17pt
(HelveticaNeueInterface-Regular 17.00pt)
CalloutSan Francisco UI Text Regular 16pt
(SFUIText-Regular 16.00pt)
Helvetica Neue Regular 16pt
(HelveticaNeueInterface-Regular 16.00pt)
Caption 1San Francisco UI Text Regular 12pt
(SFUIText-Regular 12.00pt)
Helvetica Neue Regular 12pt
(HelveticaNeueInterface-Regular 12.00pt)
Caption 2San Francisco UI Text Regular 11pt
(SFUIText-Regular 11.00pt)
Helvetica Neue Regular 11pt
(HelveticaNeueInterface-Regular 11.00pt)
FootnoteSan Francisco UI Text Regular 13pt
(SFUIText-Regular 13.00pt)
Helvetica Neue Regular 13pt
(HelveticaNeueInterface-Regular 13.00pt)
HeadlineSan Francisco UI Text Semibold 17pt
(SFUIText-Semibold 17.00pt)
Helvetica Neue Medium
(HelveticaNeueInterface-MediumP4 17.00pt)
SubheadSan Francisco UI Text Regular 15pt
(SFUIText-Regular 15.00pt)
Helvetica Neue Regular 15pt
(HelveticaNeueInterface-Regular 15.00pt)
Title 1San Francisco UI Text Light 28pt
(SFUIDisplay-Light 28.00pt)
Helvetica 12pt
(Helvetica 12.00pt)
Title 2San Francisco Display Regular 22pt
(SFUIDisplay-Regular 22.00pt)
Helvetica 12pt
(Helvetica 12.00pt)
Title 3San Francisco Display Regular 20pt
(SFUIDisplay-Regular 20.00pt)
Helvetica 12pt
(Helvetica 12.00pt)

Example project

You can get grab a sample project to play with from Github

The values in the tables are based on iOS 9.3 and iOS 8.4.

iOS8_fonts
iOS8_fonts_iPhone6

One Response
  1. Naqash

Leave a Reply

Your email address will not be published. Required fields are marked *

*