Typography

San Francisco (SF) is the system typeface in macOS. The fonts of this typeface are optimized to give your text unmatched legibility, clarity, and consistency. Download the San Francisco family of fonts here.

Use the correct font variant in interface mockups. Use SF Pro Text for text 19 points or smaller, and SF Pro Display for text 20 points or larger. When you use San Francisco for text in standard controls like buttons and labels, macOS automatically applies the most appropriate variant based on the point size and the user’s accessibility settings.

In macOS 10.12, the San Francisco variants were SF UI Text and SF UI Display.

Emphasize important information. Use font weight, size, and color to highlight the most important information in your app.

If possible, use a single typeface. Mixing several different typefaces can make your app seem fragmented and sloppy. Consider using one typeface and just a few font variants and sizes.

Make sure custom fonts are legible. Custom fonts are supported on macOS, but are sometimes 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, it’s usually best to stick with the system fonts. If you do use a custom font, make sure it’s easily readable, even at small sizes.

Use the standard Fonts panel for user font changes. If your app supports typography and text layout, use the standard Fonts panel to obtain the user’s font selection rather than designing a custom font-picker. The Fonts panel is familiar and includes controls for selecting a font and adjusting attributes such as typeface, size, and color. For developer guidance, see NSFontPanel.

Use dynamic system font variants to match the text appearance of standard controls. Dynamic system font variants give your text the same look and feel of the text that appears in standard system-provided controls. Use these variants to achieve a look that’s consistent with other apps on the platform.

Dynamic Font Variant API
Control Content controlContentFontOfSize
Label labelFontOfSize
Menu menuFontOfSize
Menu Bar menuBarFontOfSize
Message messageFontOfSize
Palette paletteFontOfSize
Title titleBarFontOfSize
Tool Tip toolTipsFontOfSize
Document Text (User) userFontOfSize
Monospaced Document Text (User Fixed Pitch) userFixedPitchFontOfSize
Bold System Font boldSystemFontOfSize
System Font systemFontOfSize