Make text spacing adjustable with CSS

Text spacing in style attributes must be overridable by custom stylesheets

Users must be able to increase line, letter, word, and paragraph spacing with their own CSS. Inline styles must not prevent those changes. This affects long-form text, UI copy, and forms, especially for people with cognitive or low-vision needs.

Why It Matters

Extra spacing helps many readers follow lines, separate words, and avoid visual crowding. Blocking user styles can make text harder to track and understand.

People who use magnification or custom stylesheets depend on line-height and spacing adjustments. If spacing is locked with inline !important or rigid layouts, content can overlap, clip, or become unreadable.

WCAG 2.2 (1.4.12 Text Spacing) requires that content remains usable when users increase spacing to specific values. Preventing overrides risks failure.

Common Causes

• Inline style attributes that set line-height, letter-spacing, or word-spacing with !important.
• Fixed pixel values that don’t scale with user font size changes.
• Paragraph margins removed or forced with !important, blocking paragraph spacing adjustments.
• Fixed container heights or overflow clipping that cut off text when spacing increases.
• JavaScript that injects or updates inline styles for spacing properties.

How to Fix

• Remove !important from spacing properties in inline styles and author CSS.
• Avoid inline style attributes for text spacing; move spacing into CSS classes.
• Use relative units and scalable patterns:
• Line-height: use unitless values (e.g., 1.4–1.6 by default).
• Letter-spacing and word-spacing: use em units.
• Paragraph spacing: use margins in em, not fixed pixels.
• Make layouts flexible:
• Avoid fixed heights on text containers; let height grow with content.
• Prevent clipping by avoiding overflow: hidden on text blocks.
• Validate against WCAG 2.2 SC 1.4.12 target adjustments (content must remain readable and functional when users apply):
• Line height: at least 1.5 times the font size.
• Spacing after paragraphs: at least 2 times the font size.
• Letter spacing: at least 0.12em.
• Word spacing: at least 0.16em.
• Recommendation: Provide a global class or CSS custom properties (variables) for spacing so teams can tune consistently and users can override predictably.

How to Test

• Custom stylesheet check:
• Apply a user CSS (via extension, Reader mode override, or temporary <style> in DevTools):

    html { line-height: 1.5 !important; }
    p, li { margin-block-end: 2em !important; }
    * { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }
  - Pass if no text overlaps, truncates, or disappears; all controls remain usable.
- Inline style audit:
  - Search for style="line-height: … !important", style="letter-spacing: … !important", or style="word-spacing: … !important" and remove !important.
- Keyboard check:
  - Tab through links, buttons, and form fields after applying the user CSS. Focus rings and labels must remain visible and uncut.
- Screen reader check (NVDAJAWSVoiceOver):
  - With increased spacing applied, ensure all text is still present and announced in order. No content should be hidden due to clipping.
- Mobiletouch check:
  - Use Reader mode or a mobile browser extension that injects CSS. Zoom and reflow with increased spacing; confirm no cut-off or overlap.

Good Example

/* Author CSS (no inline spacing, no !important) */
.article { font: 1rem1.5 system-ui, sans-serif; }
.article p { margin-block: 0 1em; letter-spacing: normal; word-spacing: normal; }

<!-- HTML -->
<article class="article">
  <h2>Preparing for a Storm</h2>
  <p>Secure outdoor items, charge devices, and store clean water.</p>
  <p>Follow local guidance and check supplies before traveling.</p>
</article>

/* User stylesheet can override cleanly */
html { line-height: 1.5 !important; }
p { margin-block-end: 2em !important; }
* { letter-spacing: 0.12em !important; word-spacing: 0.16em !important; }

Bad Example

<!-- Inline styles lock spacing with !important -->
<p style="line-height:1.2 !important; letter-spacing:0 !important; word-spacing:0 !important;">

Important updates are listed below. Please read carefully.

</p>

<!-- Paragraph spacing is also forced, preventing user adjustments -->

<p style="margin-block-end:0 !important;">

Evacuation routes are posted in the lobby.

</p>

Quick Checklist

• No !important on line-height, letter-spacing, word-spacing in inline styles.
• Spacing uses relative units; line-height is unitless.
• Paragraph spacing uses margins that can scale (no forced zero margins).
• Containers expand with content; no clipping on increased spacing.
• Text remains readable at: 1.5 line height; 2× paragraph spacing; 0.12em letter spacing; 0.16em word spacing.
• Keyboard focus indicators stay visible with increased spacing.
• Screen readers still announce all content in order after spacing changes.