Skip to content
UX Atlas
Plate A11Y·015 · AccessibilityGrid A4 · Rev. 2026-09-14

Text Spacing

Users must be able to increase spacing without content being clipped or lost.

AccessibilityCraft conventionIntermediate

Definition

WCAG 1.4.12 requires that no loss of content or functionality occurs when users set line height to 1.5 times the font size, paragraph spacing to 2 times, letter spacing to 0.12em and word spacing to 0.16em.

Craft convention. True because the industry converged on it. Breaking it costs familiarity, not correctness.

On this plate
  1. 1Definition
  2. 2What breaks
  3. 3The four values the criterion asks for
  4. 4Leaving room for the reader's spacing
  5. 5Commonly confused with
  6. 6Local chart
  7. 7Sources
  8. 8Continue from here

Reach for this when

  • Accessibility review.
  • Designing components with constrained height.

Common mistakes

  • Fixed heights on text containers.
  • Truncation without overflow handling.
  • Testing only at default spacing.

What breaks

  • Fixed-height containers, which clip the enlarged text.
  • Buttons sized exactly to their label.
  • Single-line truncation with no overflow handling.
  • Absolutely positioned text over an image.
  • Tab bars and navigation with tightly fitted labels.

The four values the criterion asks for

css
/* WCAG 1.4.12 Text Spacing, applied as a test */
* {
  line-height: 1.5 !important;              /* at least 1.5x the font size   */
  letter-spacing: 0.12em !important;        /* at least 0.12x                */
  word-spacing: 0.16em !important;          /* at least 0.16x                */
}
p {
  margin-block-end: 2em !important;         /* at least 2x the font size     */
}

/* Common failures this exposes:
   height on a button or chip, line-clamp with no overflow route,
   absolutely positioned text over an image, tightly fitted tab labels */

Apply these over the page and look for clipping, overlap or lost text. Nothing may be cut off or made unreadable, though the layout is allowed to change.

Leaving room for the reader's spacing

Do

  • Let containers grow with their content, so more spacing produces a taller box rather than clipped text.
  • Set line-height as a unitless number, which scales with the font size wherever it is inherited.
  • Give buttons and chips padding rather than a fixed height.
  • Run the test on the densest screens: tables, toolbars, navigation and data-heavy cards.

Do not

  • Do not prevent the reader's stylesheet from applying, which some resets and inline styles do.
  • Do not rely on text fitting exactly, such as a two-word label that wraps at 0.12em letter spacing.
  • Do not clip overflow on text containers without an accessible route to the full content.
  • Do not treat this as an edge case. Reading tools apply these values routinely.

Commonly confused with

Close neighbours that get substituted for each other. The difference is stated first, then the condition that picks one over the other.

vs.

Text Resize

Accessibility

Type scaled up to 200 percent of its authored size.

Key difference

Text resize changes the size of the type. Text spacing changes the gaps around it: line height, paragraph, letter and word spacing, with the size left alone. Two separate criteria, and a container can survive one and clip on the other.

Use Text Spacing when

  • A stylesheet or extension is overriding spacing for readability.
  • The failure is overlap or clipping from taller lines, not bigger text.
  • The fix is removing fixed heights, not changing font size.

Use Text Resize when

  • The reader has enlarged text or zoomed the page.
  • The question is whether anything is cut off as the type grows.

Learn about Text Resize

Local chart

A11Y·015 · Region V · Grid A4

This entry and the entries it is stated to connect with. Each line is labelled with what the connection means.

Text ResizeA11Y·014 · COMMONLY CONFUSED WITHAccessibility ChecklistCHK·002 · CHECK YOUR WORKLeadingTERM·059 · SHORT DEFINITIONReflow and ZoomA11Y·013 · RELATED CONCEPTLetter SpacingFND·035 · RELATED CONCEPTLine HeightFND·034 · RELATED CONCEPTReadabilityFND·036 · RELATED CONCEPT

Sources

Where a source establishes something narrower than the popular reading of it, the note says so.

  1. [1]

Continue from here

Each link says what the connection is, so you can tell a principle from an alternative from a thing people mix this up with.

Check your work

Review passes that test whether this was done properly.

Short definition

The one-paragraph version, for when that is all you need.

Related concept

Connected closely enough to change how you apply this.