Use readable font sizes on mobile
Approximately 1 in 3 adults over 65 increases their browser's default font size. Low-vision users who cannot use screen magnifiers rely on browser font size settings as their primary accessibility tool. If font sizes are set in px only, browser font size preferences are ignored entirely. Text smaller than 16px on mobile forces all users to zoom in, breaking the page layout and triggering horizontal scroll. iOS Safari's auto-inflation of sub-12px text causes unintended layout shifts.
Quick Reference
- Body text should be at least 16px (1rem) on mobile — smaller sizes force users to zoom
- Avoid
font-sizevalues below 12px; iOS Safari ignores values below 12px and auto-inflates them - Use
remoremunits instead ofpxso 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
Check
Find all CSS font-size declarations. Flag: (1) body text or paragraph text set below 16px (or 1rem); (2) an…
