Typography Reference
Complete reference for typography on Apple platforms including San Francisco font system, text styles, Dynamic Type, tracking, leading, and internationalization through iOS 26.
San Francisco Font System
Font Families
SF Pro and SF Pro Rounded (iOS, iPadOS, macOS, tvOS)
- Main system fonts for most UI elements
- Rounded variant for friendly, approachable interfaces (e.g., Reminders app)
SF Compact and SF Compact Rounded (watchOS, narrow columns)
- Optimized for constrained spaces and small sizes
- watchOS default system font
SF Mono (Code environments, monospaced text)
- Monospaced font for code editors and technical content
- Consistent character widths for alignment
New York (Serif system font)
- Serif alternative for editorial content
- Works with text styles just like SF Pro
Variable Font Axes
Weight Axis (9 weights)
- Ultralight, Thin, Light, Regular, Medium, Semibold, Bold, Heavy, Black
- Continuous weight spectrum via variable fonts
- Avoid light weights at small sizes (legibility issues)
Width Axis (WWDC 2022)
- Condensed — narrowest width
- Compressed — narrow width
- Regular — standard width (default)
- Expanded — wide width
Access via:
let descriptor = UIFontDescriptor(fontAttributes: [
.family: "SF Pro",
kCTFontWidthTrait: 1.0
])
SF Arabic (WWDC 2022)
- Matches SF Pro design language for Arabic text
- Proper right-to-left support
Optical Sizes
Variable fonts automatically adjust optical size based on point size:
- Text variant (< 20pt) — more spacing, sturdier strokes
- Display variant (≥ 20pt) — tighter spacing, refined details
- Smooth transition (17-28pt) with variable SF Pro
From WWDC 2020:
"TextKit 2 abstracts away glyph handling to provide a consistent experience for international text."
Text Styles & Dynamic Type
System Text Styles
| Text Style |
Default Size (iOS) |
Use Case |
.largeTitle |
34pt |
Primary page headings |
.title |
28pt |
Secondary headings |
.title2 |
22pt |
Tertiary headings |
.title3 |
20pt |
Quaternary headings |
.headline |
17pt (Semibold) |
Emphasized body text |
.body |
17pt |
Primary body text |
.callout |
16pt |
Secondary body text |
.subheadline |
15pt |
Tertiary body text |
.footnote |
13pt |
Footnotes, captions |
.caption |
12pt |
Small annotations |
.caption2 |
11pt |
Smallest annotations |
Font Size Guidance
- Avoid
.caption2 for readable content — at 11pt, it's acceptable for timestamps and metadata annotations but too small for body text or labels users need to read. Prefer .caption or .footnote as the minimum for readable content.
Emphasized Text Styles
Apply .bold symbolic trait to get emphasized variants:
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .title1)
let boldDescriptor = descriptor.withSymbolicTraits(.traitBold)!
let font = UIFont(descriptor: boldDescriptor, size: 0)
Text("Bold Title")
.font(.title.bold())
Actual weights by text style:
- Some styles map to medium
- Others map to semibold, bold, or heavy
- Depends on semantic hierarchy
Leading Variants
Tight Leading (reduces line height by 2pt on iOS, 1pt on watchOS):
let descriptor = UIFontDescriptor.preferredFontDescriptor(withTextStyle: .body)
let tightDescriptor = descriptor.withSymbolicTraits(.traitTightLeading)!
Text("Compact text")
.font(.body.leading(.tight))
Loose Leading (increases line height by 2pt on iOS, 1pt on watchOS):
Text("Spacious paragraph")
.font(.body.leading(.loose))
Dynamic Type
Automatic Scaling (iOS):
Text styles scale automatically based on user preferences from Settings → Display & Brightness → Text Size.
Custom Fonts with Dynamic Type:
let customFont = UIFont(name: "Avenir-Medium", size: 34)!
let bodyMetrics = UIFontMetrics(forTextStyle: .body)
let scaledFont = bodyMetrics.scaledFont(for: customFont)
let spacing = bodyMetrics.scaledValue(for: 20.0)
Text("Custom scaled text")
.font(.custom("Avenir-Medium", size: 34, relativeTo: .body))
@ScaledMetric(relativeTo: .body) var padding: CGFloat = 20
Platform Differences
macOS
- No Dynamic Type support in AppKit
- Text style sizes optimized for macOS control sizes
- Catalyst apps use iOS sizes × 77% (legacy) or macOS-optimized sizes ("Optimize Interface for Mac")
watchOS
- Smaller text styles optimized for watch faces
- Tight leading default for compact displays
visionOS
- System fonts work identically to iOS
- Dynamic Type support included
Tracking & Leading
Tracking (Letter Spacing)
Tracking adjusts space between letters. Essential for optical size behavior.
Size-Specific Tracking Tables:
SF Pro includes tracking values that vary by point size to maintain optimal spacing:
- Larger sizes: tighter tracking
- Smaller sizes: looser tracking
Example from Apple Design Resources:
- 34pt (largeTitle): +0.016 tracking
- 17pt (body): +0.008 tracking
- 11pt (caption2): +0.06 tracking
Tight Tracking API (for fitting text):
textView.allowsDefaultTightening(for: .byTruncatingTail)
Text("Long text that needs to fit")
.lineLimit(1)
.minimumScaleFactor(0.5)
Manual Tracking:
let attributes: [NSAttributedString.Key: Any] = [
.font: UIFont.preferredFont(forTextStyle: .body),
.kern: 2.0
]
Text("Tracked text")
.tracking(2.0)
.kerning(2.0)
Important: Use .tracking() not .kerning() API for semantic correctness. Tracking disables ligatures when necessary; kerning does not.
Leading (Line Spacing)
Default Line Height:
Calculated from font's built-in metrics (ascender + descender + line gap).
Language-Aware Adjustments:
iOS 17+ automatically increases line height for scripts with tall ascenders/descenders:
- Arabic
- Thai, Lao
- Hindi, Bengali, Telugu
From WWDC 2023:
"Automatic line height adjustment for scripts with variable heights"
Manual Leading:
let paragraphStyle = NSMutableParagraphStyle()
paragraphStyle.lineSpacing = 8.0
Text("Custom spacing")
.lineSpacing(8.0)
Line Height (iOS 26+):
.lineHeight() sets baseline-to-baseline distance directly — more intuitive than .lineSpacing() (which measures bottom-to-top).
Text("Open layout").lineHeight(.loose)
Text("Compact layout").lineHeight(.tight)
Text("Scaled").lineHeight(.multiple(factor: 1.5))
Text("Fixed").lineHeight(.exact(points: 30))
Also available as AttributedString.lineHeight for styled str
