WCAG 1.4.12 — Text Spacing

What this requires

If the user changes text-spacing properties to certain minimum values, no content or functionality should be lost. The specific thresholds:

Line height: at least 1.5× the font size
Spacing between paragraphs: at least 2× the font size
Letter spacing: at least 0.12× the font size
Word spacing: at least 0.16× the font size

A common test stylesheet (the "Steve Faulkner bookmarklet") applies these values; the page must remain functional under that stylesheet.

How AI coding tools fail this

When asked to "tighten the typography" or "make this card more compact", AI tools reach for fixed heights and overflow: hidden to keep content inside a designed box. Under expanded text spacing, the content grows; the box doesn't; text is clipped.

The second pattern: relative units everywhere except for the containers. Body text in rem, container heights in px. The text respects the user's stylesheet; the container clips it.

The third: marketing components with white-space: nowrap on single-line CTAs and labels. Increased letter spacing or word spacing makes the label wider than the container; truncation hides part of the call to action.

Failing examples

A pill button with a fixed height and overflow: hidden:

<button className="h-8 overflow-hidden whitespace-nowrap rounded-full px-3">
  Read documentation
</button>

A card with a fixed height:

<article className="h-48 overflow-hidden rounded-md border p-4">
  <h3>Card title</h3>
  <p>{cardDescription}</p>
</article>

Passing examples

Let the content drive the size:

<button className="rounded-full px-3 py-1.5">
  Read documentation
</button>

<article className="rounded-md border p-4">
  <h3>Card title</h3>
  <p>{cardDescription}</p>
</article>

Edge cases

Bookmarklet test. The standard test is to load a stylesheet that applies the four minimum values to the page and confirm nothing breaks. Run the bookmarklet, scroll the page, click each CTA.
!important on these properties in user stylesheets is what the criterion expects to work. CSS in the page may set its own values; the user's overrides must take effect.
Truncation patterns (text-ellipsis, line-clamp-2) need flexible containers. The truncation can stay; the container has to grow when there's more text.
Languages with no concept of word spacing (CJK) are exempt from the word-spacing requirement.
1.4.12 vs 1.4.8: 1.4.12 is AA and tests against fixed minimum values. 1.4.8 is AAA and requires a user mechanism to choose any value.

How Jeikin handles this

The scanner flags components with overflow: hidden paired with fixed heights — the most common shape of 1.4.12 failure. The guided review applies the test stylesheet to each page and captures screenshots, flagging visible regressions. The dashboard tracks both the automated leading indicators and the visual evidence per page.

References

W3C — Understanding 1.4.12 Text Spacing (opens in new tab)