Skip to main content
The FTC fined the leading overlay provider $1M for deceptive claims. Learn why it matters (opens in new tab)
Design Guides

Typography and readability for screen readers

October 22, 20256 min read

Typography decisions impact multiple accessibility dimensions: readability for low-vision users, cognitive load for users with dyslexia or reading disabilities, and the quality of screen reader output. Many typographic accessibility issues are surfaced by WCAG criteria in the Perceivable principle.

Text resize and WCAG 1.4.4

WCAG 1.4.4 requires that text can be resized up to 200% without loss of content or functionality. This means no overflow: hidden on containers at fixed heights, no absolute positioning that causes text to spill outside containers, and no pixel-based media queries that prevent responsive reflow. The test is simple: set your browser text size to 200% and verify nothing breaks.

Text spacing and WCAG 1.4.12

WCAG 1.4.12 requires that content and functionality remain available when the following CSS properties are overridden by the user: line-height to 1.5× the font size, letter-spacing to 0.12em, word-spacing to 0.16em, and spacing following paragraphs to 2× the font size. Users with dyslexia often use browser extensions or user stylesheets to set these values. Fixed-height elements, overflow:hidden containers, and absolutely positioned overlays frequently break under these conditions.

Line length and readability

WCAG 1.4.8 (Level AAA) recommends limiting text blocks to 80 characters per line. The practical guidance from cognitive accessibility research is 45–75 characters. Long lines create more eye-tracking errors and increase reading fatigue, particularly for users with low vision or attention difficulties. This is typically handled with max-width on prose containers.

How screen readers process text

Screen readers process the DOM, not the visual layout. CSS does not change screen reader output — a visually italic span with no semantic meaning reads no differently from normal text. To communicate emphasis, use <em> and <strong> (which screen readers may announce) or add supplementary aria-label text. Conversely, purely decorative text that should not be read aloud should be hidden with aria-hidden="true".

Note

Font choice matters for low-vision readability. System UI fonts (San Francisco, Segoe UI) and humanist sans-serifs (Inter, Atkinson Hyperlegible) generally perform better for readability at small sizes than geometric or condensed typefaces. Atkinson Hyperlegible was specifically designed for low vision readability.

Put it into practice

See exactly where your site stands against WCAG 2.2.

Free scan on any public URL. Full report in under two minutes.