Accessible Typography Scale

An accessible typography scale defines a system of type sizes, line heights, and spacing values that ensure content remains readable for users with visual impairments or cognitive disabilities. Design systems use typography scales to establish consistent, accessible text treatment across all components.

What Is an Accessible Typography Scale

A typography scale provides a predefined set of font sizes that relate to each other through a mathematical ratio (such as 1.25 or 1.333). An accessible typography scale applies additional constraints to ensure these sizes meet minimum readability requirements and support user customization.

WCAG does not mandate specific font sizes but requires that text can be resized up to 200% without loss of content or functionality. Level AAA adds requirements for line height (at least 1.5 times the font size), paragraph spacing (at least 2 times the font size), and letter spacing (at least 0.12 times the font size).

Accessible typography scales also consider the relationship between type size and reading comfort. Body text typically requires larger sizes for comfortable extended reading, while UI labels may work at smaller sizes for short text strings.

How Accessible Typography Scales Work

Typography scales begin with a base size, typically for body text. Common accessible base sizes range from 16px to 18px, accounting for modern viewing distances and device pixel densities. From this base, other sizes derive through consistent ratio multiplication.

Line height (leading) scales in relation to font size but does not follow the same ratio. Larger text typically needs proportionally less line height than smaller text. Accessible scales define line height values that maintain readability at each size step, generally ranging from 1.2 for large headings to 1.5 or higher for body text.

Letter spacing (tracking) and word spacing also factor into accessible typography. Tight letter spacing that works for large display text may impair readability at body sizes. Accessible scales specify appropriate spacing for each size context.

The scale manifests as design tokens in the design system: semantic tokens like font-size-body, font-size-heading-1, and corresponding line-height values. Components reference these tokens rather than hardcoded values, ensuring consistent typography throughout the system.

Responsive considerations add complexity. Typography may scale between breakpoints while maintaining accessible proportions. Design systems often define multiple scale variants for different viewport sizes, each validated for accessibility.

Key Considerations

• Base body text should be at least 16px for comfortable reading on screens
• Line height of 1.5 times font size improves readability for body text
• Support text resizing up to 200% without horizontal scrolling or content loss
• Use relative units (rem, em) rather than fixed pixels to respect user font size preferences
• Ensure sufficient contrast between different text weights and sizes in the hierarchy
• Test typography at various zoom levels and user font size settings
• Consider users with dyslexia who benefit from increased letter and word spacing

Common Questions

What is the minimum accessible font size?

WCAG does not specify a minimum pixel size, recognizing that appropriate sizes depend on context, viewing distance, and device characteristics. However, industry practice generally considers 16px the minimum for body text on desktop screens and 14px the absolute minimum for any readable text.

More important than a specific pixel value is supporting user customization. Users who need larger text should be able to increase browser font size or zoom level, with content adapting appropriately. Design systems should use relative units and fluid layouts that accommodate these adjustments.

How do accessible typography scales handle headings?

Headings in an accessible scale need sufficient size differentiation to convey hierarchy while remaining within practical limits. A ratio like 1.25 produces a progression such as 16px, 20px, 25px, 31px for four heading levels plus body text.

Each heading level should be visually distinct from adjacent levels. If two heading levels appear too similar, users may not perceive the hierarchy correctly. Testing with actual content helps verify that the scale produces meaningful visual differentiation.

Should typography scales include size tokens below body text?

Small text sizes (below body text) present accessibility concerns. Caption, label, and legal text often appear at reduced sizes, potentially dropping below comfortable reading thresholds. Accessible scales may include smaller sizes but should document their appropriate use cases.

Small text should be reserved for secondary information that users do not need to read in detail. Any small text that users must read to complete tasks (form labels, error messages) should use body text size or larger. Design systems should provide clear guidance on when small sizes are acceptable.

Summary

Accessible typography scales define related type sizes, line heights, and spacing values that ensure readability across visual abilities and user preferences. Through appropriate base sizes, sufficient line height, relative units, and clear documentation, design systems create typography systems that support all users.