Anthony Cardinale
34bd90e30d
Combines frontend-design aesthetics with swiftui-pro correctness, grounded in Apple's Human Interface Guidelines (134 articles). Includes curated HIG reference files for typography, color, layout, materials, motion, icons, and components, plus full HIG JSON data for deep lookups. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
112 lines
4.2 KiB
Markdown
112 lines
4.2 KiB
Markdown
# HIG: Typography
|
|
|
|
Source: [Apple HIG — Typography](https://developer.apple.com/design/human-interface-guidelines/typography)
|
|
|
|
## System Fonts
|
|
|
|
- **San Francisco (SF):** SF Pro, SF Compact, SF Mono, SF Arabic, SF Armenian, SF Georgian, SF Hebrew — plus Rounded variants
|
|
- **New York (NY):** Serif family, works well alongside SF
|
|
- Variable font format with dynamic optical sizes — no need to pick discrete optical sizes
|
|
|
|
## Default & Minimum Text Sizes
|
|
|
|
| Platform | Default | Minimum |
|
|
|----------|---------|---------|
|
|
| iOS, iPadOS | 17 pt | 11 pt |
|
|
| macOS | 13 pt | 10 pt |
|
|
| tvOS | 29 pt | 23 pt |
|
|
| visionOS | 17 pt | 12 pt |
|
|
| watchOS | 16 pt | 12 pt |
|
|
|
|
## Text Styles (iOS/iPadOS — Large/Default)
|
|
|
|
| Style | Weight | Size | Leading | Emphasized |
|
|
|-------|--------|------|---------|------------|
|
|
| Large Title | Regular | 34 pt | 41 pt | Bold |
|
|
| Title 1 | Regular | 28 pt | 34 pt | Bold |
|
|
| Title 2 | Regular | 22 pt | 28 pt | Bold |
|
|
| Title 3 | Regular | 20 pt | 25 pt | Semibold |
|
|
| Headline | Semibold | 17 pt | 22 pt | Semibold |
|
|
| Body | Regular | 17 pt | 22 pt | Semibold |
|
|
| Callout | Regular | 16 pt | 21 pt | Semibold |
|
|
| Subhead | Regular | 15 pt | 20 pt | Semibold |
|
|
| Footnote | Regular | 13 pt | 18 pt | Semibold |
|
|
| Caption 1 | Regular | 12 pt | 16 pt | Semibold |
|
|
| Caption 2 | Regular | 11 pt | 13 pt | Semibold |
|
|
|
|
## macOS Text Styles
|
|
|
|
| Style | Weight | Size | Line Height | Emphasized |
|
|
|-------|--------|------|-------------|------------|
|
|
| Large Title | Regular | 26 pt | 32 pt | Bold |
|
|
| Title 1 | Regular | 22 pt | 26 pt | Bold |
|
|
| Title 2 | Regular | 17 pt | 22 pt | Bold |
|
|
| Title 3 | Regular | 15 pt | 20 pt | Semibold |
|
|
| Headline | Bold | 13 pt | 16 pt | Heavy |
|
|
| Body | Regular | 13 pt | 16 pt | Semibold |
|
|
| Callout | Regular | 12 pt | 15 pt | Semibold |
|
|
| Subheadline | Regular | 11 pt | 14 pt | Semibold |
|
|
| Footnote | Regular | 10 pt | 13 pt | Semibold |
|
|
| Caption 1 | Regular | 10 pt | 13 pt | Medium |
|
|
| Caption 2 | Medium | 10 pt | 13 pt | Semibold |
|
|
|
|
## tvOS Text Styles
|
|
|
|
| Style | Weight | Size | Leading | Emphasized |
|
|
|-------|--------|------|---------|------------|
|
|
| Title 1 | Medium | 76 pt | 96 pt | Bold |
|
|
| Title 2 | Medium | 57 pt | 66 pt | Bold |
|
|
| Title 3 | Medium | 48 pt | 56 pt | Bold |
|
|
| Headline | Medium | 38 pt | 46 pt | Bold |
|
|
| Subtitle 1 | Regular | 38 pt | 46 pt | Medium |
|
|
| Callout | Medium | 31 pt | 38 pt | Bold |
|
|
| Body | Medium | 29 pt | 36 pt | Bold |
|
|
| Caption 1 | Medium | 25 pt | 32 pt | Bold |
|
|
| Caption 2 | Medium | 23 pt | 30 pt | Bold |
|
|
|
|
## Best Practices
|
|
|
|
- Avoid light font weights (Ultralight, Thin, Light) — prefer Regular, Medium, Semibold, Bold
|
|
- Minimize the number of typefaces — too many obscures hierarchy
|
|
- Use `bold()` in SwiftUI (not `fontWeight(.bold)`) so the system picks context-appropriate weight
|
|
- Use `Font.Design.default` for system font, `Font.Design.serif` for New York
|
|
- Don't embed system fonts — use the APIs
|
|
|
|
## Dynamic Type
|
|
|
|
- System-level feature in iOS, iPadOS, tvOS, visionOS, watchOS
|
|
- Text styles scale proportionately when people change text size
|
|
- Support Larger Accessibility Text Sizes (AX1-AX5 go up to 60pt body)
|
|
- Consider adjusting layout at large sizes (stack horizontally placed items vertically)
|
|
- Keep text truncation minimal — display as much useful text as possible
|
|
- Maintain consistent information hierarchy regardless of font size
|
|
- Use `isAccessibilityCategory` to detect when accessibility sizes are active
|
|
|
|
## Custom Fonts
|
|
|
|
- Always use `relativeTo:` with `.font(.custom())` to support Dynamic Type
|
|
- Use `@ScaledMetric` (iOS 18-) or `.font(.body.scaled(by:))` (iOS 26+) for custom sizing
|
|
- Implement accessibility features (Bold Text, Dynamic Type) for custom fonts
|
|
|
|
## visionOS Specifics
|
|
|
|
- Uses bolder body and title styles, plus Extra Large Title 1 and 2
|
|
- Prefer 2D text — 3D text is harder to read
|
|
- Use billboarding for text associated with spatial objects
|
|
- Maximize contrast between text and container background
|
|
|
|
## Tracking Values (SF Pro — Key Sizes)
|
|
|
|
| Size | Tracking (pt) |
|
|
|------|--------------|
|
|
| 11 pt | +0.06 |
|
|
| 12 pt | 0.0 |
|
|
| 13 pt | -0.08 |
|
|
| 17 pt (body) | -0.43 |
|
|
| 22 pt | -0.26 |
|
|
| 28 pt | +0.38 |
|
|
| 34 pt | +0.40 |
|
|
| 48 pt | +0.35 |
|
|
| 72 pt | +0.14 |
|
|
| 96 pt | 0.0 |
|