Space between letters and words: can your page survive a reader’s settings?

What the rule says

Success criterion 1.4.12, Text Spacing, is part of WCAG 2.2 at level AA. It says no content or function may be lost when a reader sets all four of these, and changes no other style:

• Line height of at least 1.5 times the font size.
• Spacing after paragraphs of at least 2 times the font size.
• Letter spacing of at least 0.12 times the font size.
• Word spacing of at least 0.16 times the font size.

The W3C’s explanation is direct about what this is not. The criterion does not dictate that authors must set their own text to these values, and it does not require you to build a control for them. The requirement is only that readers can apply them. The values are a baseline, and the W3C encourages authors to allow more.

It also covers language: scripts that do not use one of these properties need only meet the ones that apply. The W3C’s examples are Japanese, which does not use paragraph spacing or spaces between words.

Who changes these settings, and why

The W3C names two groups. People with low vision may need more space between lines, words and letters. People with dyslexia may increase the spacing to read faster. The W3C’s point is that readers override the author’s spacing to improve their reading experience, so your page has to hold up.

What the research says, and how far it goes

The best-known study is Zorzi and colleagues, “Extra-large letter spacing improves reading in dyslexia” (PNAS). They tested wider letter spacing on a large, unselected group of Italian and French dyslexic children. According to the abstract, text reading improved at once, with no training. The authors attribute this to crowding, where neighbouring letters interfere with recognising a letter, and which affects dyslexic readers unusually strongly.

Limits worth stating: the participants were dyslexic children, so the result says little about the average adult shopper. We read only the abstract, not the full paper, so we do not quote its numbers, and we have not checked whether others replicated it. What we can say is that the standard’s authors expect some readers to benefit, and the study is consistent with that.

What goes wrong on a real page

The W3C lists two failures: clipped text (cut off vertically or horizontally) and overlapping text. Both happen when a box has a fixed height, or when a label, button or badge was sized to the text at its default spacing. In our reading, a store is full of such boxes: announcement bars, button labels, tabs, product badges, variant pickers and menu items.

What a store owner can do this week

1. Open your store in a desktop browser. In the developer tools, add this to the page’s styles: * { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } and p { margin-bottom: 2em !important; }. This is our own quick approximation of the four values, not a W3C tool, and it is a test, not a fix.
2. Look at the home page, a collection page, a product page, the cart and checkout. Anything cut off or overlapping is a failure.
3. For each failure, look for a fixed height and replace it with a minimum height, so the box can grow with its text.
4. You do not need to adopt these values as your site’s default. The rule does not ask for it.
5. Repeat after each theme update or new section you add.