WCAG 1.4.12: Text Spacing

Why text spacing matters

Tightly packed text is a genuine barrier. People with dyslexia often find that letters and words visually crowd together and swap places; adding space between characters and lines settles the text and makes it far easier to read. People with low vision lose their place on a densely set page and rely on extra line and paragraph spacing to track from one line to the next. For these readers, the ability to open up the text is not a preference — it is what makes reading possible at all.

Browser extensions and reading tools let people apply exactly these adjustments across every site they visit. WCAG 1.4.12 makes sure that when they do, your content does not fall apart. The failure is almost always silent: a button label gets clipped, a card cuts off its last line, a navigation item hides half its text — and the user has no idea information is missing.

The good news is that a layout built with flexible, content-sized containers passes 1.4.12 without any special effort. The rule mostly exposes rigid designs that assume text will always be exactly the size and spacing the designer chose.

The four metrics

To pass, your content must survive a user setting all four of these values at once, while changing nothing else. Each value is expressed relative to the font size, so it scales with whatever text is on the page.

You do not have to set these values

The biggest misconception about 1.4.12 is that it forces every site to use line-height: 1.5 and the other values. It does not. You are free to design your typography however you like. The criterion is a resilience test: it checks that if a reader overrides these four properties, your layout adapts instead of clipping or hiding text.

In practice that shifts the work away from typography and onto your container CSS. The single most reliable way to pass is to let boxes that contain text grow with their content — use min-height rather than a fixed height, and avoid clipping with overflow: hidden on anything holding real words. Do that, and Text Spacing tends to take care of itself.

Code examples

The exact styles a user applies

This is the stylesheet the test bookmarklet injects — the four required values expressed relative to the font size. Your page must remain fully readable and operable with these applied.

/* What a text-spacing reader tool applies to your page */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;   /* spacing after paragraphs */
}

Fragile: a fixed-height box that clips

This button looks fine at your chosen spacing, but the fixed height and hidden overflow mean taller text is simply cut off. This is the classic 1.4.12 failure.

/* ✗ Fails Text Spacing */
.button {
  height: 40px;            /* cannot grow when line height increases */
  overflow: hidden;        /* extra text is clipped, not shown */
  white-space: nowrap;     /* wider letter/word spacing overflows */
}

.card {
  height: 220px;           /* last line disappears below the fold */
  overflow: hidden;
}

Resilient: containers that grow with their text

Swap fixed heights for min-height, let text wrap, and remove clipping. The box now expands when spacing increases, so no content is lost.

/* ✓ Passes Text Spacing */
.button {
  min-height: 40px;        /* grows to fit taller text */
  padding: 0.5rem 1rem;    /* space defined in relative units */
  display: inline-flex;
  align-items: center;
  white-space: normal;     /* allow wrapping instead of overflow */
}

.card {
  min-height: 220px;       /* a floor, not a ceiling */
  /* no overflow: hidden on the text container */
}

Do not block the user with !important

A reader tool overrides your spacing with !important. If you hard-lock line height the same way, you can defeat their adjustment entirely — set spacing normally so it can be overridden.

/* ✗ Fights the user's stylesheet */
body { line-height: 1.2 !important; }

/* ✓ Overridable — the reader tool can win */
body { line-height: 1.5; }

Common mistakes

• ✗Fixed-height containers with overflow: hidden — buttons, badges, chips, and cards that clip the taller text (the single most common failure).
• ✗Single-line headings or titles truncated with text-overflow: ellipsis inside a box that cannot grow, so wider letter spacing hides the end of the text.
• ✗Hard-locking line-height, letter-spacing, or word-spacing with !important, which prevents the user's reading tool from applying its own values.
• ✗Vertical space set in fixed px (for example a 40px tall nav bar) rather than allowing the bar to expand when its text grows.
• ✗Text overlapping adjacent elements when line height increases because rows are absolutely positioned at fixed offsets.
• ✗Assuming 1.4.12 means you must set line-height: 1.5 everywhere — it does not; it means your layout must survive the user setting it.
• ✗Content that scrolls out of a fixed-height modal or panel and cannot be reached once spacing pushes it beyond the box.
• ✗Testing only the happy path and missing dense components — data tables, tab labels, breadcrumb trails, and tooltips are frequent offenders.

How to test for 1.4.12

1. 1

   Apply all four values at once

   Use the text spacing bookmarklet or a browser extension to set line height 1.5, paragraph spacing 2×, letter spacing 0.12, and word spacing 0.16 together. Testing them one at a time misses interactions — the criterion requires all four applied simultaneously.

2. 2

   Scan for clipped or cut-off text

   Walk the whole page looking for any text that is now truncated, cut off at the bottom of a box, hidden behind another element, or replaced with an ellipsis that was not there before. Every such spot is a failure.

3. 3

   Check the dense components

   Pay special attention to buttons, badges, navigation, tabs, cards, tables, breadcrumbs, and tooltips — small fixed-size components are where clipping hides. Open menus and modals too, since their content often sits in fixed-height boxes.

4. 4

   Confirm nothing lost its function

   Make sure every control is still fully visible and operable. A button whose label is clipped, or a link pushed out of a scrollable area, is a loss of functionality even if the page still looks mostly intact.

5. 5

   Re-test at mobile and zoom

   Resize to a narrow viewport and combine with 200% zoom. Spacing overrides plus a small screen expose the most fragile layouts — this is exactly the situation real low-vision users are in.

Text Spacing is a manual check — automated tools cannot see whether overridden text is clipped or overlapping. Pair the bookmarklet walkthrough with the URL Accessibility Auditor for the automated checks, and work through the full WCAG 2.2 checklist.

Related success criteria

Browse every criterion in the WCAG Success Criteria hub or scan a page for issues with the Color Contrast Checker.

Frequently asked questions