Typography System Guide for iOS and Android

Android Material Typography Styles

Font Scaling Demo

Implementation Guidelines for Android

Here are the best practices to properly implement typography in Android applications:

• Always define text sizes in scalable pixels (sp) to respect user font size preferences — never use dp or px for text
• Also use sp for line heights — if you define lineHeight in dp, it will not scale with the font, causing text to overlap at larger sizes on Android 14+
• The minimum recommended size for body text is 16sp for readability (Material Design 3 minimum is 14sp)
• For dense lists or information, you can use 14sp with a slightly heavier weight
• Use dynamic layouts with wrap_content and ConstraintLayout to adapt to different text sizes
• Android 14+: Test font scale from 0.85x up to 2.0x — the maximum increased from 130% to 200% in Android 14. The system applies non-linear scaling, so large Display text grows more slowly than Body text
• Avoid setting fixed heights on containers that hold text — use wrap_content or minHeight instead

<!-- XML: use sp for both textSize AND lineHeight -->
<TextView
   android:layout_width="match_parent"
   android:layout_height="wrap_content"
   android:textSize="16sp"
   android:lineHeight="24sp"
   android:textColor="@color/textPrimary"
   android:text="@string/sample_text" />

<!-- Compose: MaterialTheme styles handle sp scaling automatically -->
Text(
   text = "Sample Text",
   style = MaterialTheme.typography.bodyLarge,
   modifier = Modifier.fillMaxWidth()
)

<!-- Compose: Never hardcode sp values directly — use the type scale -->
<!-- MaterialTheme.typography.bodyLarge = 16sp / 24sp line height -->

WCAG 2.2 Success Criterion 1.4.3 — Contrast (Minimum)

WCAG 2.2 Success Criterion 1.4.4 — Resize Text

WCAG 2.2 Success Criterion 1.4.10 — Reflow

WCAG 2.2 Success Criterion 1.4.12 — Text Spacing

WCAG 2.2 Success Criterion 2.5.8 — Target Size (Minimum)

Assistive Technology vs. Accessibility Features

Implementation Requirements for WCAG 1.4.4 Compliance

// iOS - UIKit
label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true

// iOS - SwiftUI
Text("Sample Text")
    .font(.body)
    .dynamicTypeSize(.large ... .accessibility5)

<!-- Android XML -->
<TextView
    android:textSize="16sp"
    android:layout_width="wrap_content"
    android:layout_height="wrap_content" />

// Android Compose
Text(
    text = "Sample Text",
    style = MaterialTheme.typography.bodyLarge
)

// iOS - Auto Layout
stackView.axis = .vertical
stackView.spacing = 8
label.numberOfLines = 0

// SwiftUI
VStack(spacing: 8) {
    Text("Title")
        .lineLimit(nil)
}

<!-- Android ConstraintLayout -->
<androidx.constraintlayout.widget.ConstraintLayout>
    <TextView
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        app:layout_constraintWidth_percent="0.8" />
</androidx.constraintlayout.widget.ConstraintLayout>

// iOS - Notification handling
NotificationCenter.default.addObserver(
    self,
    selector: #selector(contentSizeCategoryDidChange),
    name: UIContentSizeCategory.didChangeNotification,
    object: nil
)

// Android - Configuration changes
override fun onConfigurationChanged(newConfig: Configuration) {
    super.onConfigurationChanged(newConfig)
    // Refresh UI to reflect new font scale
    recreateViews()
}

Understanding Non-Linear Text Scaling

Both iOS and Android use non-linear scaling curves, meaning different text styles scale at different rates to maintain readability.

Testing for WCAG 1.4.4 Compliance

Testing Checklist

Best Practices