Use readable font sizes on mobile
Text must be large enough to read without zooming on mobile devices. Using relative units (rem/em) allows browser font size preferences to be respected.
- Body text should be at least 16px (1rem) on mobile — smaller sizes force users to zoom
- Avoid `font-size` values below 12px; iOS Safari ignores values below 12px and auto-inflates them
- Use `rem` or `em` units instead of `px` so text scales with the user's browser font size preference
- Never set `font-size: 100%` on `<html>` using an override that blocks user scaling — respect the browser default (16px)
- WCAG 2.1 SC 1.4.4 (Resize Text, Level AA): text must be resizable up to 200% without loss of content or functionality
Rule Details
Font sizes on mobile must be large enough to read without zooming, and must be expressed in relative units so they respect user browser preferences.
Code Example
/* ✅ Good: rem units respect browser font size preferences */
body {
font-size: 1rem; /* 16px at default browser settings */
line-height: 1.5;
}
h1 { font-size: 2rem; } /* 32px */
h2 { font-size: 1.5rem; } /* 24px */
p { font-size: 1rem; } /* 16px */
small { font-size: 0.875rem; } /* 14px */
/* ✅ Good: input font-size ≥ 16px prevents iOS zoom-on-focus */
input, select, textarea {
font-size: 1rem;
}
/* ❌ Bad: px units block user font size preferences */
body {
font-size: 14px; /* Ignores browser font-size setting */
}
/* ❌ Bad: 10px base reset makes rem arithmetic work but breaks accessibility */
html {
font-size: 10px; /* User setting of 20px is now treated as 10px */
}Why It Matters
- Low Vision Users: Browser font size is an accessibility tool for users who cannot use screen magnifiers or ZoomText.
- Aging Users: Font size needs increase with age — respecting browser settings is a low-effort, high-impact accommodation.
- Readability: 16px is the typographic minimum for comfortable sustained reading; smaller body text increases fatigue.
- iOS Compatibility: Sub-12px text triggers Safari's auto-inflation, causing unexpected layout shifts.
Recommended Font Size Scale
| Element | Minimum | Recommended |
|---|---|---|
| Body text | 1rem (16px) | 1rem–1.125rem |
| Small text / captions | 0.75rem (12px) | 0.875rem (14px) |
| Navigation labels | 0.875rem (14px) | 1rem |
| Headings (h1) | 1.5rem (24px) | 2rem+ |
| Input text | 1rem (16px) | 1rem — prevents iOS zoom on focus |
iOS Zoom-on-Focus
iOS Safari automatically zooms in when a form input is focused if its font-size is below 16px. This creates a jarring UX. Set all inputs to font-size: 1rem (16px) to prevent this behavior.
Verification
- Inspect the rendered UI at the breakpoints and interaction states affected by the rule.
- Confirm the computed styles match the intended fix in DevTools.
- Test at least one mobile and one desktop viewport before shipping.
- If the rule affects motion, contrast, or layout stability, verify those user-facing outcomes directly.
Use with AI
Copy these prompts to use with your AI assistant, or install the MCP server to use directly from Claude, Cursor, or Windsurf.
Check
Verify implementation
Find all CSS `font-size` declarations. Flag: (1) body text or paragraph text set below 16px (or 1rem); (2) any font-size below 12px; (3) font-sizes set in `px` on `<html>` or `<body>` that override the browser default; (4) font-sizes that do not scale proportionally when the browser zoom is set to 200% (test in Chrome DevTools by setting font-size in browser settings or using zoom). Check that text remains readable and layout does not break at 200% zoom.
Fix
Auto-fix issues
(1) Convert pixel font sizes to `rem` units: divide the pixel value by 16 (the browser default) — e.g., `14px` becomes `0.875rem`. (2) Set body text to at least `1rem` (16px equivalent) on mobile. (3) Replace `html { font-size: 10px }` (a common reset trick) with `html { font-size: 62.5% }` or avoid font-size resets entirely — instead use `rem` values calculated from the actual 16px base. (4) If small text is intentional (captions, footnotes), ensure it is at least `0.75rem` (12px) and use `font-size: 0.75rem` so it scales with user preferences.
Explain
Learn more
WCAG 2.1 SC 1.4.4 (Resize Text) requires that text can be resized up to 200% without loss of content or functionality, except for captions and images of text. Using `px` units for font sizes makes text immune to browser font size settings (though not to browser zoom). Using `rem` or `em` units allows text to scale with the root font size, which the user can adjust in browser settings — this is the preferred approach. iOS Safari also has a built-in heuristic that inflates text smaller than 12px when the page is displayed in mobile view, which can cause layout inconsistencies.
Review
Code review
Review stylesheets, component styles, and responsive states related to Use readable font sizes on mobile. Flag exact selectors, declarations, or breakpoints that violate the rule in the rendered UI.