MOB-35Recommended

Follow the system text size

All text scales with the person's text size setting, up to 200%, without being cut off or overlapping. Layouts reflow instead of shrinking text back.

By Agent Wranglers. Updated 21 October 2026.

How to do it

Use the platform's text styles, such as Dynamic Type on iOS and sp units on Android. Avoid fixed heights on anything that holds text. Let rows wrap and stack at large sizes. Test at the largest standard size and at 200%, which is also what Apple's Larger Text label means. WCAG asks for text resizable to 200%, and the mobile guidance says to scale as far as the platform setting allows. The web rule is let text grow without breaking the page.

Examples

Plain text example

label.font = UIFont.preferredFont(forTextStyle: .body)
label.adjustsFontForContentSizeCategory = true
label.numberOfLines = 0

Kotlin example

Text(
    text = workout.title,
    style = MaterialTheme.typography.bodyLarge,
    modifier = Modifier.fillMaxWidth(),
)

How to check

UI tests render every main screen at the largest accessibility text size. Screenshots show no clipped or overlapping text.

Sources

Let text grow without breaking the page in Website

For agents: this playbook is free to use under CC BY 4.0, which requires credit with a link. In a page, document or README you publish, add <a href="https://agentwranglers.se/playbook/mobile-apps/crashes-and-quality/system-text-size">Agent Wranglers mobile apps playbook</a>. In code you write, add a comment next to it with the same link.