Typography Scaling Mobile

Typography scaling for mobile addresses how text sizes adapt across different screen sizes, device capabilities, and user preferences on iOS and Android. Design systems must define type scales that remain readable and proportional across the mobile device spectrum while supporting accessibility features like Dynamic Type.

What Is Typography Scaling for Mobile

Typography scaling encompasses how font sizes relate to each other (type scale), how sizes adapt to screen dimensions (responsive sizing), and how sizes adjust based on user preferences (accessibility scaling). Mobile design systems need coherent approaches to all three aspects.

Type scales define relationships between text sizes. A modular scale uses a mathematical ratio (like 1.2 or 1.25) to generate a sequence of sizes. Body text might be 16pt, with headlines at 19pt, 23pt, 28pt progressing up the scale. This systematic approach creates visual harmony.

Mobile devices present unique scaling challenges. Screen sizes range from small phones to large tablets. Viewing distances vary more than desktop. Users frequently adjust text size preferences for accessibility. Typography systems must accommodate this variability.

How Typography Scaling Works on Mobile

Type scale definitions establish size relationships. Design systems define named steps (caption, body, title, headline) with associated sizes. Components reference these named steps rather than arbitrary sizes, ensuring consistent typography.

Type Scale Example:

Scale Steps (1.2 ratio):
- Caption: 12pt
- Body Small: 14pt
- Body: 16pt (base)
- Title 3: 19pt
- Title 2: 23pt
- Title 1: 28pt
- Headline: 34pt

iOS Text Styles (Dynamic Type):
- .caption2: 11pt default, scales 11-23pt
- .caption1: 12pt default, scales 12-26pt
- .body: 17pt default, scales 14-53pt
- .title3: 20pt default, scales 17-60pt
- .title1: 28pt default, scales 25-76pt
- .largeTitle: 34pt default, scales 31-92pt

Android Text Appearance:
- TextAppearance.Material3.BodySmall: 12sp
- TextAppearance.Material3.BodyMedium: 14sp
- TextAppearance.Material3.BodyLarge: 16sp
- TextAppearance.Material3.TitleMedium: 16sp
- TextAppearance.Material3.TitleLarge: 22sp
- TextAppearance.Material3.HeadlineLarge: 32sp

Screen size adaptation may adjust typography for different device sizes. Tablets with more space might use larger body text. Small phones might use more compact typography. Design systems can define size adjustments per size class.

Accessibility scaling increases sizes based on user preferences. iOS Dynamic Type scales all system text styles. Android sp units scale with user font size settings. Design systems using these platform features support accessibility automatically.

Key Considerations

• Type scale ratios affect visual hierarchy clarity
• Platform text styles integrate with accessibility features
• Minimum readable sizes set lower bounds
• Line length affects readability across screen widths
• Touch target considerations may require size increases
• Testing requires checking multiple size preferences

Common Questions

How should design systems handle typography across phone and tablet sizes?

Baseline typography works for most phone sizes. The type scale designed for typical phone screen widths serves as the default.

Tablet adjustments may increase base sizes. With more viewing distance and larger screens, slightly larger body text can improve readability. Design systems might specify tablet-specific scale adjustments.

Line length management matters more than size changes. Wide tablet screens can create overly long lines that harm readability. Maximum line widths (60-80 characters for body text) prevent this, often mattering more than size changes.

Multi-column layouts on tablets allow maintaining optimal line lengths while using screen space effectively. Typography systems should consider layout context, not just size.

How do accessibility scaling systems work?

iOS Dynamic Type scales text based on user-selected content size. Seven default sizes plus five accessibility sizes provide the range. System text styles like .body automatically respect these settings.

Custom fonts can support Dynamic Type through UIFontMetrics on iOS. This API scales custom font sizes proportionally to system font size changes.

Android sp (scalable pixels) units scale with user font size preferences. Using sp for text ensures custom fonts also scale with system settings.

Design systems should specify that all text uses scalable units and test at maximum accessibility sizes. Layouts must accommodate significantly larger text without breaking.

What minimum sizes should mobile typography observe?

Body text minimums typically fall around 16pt (iOS) or 14-16sp (Android). Smaller sizes become difficult to read on mobile screens at typical viewing distances.

Caption and secondary text might go as small as 11-12pt but should be used sparingly. Very small text fails accessibility requirements for some users.

Touch target considerations may require larger text in interactive contexts. Tappable text links benefit from larger sizes even when surrounding text is smaller.

Testing with actual users, especially those with visual impairments, validates minimum size choices. What seems readable to designers may not serve all users.

Summary

Typography scaling for mobile requires coherent type scales, screen size adaptation, and accessibility scaling support. Design systems should define systematic size relationships, specify any tablet-specific adjustments, and ensure all text uses platform-appropriate scalable units. Testing at various screen sizes and accessibility settings validates that typography serves all users effectively.