Typography
San Francisco is the system font on iOS. There are two variants of this font: SF UI Text for text 19 points or smaller, and SF UI Display for text 20 points or larger. When you use the system font for text in labels and other interface elements, iOS automatically applies the most appropriate text style of the font based on the point size. It also switches fonts automatically as needed and respects accessibility settings. Download the San Francisco fonts in Resources.
iOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.
If possible, use a single font. Mixing several different fonts can make your app seem fragmented and sloppy. Consider using one font and just a few styles and sizes.
Use built-in text styles whenever possible. The built-in text styles let you express content in ways that are visually distinct, while retaining optimal legibility. These styles are based on the system fonts and allow you to take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. iOS includes the following text styles:
| Title 1 | Callout |
| Title 2 | Subhead |
| Title 3 | Footnote |
| Headline | Caption 1 |
| Body | Caption 2 |
Make sure custom fonts are legible. Custom typefaces are supported on iOS, but are often tough to read. Unless your app has a compelling need for a custom font, such as for branding purposes or to create an immersive gaming experience, stick with the system fonts. If you do use a custom font, make sure it’s readable.
Implement accessibility features for custom fonts. System fonts automatically react to accessibility features, such as when bold text is enabled. Apps using custom fonts should implement the same behavior by checking whether accessibility features are enabled and registering for notifications when they change. See Accessibility.
Dynamic Type Sizes
Both variants of the SF UI typeface were designed to be highly legible at both small and large sizes. Dynamic Type provides additional flexibility by letting readers choose their preferred text size.
Prioritize content when responding to text-size changes. Not all content is equally important. When someone chooses a larger size, they want to make the content they care about easier to read; they don’t always want every word on the screen to be larger.
Download a dynamic type size table in Resources.
Font Usage and Tracking
Use the correct font variant in interface mockups. Use SF UI Text for text 19 points or smaller. Use SF UI Display for text 20 points or larger. Adjust tracking—the spacing between letters—appropriately, as follows: