Skip to main content
Perceivable WCAG 1.4.12

1.4.12 Text Spacing

No loss of content or functionality occurs when users override text spacing: line height to 1.5x, paragraph spacing to 2x, letter spacing to 0.12em, and word spacing to 0.16em.

Level AA Serious WCAG 2.1 (new) WCAG 2.2

What This Rule Means

WCAG 1.4.12 requires that no content or functionality is lost when a user applies the following text spacing overrides simultaneously: line height (line-height) at least 1.5 times the font size, paragraph spacing (margin-bottom on paragraphs) at least 2 times the font size, letter spacing (letter-spacing) at least 0.12 times the font size, and word spacing (word-spacing) at least 0.16 times the font size.

This criterion exists because many users with dyslexia, low vision, or cognitive disabilities need to increase text spacing for readability. They may use browser extensions, user style sheets, or custom CSS injected via bookmarklets to override the page's spacing. The page must not break when these adjustments are made — no clipped text, no overlapping elements, no hidden content.

Why It Matters

Research shows that increased text spacing significantly improves reading speed and comprehension for people with dyslexia. Tighter letter and word spacing causes letters and words to visually merge, making reading exhausting. Increased line height helps users track from line to line without losing their place. These are not cosmetic preferences — they are functional accommodations.

Users typically apply these overrides through browser extensions like "Text Spacing Editor" or through custom user style sheets. If the page layout collapses when spacing is increased, these users lose access to the content entirely.

Related axe-core Rules

There are no automated axe-core rules for 1.4.12. Testing requires applying specific CSS overrides and manually checking for content loss. The community has created bookmarklets specifically for this test.

How to Test

  1. Apply the following CSS overrides to the page using a bookmarklet, browser extension, or DevTools:
/* Text spacing test override — apply all simultaneously */
* {
  line-height: 1.5 !important;
  letter-spacing: 0.12em !important;
  word-spacing: 0.16em !important;
}

p {
  margin-bottom: 2em !important;
}
  1. Scan the entire page for content that is now clipped, truncated, overlapping, or hidden.
  2. Check that all interactive controls remain usable and visible.
  3. Verify that navigation items, buttons, and form labels are still fully readable.
  4. Pay special attention to fixed-height containers, badge/chip components, and header bars — these are the most likely to break.

How to Fix

Design containers to be flexible enough to accommodate text spacing changes:

/* Flexible container approach */
.card {
  /* Use min-height, never fixed height */
  min-height: 200px;
  /* height: 200px; <-- BREAKS with text spacing */

  /* Use padding, not fixed dimensions */
  padding: 1.5rem;

  /* Allow content to push boundaries */
  overflow: visible;
  /* overflow: hidden; <-- CLIPS content with spacing */
}

.button {
  /* Use padding for sizing, not fixed height */
  padding: 0.75em 1.5em;
  /* height: 40px; <-- BREAKS with text spacing */

  /* Allow text to wrap if needed */
  white-space: normal;
  /* white-space: nowrap; <-- CLIPS with letter-spacing */
}

.nav-item {
  /* Flexible padding accommodates spacing changes */
  padding: 0.5em 1em;
  /* Do not rely on exact pixel widths */
}

Avoid CSS properties that fight against text spacing overrides:

/* Properties to avoid or use carefully */

/* BAD: Fixed line-height in pixels */
.text { line-height: 18px; }
/* GOOD: Relative line-height */
.text { line-height: 1.5; }

/* BAD: Overflow hidden on text containers */
.container { overflow: hidden; }
/* GOOD: Visible or auto overflow */
.container { overflow: visible; }

/* BAD: Fixed-height inline elements */
.badge { height: 24px; line-height: 24px; }
/* GOOD: Padding-based sizing */
.badge { padding: 0.125em 0.5em; }

Test with the spacing bookmarklet during development, not just at the end:

/* Add this bookmarklet to your browser toolbar for quick testing */
/* javascript:(function(){var css='* { line-height: 1.5 !important; letter-spacing: 0.12em !important; word-spacing: 0.16em !important; } p { margin-bottom: 2em !important; }';var style=document.createElement('style');style.textContent=css;document.head.appendChild(style);})(); */

Common Mistakes

  • Fixed-height containers with overflow: hidden that clip text when line-height increases.
  • Badge or chip components with exact pixel heights that overflow when letter-spacing is applied.
  • Navigation items with fixed widths that truncate text labels when word-spacing is increased.
  • Line-height set in pixels rather than unitless values, preventing proper scaling.
  • Tooltip or popup text that overflows its container when spacing is applied.
  • CSS clamp() or max() on font sizes without testing the effect on spacing overrides.

Resources