1.4.12 Text Spacing

Who it helps

People with dyslexia and low vision often read faster with wider spacing, which they apply with a browser extension or user stylesheet. If your layout clips or overlaps the text, they lose content.

How to meet it

• Let containers grow with their text: use min-height or padding instead of a fixed height on cards, buttons and banners.
• Avoid overflow: hidden on boxes that hold text, unless the hidden text can still be reached.
• Do not set line-height, letter-spacing or word-spacing with !important in style attributes, since user styles cannot override them.
• Test with a text spacing bookmarklet or stylesheet that applies all four values at once, then check every component.
• You do not have to use these spacing values by default; you only need the page to keep working when users apply them.
• If a language or script does not use one of these properties in written text, you only need to support the properties it does use.

Examples

<p style="line-height: 1.1 !important; letter-spacing: 0 !important;">
  Free returns within 30 days.
</p>

.card {
  height: 120px;
  overflow: hidden;
}

<p class="promo">Free returns within 30 days.</p>
<style>
  .promo { line-height: 1.4; }
</style>

.card {
  min-height: 120px;
  padding: 1rem;
}

Common mistakes

• Giving buttons, tabs or badges a fixed height, so the label spills out or is cut off.
• Using overflow: hidden or text-overflow: ellipsis on headings that then lose words.
• Positioning text absolutely over an image so it overlaps other text when lines get taller.
• Testing only one spacing value at a time instead of all four together.

Related criteria

• 1.4.8 Visual Presentation
• 1.4.10 Reflow
• 1.4.4 Resize Text

Official W3C explanation of 1.4.12