System Typography & SF Font

The San Francisco (SF) font family powers text display across Apple platforms — from watchOS to macOS. Each font in this family adapts to different screen sizes while maintaining Apple's signature look and excellent readability.

Each platform has its own set of built-in text styles. For iOS and iPadOS, body text defaults to 14pt Regular, while macOS uses 13pt Regular. Text styles range from large titles (31pt in iOS/iPadOS, 26pt in macOS) down to small captions (11pt in iOS/iPadOS, 10pt in macOS).

Text spacing in SF fonts changes automatically based on size. The tracking values adapt precisely: text at 12pt has no tracking adjustment, smaller sizes get positive tracking for better readability, while 13-20pt sizes receive negative tracking for tighter headlines.

SF fonts include built-in features that improve text display:

• Rounded corners become slightly sharper at small sizes
• Letter shapes adjust to stay clear and readable
• Numbers align perfectly in tables and data
• Punctuation marks adjust their position based on surrounding characters^[1]

SF fonts include distinct variants designed for different uses. SF Pro serves as the main interface font, while SF Pro Rounded offers a softer look for specific UI moments. SF Mono provides fixed-width characters perfect for code and data display.

Each variant comes with 9 weights — from Ultralight to Black. This range helps create contrast and hierarchy without switching font families. The weights work consistently across all SF variants, maintaining visual harmony throughout interfaces.

SF Compact adapts the standard SF design for smaller displays. Its condensed letterforms and tighter spacing help fit more content on watch faces and compact UI elements. SF Pro Display and SF Pro Text optimize letter shapes for different size ranges.

Key attributes of SF variants:

• SF Pro balances neutrality with personality
• SF Compact preserves legibility in tight spaces
• SF Mono aligns numbers and code perfectly
• SF Rounded softens UI without losing clarity

Dynamic Type adjusts text size across Apple interfaces based on users' preferences. This system ensures comfortable reading without breaking layout harmony — from the default size to larger accessibility options.

iOS and iPadOS offer seven standard text sizes and five larger accessibility sizes. This size spectrum ranges from xSmall to xxxLarge in standard sizes and continues through AX1 to AX5 for accessibility needs. Body text, for example, scales from 14pt at default to 28pt at AX1.

Dynamic Type affects entire interfaces systematically. When users change their preferred text size:

• Titles and body text scale proportionally
• Line height adjusts to maintain readability
• Spacing between UI elements adapts automatically
• All text styles maintain their relative hierarchy

Most importantly, Dynamic Type preserves the relationship between different text styles. Headlines stay prominent, captions remain smaller than body text, and the overall visual hierarchy stays intact at any size.^[2]

SF fonts create a clear visual hierarchy through a system of predefined text styles. Each style serves a specific purpose — from prominent Large Title (31pt in iOS) to subtle Caption 2 (11pt).

The content structure becomes clear through consistent style application:

• Large Title marks main sections and primary screens
• Headlines (14pt Semibold) introduce content areas
• Body text (14pt Regular) delivers the core information
• Captions (11pt) provide supporting details

The built-in spacing between styles helps content breathe naturally. iOS body text gets 19pt leading while headlines maintain the same line height despite their bolder weight. This consistent approach to spacing reinforces hierarchy while maintaining rhythm.

Apple platforms provide carefully calibrated styles that work together. Instead of creating custom sizes, using these predefined styles ensures consistent vertical rhythm and helps users recognize familiar patterns across apps.

SF fonts automatically adjust their design as size changes. At smaller sizes, letters become slightly wider with more open shapes and looser spacing. Larger sizes get more condensed forms with tighter fit and sharper details.

Two optical size families handle different ranges:

• SF Pro Text optimizes shapes for sizes 19pt and below
• SF Pro Display refines details for 20pt and above

Automatic optical sizing shows in action across interfaces. Compare how SF appears in different contexts:

• Crisp small labels in the Control Center
• Sharp app names on the Home Screen
• Clean body text in Messages
• Bold headlines in the News app

