Text spacing readability is one of the most overlooked parts of accessible design because it tests something you cannot see in a static mockup: what happens when a real user changes the spacing. People with low vision and dyslexia routinely increase line height, letter spacing, and word spacing through browser settings, extensions, or their own user stylesheets. WCAG Success Criterion 1.4.12 Text Spacing (Level AA) says your page must survive those changes without losing content.
The good news for designers and developers: 1.4.12 does not dictate your default typography. It is a resilience test. You can ship whatever line height your brand calls for, as long as the layout does not clip, overlap, or hide text when a user pushes spacing to the specified minimums. This guide covers the exact values, the failure pattern that causes most violations (fixed-height containers), how line length fits in, and the CSS patterns that make overrides just work.
What WCAG 1.4.12 actually requires
The criterion lists four spacing values. If a user applies all of them at once, no loss of content or functionality is allowed. You are not required to set these as your defaults; you must only ensure the page tolerates them.
- Line height (line spacing) of at least 1.5 times the font size
- Spacing following paragraphs of at least 2 times the font size
- Letter spacing (tracking) of at least 0.12 times the font size
- Word spacing of at least 0.16 times the font size
A clean way to think about it: text expands, so containers must be able to grow or scroll, never crop. The test is to apply these values via a stylesheet (a well-known bookmarklet does exactly this) and confirm every block of text is still fully visible and every control still works. 1.4.12 sits alongside related criteria like 1.4.13 Content on Hover or Focus (Level AA), which governs tooltips and popovers that also tend to break under spacing changes. You can see how it maps to the full standard on our WCAG reference.
The number-one failure: fixed-height clipping
Most 1.4.12 failures trace back to one habit: putting a hard height on an element that contains text. When line height or letter spacing increases, the text needs more vertical room, but a fixed height refuses to give it. The result is a clipped second line, an em dash sliced in half, or a descender cut off at the bottom edge.
Watch for these usual suspects: buttons and pill-shaped tags with a set height, single-line truncated headings, alert and toast banners, card footers, navigation items, and anything styled with a height value plus overflow: hidden. The fix is almost always the same pattern.
Replace height with min-height and padding
- Swap height: 40px for min-height: 40px so the box can grow
- Use vertical padding (padding-block) instead of fixed height to create breathing room
- Avoid overflow: hidden on text containers; if you must clip, scope it tightly and test with overrides applied
- For truncation, prefer line-clamp techniques that still expand vertically when needed, and never rely on a fixed pixel height to enforce a single line
A button defined as min-height with padding-block: 0.5rem will absorb a 1.5 line height without clipping. The same button at height: 40px will eat the bottom of its label. This single change resolves a large share of real-world violations.
Line length and readability go hand in hand
Spacing overrides expose another readability problem: line length, often called measure. Very long lines force the eye to travel far and make it easy to lose your place when you return to the left margin. Very short lines fragment sentences. Neither is a 1.4.12 requirement (line width is addressed at Level AAA under 1.4.8 Visual Presentation), but it is central to actual reading comfort, so handle it in the same pass.
- Constrain body text to roughly 45 to 75 characters per line; the ch unit makes this direct, e.g. max-width: 70ch
- Set the limit on the text container, not the whole page, so wide layouts keep readable columns
- Avoid justified text, which creates uneven rivers of whitespace that hurt readers with dyslexia
- Let line length adapt: a max-width in ch combined with a fluid width handles narrow and wide viewports gracefully
Because the ch unit is relative to the font, a ch-based max-width also scales correctly when users increase letter spacing or zoom, keeping your measure sensible under the exact conditions 1.4.12 tests.
Build for user overrides instead of fighting them
The deeper goal behind 1.4.12 is to stop developers from locking text into rigid boxes. A few defensive habits make overrides a non-event.
- Size text and spacing in relative units (rem, em) so user font-size changes cascade predictably
- Never use !important on line-height, letter-spacing, or word-spacing; it can defeat user stylesheets and is a direct failure risk
- Let containers be content-driven: prefer min-height, flexible grids, and intrinsic sizing over fixed dimensions
- Test components in isolation, not just full pages, since reusable buttons and badges are where clipping hides
- Re-check anything absolutely positioned or overlaid, including dropdowns and tooltips, where extra height can cause overlap
These same patterns help across the standard, which matters under the European Accessibility Act, where WCAG 2.2 Level A and AA is the baseline via EN 301 549. If you are scoping compliance work, see our overview of the European Accessibility Act.
How to verify it
Verification combines a quick manual check with broader coverage. Manually, apply the four 1.4.12 values to a page (a text-spacing bookmarklet injects them in one click) and scan every block of copy and every control for clipping, overlap, or hidden content. Do this on your most component-dense templates first.
For breadth, automated tooling can flag fixed-height containers and other structural risks across many pages faster than hand-testing each one. You can run a free check with AccessScan to surface common issues, then confirm the tricky spacing cases by hand. Pair that with a structured review using our accessibility checklist so text spacing gets tested alongside contrast, focus, and the rest of your AA obligations. Automated and manual testing are complements here, not substitutes: clipping is page-specific and the human eye remains the final judge.