San Francisco (SF) is the system font on all Apple platforms; the SF Pro variant is the system font in tvOS. Using the system font gives your text legibility and clarity on a big screen, and consistency with apps across Apple platforms. Download the San Francisco family of fonts here.
tvOS uses San Francisco as the system font for Latin, Greek and Cyrillic alphabets, and a variety of other typefaces for other scripts.
Beginning in tvOS 14, the system provides the San Francisco fonts in the variable font format. This format combines different font styles together in one file, and supports interpolation between styles to create intermediate ones. With interpolation, typefaces can adapt to all sizes while appearing specifically designed for each size.
Interpolation also enables optical sizing, which refers to the creation of different typographic designs to fit different sizes. San Francisco provides Text and Display, which are discrete optical size variants that help text look great at any size. In tvOS 14 and later, the system font supports dynamic optical sizes, merging the discrete optical sizes into a single, continuous design. This design allows each glyph or letterform to be interpolated to produce a structure that’s precisely adapted to the point size.
NOTE Using variable fonts in a design tool that’s running on an earlier version of tvOS may produce unexpected results. In this case, continue using Text and Display.
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 — including headline, body, callout, and several sizes of title — are based on the system fonts and let you take advantage of key typographic features, such as Dynamic Type, which automatically adjusts tracking and leading for every font size. For specific values, see Dynamic Type Sizes; for developer guidance, see UIFontTextStyle.
Modify leading to improve readability or conserve space. Leading is the space between lines of text. In some cases, text layouts work better when you increase or decrease this space. When you display text in wide columns or long passages, more space between lines (loose leading) can make it easier for people to keep their place while moving from one line to the next. Conversely, if you need to display two lines of text in an area where height is constrained — for example, in a list row — decreasing the space between lines (tight leading) can help the text fit well. If you need to display three or more lines of text, avoid tight leading even in areas where height is limited. The system defines API that lets you increase or decrease the space between lines by two points; for developer guidance, see loose and tight (SwiftUI), and traitLooseLeading and traitTightLeading (UIKit).
Minimize text. Show, don’t tell. Reading lots of text on a screen across the room strains the eyes and isn’t much fun. Seriously consider how much text your app really needs to show and see what you can communicate with images or an animation instead. If you use images, be sure to provide alternative text that VoiceOver can use to describe them to people with visual disabilities.
Make sure custom fonts are legible at a distance. Custom typefaces are supported on Apple TV, but can be tough to read at a distance, especially if they’re too thin. 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 legible from across the room.
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 Text Size and Weight.
Adjust tracking as needed in interface mockups. In a running app, the system font dynamically adjusts tracking at every point size. To produce an accurate interface mockup of a UI that uses the variable system fonts, you don’t have to choose a discrete optical size at certain point sizes, but you might need to adjust the tracking. In this situation, you can use the SF Pro tracking values listed below or see Apple Design Resources.
|Size (points)||Tracking (1/1000em)||Tracking (points)|
In interface mockups, use text size to determine when to use SF Pro Text and Display. If you use the Text and Display discrete optical sizes in an interface mockup, you need to use different variants at different text sizes. Specifically, use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. If you need to adjust tracking, see the tracking values available in Apple Design Resources.
Dynamic Type Sizes
Dynamic Type provides additional flexibility by letting viewers choose their preferred text size. Here are the weight, size, and leading values for each text style in standard and emphasized variants.
|Style (standard)||Weight||Size (points)||Leading (points)|
|Style (emphasized)||Weight||Size (points)||Leading (points)|
|Title 1||Bold||76||96 | +11|
|Title 2||Bold||57||66 | +13|
|Title 3||Bold||48||56 | +15|
|Headline||Bold||38||46 | -26|
|Subtitle 1||Medium||38||46 | -26|
|Callout||Bold||31||38 | -16|
|Body||Bold||29||36 | -13|
|Caption 1||Medium||25||32 | -3|
|Caption 2||Bold||23||30 | +3|