Letter Spacing for Accessibility — The WCAG 0.12em Rule
- WCAG 1.4.12 requires letter-spacing minimum 0.12em — layout must not break when users apply it
- Letter-spacing below 0 (negative) fails readability for dyslexic users
- The fix is usually letting text flow naturally and avoiding fixed-width containers
Table of Contents
Letter-spacing (CSS letter-spacing) is the gap between characters. WCAG 1.4.12 requires your layout to survive when users apply 0.12em letter-spacing override — a common assistive setting for dyslexic and low-vision readers. The rule is not "always set 0.12em" but "do not let your layout break when users do." Here is the full test, the research behind it, and the common fixes.
The WCAG 1.4.12 letter-spacing rule
WCAG 1.4.12 says: when users apply letter-spacing: 0.12em to your text, no content should be clipped, overlapped, or made unreadable. It is a layout resilience test, not a design mandate.
0.12em on 16px text = 1.92px of extra space between characters. On a 10-character word, that is ~19px of extra horizontal space the word now occupies. If your button, nav item, or card has a fixed width that fits the word exactly, applying 0.12em breaks it.
Why the 0.12em rule exists
Research on dyslexia reading shows consistent benefit from increased character spacing. Readers with dyslexia read 20-40% faster with letter-spacing increased by 5-15% over baseline. Low-vision readers also benefit because tight character spacing can blur adjacent letters together.
The specific 0.12em value was chosen because it is the upper end of readability benefit without making normal readers uncomfortable. It is not a universal improvement — for neurotypical readers, 0-0.05em tends to read fastest. But the override option must not break your layout.
Sell Custom Apparel — We Handle Printing & Free ShippingHow to test your layout at 0.12em
Apply this CSS temporarily via browser dev tools:
* {
letter-spacing: 0.12em !important;
}
Now scroll through every page. Look for:
- Buttons where text overflows the button's edges
- Navigation items that wrap to a second line unexpectedly
- Card titles that get clipped at the edge
- Horizontal scrollbars appearing on containers that did not have them
- Icons next to text getting pushed off-screen
Any of these = layout failure. Fix the element, not the rule.
Common fixes for letter-spacing layout breaks
Buttons with fixed width. Use min-width instead of width. Add padding that accommodates text growth: padding: 8px 24px; min-width: 120px; rather than width: 120px;.
Nav items in a row that wrap. Use CSS Grid or Flexbox with flex-wrap: wrap intentionally, and size containers based on content rather than fixed dimensions.
Card titles clipping. Avoid white-space: nowrap unless absolutely necessary. Let titles wrap to two lines.
Icon + text buttons. Ensure the container can grow horizontally, or use flexbox with min-width: 0 on the text span so it truncates rather than pushing the icon.
Design rules for letter-spacing in 2026
| Element | Recommended letter-spacing | Reason |
|---|---|---|
| Body text | 0 (default) | Fastest for neurotypical readers |
| All-caps headings | 0.05em to 0.1em | All-caps needs extra space to read well |
| Small text (< 14px) | 0.025em | Tight text gets hard to read small |
| Button labels (all-caps) | 0.08em | Standard material design spec |
| Display headlines (large) | -0.02em | Large text looks loose; slight negative tightens |
Never use letter-spacing on decorative script fonts — they are designed with specific spacing baked into the glyph shapes.
Test Letter-Spacing Compliance in Seconds
Paste your CSS. See if 0.12em letter-spacing breaks your layout. Get an auto-fix.
Open Free Spacing CheckerFrequently Asked Questions
Does letter-spacing affect SEO?
Not directly, but heavily negative letter-spacing (-0.05em or more) can make text hard for OCR and assistive tech to parse. Google has called out unreadable text in page experience signals — so extreme values hurt indirectly.
Can I use letter-spacing: normal instead of 0?
They behave identically in modern browsers. Both equal the font's natural character spacing. Use 0 when you want to explicitly override an inherited letter-spacing; use normal when resetting to font default.
What letter-spacing do dyslexia fonts like OpenDyslexic use?
OpenDyslexic has spacing baked into the font itself — ~15% wider than default. When combined with CSS letter-spacing overrides, the total can go too wide. Most dyslexia fonts already comply with accessibility spacing at their default.
Is letter-spacing different from tracking?
In typography, tracking = letter-spacing applied uniformly across a range of text. Kerning = spacing between specific letter pairs (handled by the font, not CSS). CSS letter-spacing is tracking.
