Text Spacing

Why it matters

For a dyslexic reader, spacing is what stops the letters crowding each other. Widening it is how they read at a normal pace instead of decoding word by word. Low-vision readers widen it for a different reason, because the gaps are what let the eye find the start of the next line. Neither group is asking you to design spacious typography. They are asking you not to break when they bring their own settings. A page that survives this survives most other user stylesheets too, including somebody swapping in a wider font, so the work pays off well past this one rule.

Who this rule protects

Low-vision readers who need bigger gaps between lines, words and letters to read at all. Dyslexic readers who widen spacing to read faster. Anyone using a reading-aid extension, a bookmarklet or a custom stylesheet, which is how these changes usually get made, because no mainstream browser offers all four settings for an ordinary page.

How to check it yourself

1. 1Apply the standard override with a bookmarklet or browser developer tools. Line height 1.5 times the font size, paragraph spacing 2 times, letter spacing 0.12 times, word spacing 0.16 times.
2. 2Change nothing else. The rule sets those four properties and no others, so a tool that also swaps the font is testing something the rule never asked for.
3. 3Scan the page for clipped labels, lines that overlap each other, and button text that escapes outside its own button.
4. 4Compare text that was already truncated against text that truncates only after the override. The first is a design choice. The second is a failure, unless the full text is reachable another way.
5. 5Check inline style attributes for these four properties pinned below the required values with !important. That blocks the override rather than breaking under it.
6. 6Stop at the stated values. A user may go further and the rule does not follow them, so a page that breaks at line height 3 is not failing.

Failures we see most often

• Fixed-height cards clip their own last line of text the moment spacing increases beyond the default.
• Buttons built to an exact pixel height shear off part of an enlarged label rather than growing to fit it.
• Headers set to overflow hidden swallow letters whole once wider spacing pushes text past the original boundary.
• Text that is absolutely positioned lands on top of the paragraph underneath it once both of them grow.
• A style attribute pins letter spacing to zero with !important, so the reading extension trying to widen it cannot win, because an extension injecting author-origin styles has nothing left to outrank it with.
• Column headers truncate under the override with no way to see the full text anywhere.

Who this one is for

Read from this rule's own note above, so the grouping and the note cannot disagree.

• Low visionpeople who can see the screen but not easily
• Cognitive and learningpeople for whom the difficulty is understanding, remembering, or staying with it

How this one is tested

We list 3 ACT rules against 1.4.12. Each one defines exactly what a checker looks at, which is how automated tools decide what to flag. Each one also checks a slice, so passing every rule here is not the same as meeting the criterion, and a rule can be proposed rather than approved or need a person to finish it. The note beside each says which.

• Important letter spacing in style attributes is wide enoughA tool can check this
• Important line height in style attributes is wide enoughA tool can check this
• Important word spacing in style attributes is wide enoughA tool can check this

How to fix it

• Avoid fixed heights on any container that holds text, and let the box grow along with its content instead.
• Reserve overflow hidden for decoration only, and never apply it to a container holding text a user needs to read.
• Size text containers in em units, so the box is measured in units of its own type and grows when the type does.
• Where a column genuinely cannot grow, truncate deliberately and reveal the full text on focus or activation. Or link to a page that shows it whole.
• Never put these four properties in a style attribute with !important. Put them in a stylesheet, where a later stylesheet or a more specific selector can still win, which is what an injected reading extension has to rely on.

Passes vs. fails