The system handles these adjustments seamlessly. Rounded corners become more pronounced at display sizes, while text sizes maintain clear shapes and consistent stroke contrast. This helps maintain legibility without manual tweaking.

SF fonts use automatic tracking — the space between letters changes based on text size. This system creates optimal spacing without manual adjustments from designers.

The tracking system follows a precise pattern:

• 12pt text has 0 tracking as a baseline
• 10pt text gets +12 tracking (1/1000 em)
• 13pt text receives -6 tracking
• 17pt text uses -26 tracking
• 28pt text returns to +14 tracking

These adjustments happen automatically in Apple interfaces. For example, notice how footnotes at 10pt get more space between letters for better readability, while headlines at 17pt use tighter spacing to create stronger visual impact.

The tracking system works across SF variants. Whether using SF Pro in Mail or SF Compact on Apple Watch, text maintains proper spacing based on its size. This creates a consistent reading rhythm across all Apple platforms.

SF typography plays a vital role in navigation across Apple platforms. Each navigation element relies on specific text styles that help users scan and understand the interface structure.

Large Title (31pt in iOS) creates a clear hierarchy in navigation bars, especially when scrolling. As users scroll down, the title smoothly transitions to a more compact style without losing its prominence.

Navigation elements use consistent type styles:

• Back buttons and items: Body (17pt)
• Tab bar labels: Caption size
• Menu items: Body text
• Sidebar items: Regular weight for clear scanning

The system automatically handles text truncation and scaling in navigation. When interface elements need to adapt to different screen sizes or orientations, SF fonts maintain optimal legibility while preserving navigation hierarchy.

SF fonts maintain their quality across different screen sizes and orientations. Whether on a compact iPhone screen or an expansive iPad display, the type system ensures consistent readability and visual hierarchy.

The system handles text adjustments automatically:

• Margins adapt to screen width
• Line length stays comfortable for reading
• Text styles scale proportionally
• Spacing adjusts to maintain balance

Take the Messages app as an example. Notice how text behaves when switching between portrait and landscape:

• Message bubbles reflow naturally
• Input field text stays legible
• Timestamps maintain their style
• Contact names remain prominent

These automatic adjustments work across Apple platforms.

Dynamic Type helps people pick the font size that works for them. When users adjust text size in settings, interfaces should remain readable and well-structured — from standard sizes to larger accessibility options.

Key accessibility considerations for SF typography:

• Prefer Regular to Bold weights — avoid Ultralight, Thin, and Light
• Maintain text hierarchy at all sizes
• Minimize text truncation in scrollable areas
• Consider adjusting layouts at large sizes to prevent crowding
• Ensure sufficient color contrast for text legibility

Notice how Twitter (X) app adapts to accessibility needs:

• Tweet text scales smoothly without truncation
• Username and handle stay clear but compact
• Action buttons remain easily tappable
• Media descriptions scale with content
• Timeline preserves readability at any size

Interface icons should scale alongside text. SF Symbols automatically adapt to accessibility text sizes, maintaining clear visual communication at any size.^[3]

When implementing custom fonts in iOS apps, legibility and accessibility remain crucial. Custom typefaces must maintain readability across different viewing distances and conditions, following Apple's size specifications.

Airbnb's Cereal font demonstrates how custom typography can balance brand identity with usability. Its clean, geometric letterforms ensure legibility while maintaining brand character.

Custom fonts must support key accessibility features:

• Dynamic Type scaling
• Bold Text enhancement
• Sufficient contrast ratios
• Clear character distinction
• Text size adjustment options

Common typography mistakes can undermine interface clarity. Understanding these issues helps create more accessible and usable designs:

• Font weight selection. Avoid Ultralight, Thin, and Light font weights as they can be difficult to see. Prefer Regular, Medium, Semibold, or Bold weights for better visibility.
• Layout adjustments. When font size increases in constrained spaces, inline items can crowd text. Avoid keeping timestamps or icons inline with text at large sizes — consider stacking elements vertically.
• Text truncation. Minimize text truncation as font size increases. Especially in scrollable areas, ensure users can read complete content either directly or in a separate view.