WCAG 1.4.12 — Text Spacing — Content Breaks When Spacing Overrides Applied

Who Is Affected

People with dyslexia and other reading disabilities who need increased text spacing to improve readability, users with low vision who benefit from increased letter spacing, and anyone using browser extensions or assistive technology that modifies text presentation.

What This Means

Some users need to increase text spacing beyond default browser settings to read content effectively. When they do this through browser extensions, user stylesheets, or assistive technology, your site's content must remain readable and functional.

WCAG requires that content remains usable when users override these spacing properties:

• Line height (line spacing) increased to at least 1.5 times the font size
• Paragraph spacing increased to at least 2 times the font size
• Letter spacing increased to at least 0.12 times the font size
• Word spacing increased to at least 0.16 times the font size

Common failures include text getting cut off by fixed-height containers, overlapping elements, or buttons becoming unusable when text expands.

Fix: CMS / Theme

This typically requires updating your theme's CSS to handle increased text spacing gracefully:

1. Remove fixed heights on text containers: Replace height: 50px with min-height: 50px on elements containing text.

2. Use flexible spacing units: Instead of pixel-based margins and padding, use relative units like em or rem.

3. Test with increased spacing: Apply these CSS overrides temporarily to see what breaks:

   * {
     line-height: 1.5 !important;
     letter-spacing: 0.12em !important;
     word-spacing: 0.16em !important;
   }
   p {
     margin-bottom: 2em !important;
   }
   

4. Fix broken layouts:

   • Replace overflow: hidden with overflow: visible on text containers
   • Use flexbox or grid instead of absolute positioning
   • Ensure buttons expand to accommodate larger text

Joomla: Check your template's CSS files in /templates/your-template/css/. Focus on components like navigation menus, article layouts, and module styling.

WordPress: Review your theme's style.css and any custom CSS added through Appearance → Customize → Additional CSS.

Fix: Content Editor

While this is primarily a CSS/theme issue, content editors should avoid:

1. Using tables for layout — Tables with fixed column widths break when text expands
2. Embedding text in images — Text spacing adjustments don't affect images
3. Creating narrow columns — Very narrow text columns become unreadable with increased spacing

If you notice text getting cut off or overlapping after publishing, report this to your web developer as a CSS fix is needed.

Standard Reference

WCAG 2.1 Success Criterion 1.4.12 — Text Spacing, Level AA

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property: Line height to at least 1.5 times the font size, spacing following paragraphs to at least 2 times the font size, letter spacing to at least 0.12 times the font size, and word spacing to at least 0.16 times the font size.

• W3C Understanding SC 1.4.12
• WCAG Technique C36 — Allow for text spacing overrides
• WCAG Technique C35 — Allow for text spacing without horizontal scrolling
• WCAG Failure F104 — Text clipped when spacing properties overridden