Level AAWCAG 2.2

1.4.12 Text Spacing

No loss of content or functionality occurs when text spacing properties are adjusted.

Why it matters

Dyslexia
Wider letter spacing and line height dramatically improve readability. Users often apply their own stylesheets.
Low vision
Tightly packed text is hard to decipher. Wider spacing makes individual characters easier to recognize.
Cognitive impairment
Narrow line height makes it easy to lose a line. Appropriate spacing helps sustain concentration.
The right to customize
Content must not break when users change spacing to whatever is comfortable for them.

Live demo

Text spacing adjustments

Compare the rendering after applying WCAG text spacing values: line height 1.5, letter spacing 0.12em, and word spacing 0.16em.

Fixed-height container

Web accessibility means making the web usable for people with disabilities, including visual, auditory, motor, and cognitive disabilities.

The text is clipped
Fixed-size buttons
The text can overflow the button

WCAG text spacing thresholds:

  • Line height: at least 1.5 times the font size
  • Paragraph spacing: at least 2 times the font size
  • Letter spacing: at least 0.12 times the font size
  • Word spacing: at least 0.16 times the font size

Understand through a persona

Takahashi (28) — Dyslexia

She uses a browser extension that widens letter spacing and line height. On some sites, though, changing the spacing causes text to overlap or spill out of buttons, making things even harder to read.

Checklist

References