IOS Typography

iOS Typography — Type Scale, Custom Fonts & Readability

1. Open-Source Font Recommendations

All fonts listed are free for commercial use.

Sans-Serif Display (Headlines, Large Titles)

Sans-Serif Body (Body Text, UI)

Monospace (Code, Data, Tabular)

Serif (Editorial Apps Only)

Font sources: Google Fonts, Fontshare (Indian Type Foundry — high quality, free)

2. iOS Type Scale

Map custom fonts to iOS text styles for automatic Dynamic Type scaling:

Using Custom Fonts with Dynamic Type

// CORRECT — scales with Dynamic Type
.font(.custom("Satoshi-Bold", size: 28, relativeTo: .title))

// WRONG — fixed size, ignores Dynamic Type
.font(.custom("Satoshi-Bold", fixedSize: 28))

Always use relativeTo: to bind custom fonts to a text style. This ensures your font scales when the user changes their preferred text size.

3. Typography Rules

Hierarchy

• Use one display font (for titles/headers) and one body font (for everything else). Two fonts max.
• If using a custom display font, SF Pro (system font) works well as the body font — no registration needed.
• Create hierarchy through weight and color, not just size:

  Text("Title")
      .font(.custom("Satoshi-Bold", size: 20, relativeTo: .title3))
  Text("Subtitle")
      .font(.subheadline)
      .foregroundStyle(.secondary)
  

Line Length

• Constrain body text to roughly 65 characters per line for readability
• Use .frame(maxWidth: 600) on text-heavy content for iPad
• lineLimit(_:) for truncation, .lineSpacing() for vertical rhythm

Weight Spectrum

• Use at minimum 3 weights to create clear hierarchy: Bold/Semibold for titles, Regular for body, Regular + .secondary color for metadata
• Avoid using Light/Thin weights for body text — they're hard to read on small screens

Spacing

// Adjust line spacing for readability
Text(longParagraph)
    .font(.body)
    .lineSpacing(4)

// Letter spacing for uppercase labels
Text("SECTION")
    .font(.caption)
    .kerning(1.2)
    .foregroundStyle(.secondary)

4. Readability on Glass

Liquid Glass surfaces are translucent — text must remain readable against variable backgrounds.

• Increase font weight on glass surfaces. Where you'd normally use Regular, use Medium or Semibold.
• Use .foregroundStyle(.primary) — the system applies vibrancy to maintain contrast.
• Avoid .foregroundStyle(.tertiary) or .quaternary on glass — too faint against translucent backgrounds.
• Don't manually set opacity on text over glass — let the vibrancy system handle it.

// Text on glass surface
VStack {
    Text("Card Title")
        .font(.headline)           // Already semibold
    Text("Supporting text")
        .font(.subheadline)
        .foregroundStyle(.secondary) // System handles vibrancy
}
.padding()
.glassEffect(in: .rect(cornerRadius: 12))

5. Custom Font Registration

Step 1: Add Font Files

Add .ttf or .otf files to your Xcode project. Ensure they're included in the app target (check Target Membership).

Step 2: Register in Info.plist

<key>UIAppFonts</key>
<array>
    <string>Satoshi-Regular.otf</string>
    <string>Satoshi-Medium.otf</string>
    <string>Satoshi-Bold.otf</string>
</array>

Or in Xcode: Target → Info → "Fonts provided by application" → add each filename.

Step 3: Verify Font Name

The font name in code may differ from the filename. Print available fonts to find the exact name:

// Debug helper — remove before shipping
for family in UIFont.familyNames.sorted() {
    for name in UIFont.fontNames(forFamilyName: family) {
        print(name)
    }
}

Step 4: Create a Type Scale Extension

extension Font {
    static func display(_ style: Font.TextStyle = .title) -> Font {
        .custom("Satoshi-Bold", size: UIFont.preferredFont(
            forTextStyle: style.uiKit).pointSize, relativeTo: style)
    }

    static func bodyText(_ style: Font.TextStyle = .body) -> Font {
        .custom("PlusJakartaSans-Regular", size: UIFont.preferredFont(
            forTextStyle: style.uiKit).pointSize, relativeTo: style)
    }
}

// Usage
Text("Welcome").font(.display(.largeTitle))
Text("Content").font(.bodyText())

This centralizes your type scale and ensures every use respects Dynamic Type.