Perceivable · Level AA · 1.4.12
Text Spacing
When someone overrides line height, paragraph spacing, letter spacing, or word spacing to make text easier to read — up to specific minimum values — nothing on the page should break: no clipped text, no overlapping content, no lost functionality.
- Low vision
- Cognitive
How to recognize it
Apply a text-spacing bookmarklet or browser extension that sets line-height to at least 1.5× the font size, spacing after paragraphs to at least 2× the font size, letter-spacing to at least 0.12× the font size, and word-spacing to at least 0.16× the font size, then look for breakage: text that gets clipped by a fixed-height container, lines that start overlapping each other, a button whose label overflows its fixed-width box and becomes unreadable or unclickable. People with low vision who need wider spacing to track lines of text, and people with dyslexia who read faster with more breathing room between letters and words, are the ones directly relying on being able to make this change — a layout that can't tolerate it effectively takes that adjustment away from them, even though it exists as a setting.
How to fix it
Avoid fixed heights on text containers — let boxes grow with their content instead of clipping or scrolling it. Don't rely on `overflow: hidden` or a fixed line count to keep a layout looking neat, since that's exactly what breaks under wider spacing. Test key components — buttons, cards, navigation — with the spacing values above applied and fix any spot where content gets cut off, overlaps, or becomes unusable.
Example
Avoid
.card-text {
height: 60px;
overflow: hidden;
}
/* clips text once line-height increases */Prefer
.card-text {
min-height: 60px;
height: auto;
}
/* grows with content instead of clipping it */