Typography and Accessibility: A Complete Guide
A soup-to-nuts manual covering minimum sizes, fluid type scales, assistive tech considerations, and governance practices for enterprise design systems.
Maya Ortiz
Principal Product Designer, 0design
Support CSAT
+0.6 after type refresh
Task success
94% completion on mobile forms
Minimums that actually work
WCAG recommends 16px body text, but we routinely ship 18px for high-density enterprise apps because data tables shrink line height. For base typography, treat 18/28 as the new default.
Map every text style to usage: inputs, helper text, metadata, badges. People rely on predictable relationships between them.
- •Aim for 1.4–1.6 line height on paragraphs for readability.
- •Use `ch` units to cap line length for responsive layouts.
Variable fonts as an accessibility tool
Variable fonts let you adapt weight and width on the fly. Users who enable “Increase Contrast” in OS settings can receive heavier weights automatically.
Use CSS `@supports (font-variation-settings: normal)` to progressively enhance. Provide static fallbacks for legacy browsers.
Fluid scale recipe
- Base: `clamp(1rem, 1rem + 1vw, 1.35rem)` for paragraphs.
- Display: `clamp(2.5rem, 1rem + 6vw, 4.5rem)` for hero copy.
- Monospace: keep letter spacing ≥ 0.08em for readability.
Testing with assistive tech
Screen readers rely on heading hierarchy. Ensure typographic tokens map 1:1 with semantic tags.
Zoom to 400% and test reflow—it is the fastest way to spot brittle layouts.
Key Takeaways
Bump your body copy to 18px and never go below 16px anywhere.
Variable fonts unlock personalization without loading multiple files.
Typography governance belongs in your design system documentation.
FAQs
Do I need different fonts for dark mode?+
No, but increase tracking slightly and lighten pure white (#FFFFFF) to around #F5F5F5 to avoid halation on dark backgrounds.
How do I justify larger type to PMs worried about fold height?+
Show funnel analytics: readability improvements reduce multi-step form abandonment. Share before/after heat maps to demonstrate increased comprehension.