avoid-inline-spacing
Web validation
Some people need to increase the spacing between lines, letters, or words to read comfortably. This is especially important for people with dyslexia, attention deficits, low vision, or cognitive disabilities.
Browsers and extensions let these users override text spacing with custom styles. If a page locks spacing with !important or fixed values, it can ignore those preferences and reduce readability. The properties to watch are line-height, letter-spacing, and word-spacing, as well as the spacing after paragraphs.
WCAG 1.4.12 requires that content keeps working when users set text spacing to at least:
- Line height of 1.5 times the font size.
- Spacing after paragraphs of 2 times the font size.
- Letter spacing of 0.12 times the font size.
- Word spacing of 0.16 times the font size.
Note: An !important value that already meets or exceeds these minimums doesn't block users from reaching them. Still, the safest approach is to avoid !important on text spacing altogether, and to use relative units (such as em, rem, or percentages) for text size and spacing.
Pass Patterns
Spacing left adjustable
The paragraph sets a starting line height without !important, so user overrides still apply.
<p style="font-size: 16px; line-height: 1.5;">
This sample paragraph lets user styles override the text spacing.
</p>Fail Patterns
Spacing locked with !important
The !important flag on letter-spacing and line-height stops users from increasing the spacing.
<p style="line-height: 1.2 !important; letter-spacing: 0 !important;">
This paragraph restricts user control over text spacing and may reduce readability.
</p>WCAG techniques
Sufficient techniques
Advisory techniques
- C8: Using CSS letter-spacing to control spacing within a word
- C21: Specifying line spacing in CSS
- C28: Specifying the size of text containers using em units
Failure techniques
ACT Rules
- Important letter spacing in style attributes is wide enough
- Important line height in style attributes is wide enough
- Important word spacing in style attributes is wide enough
Try It Yourself
Using a text spacing extension
- Install a browser extension or user style sheet that increases text spacing.
- Set line height to 1.5, letter spacing to 0.12em, and word spacing to 0.16em.
- Load the page and watch the text.
Expected results: The spacing increases and all text stays readable, with no clipping or overlap.
Actual results: The page's !important styles block the change, so the spacing does not increase.
Inspecting the browser dev-tools
- Inspect a text element in your browser's dev tools.
- Look for inline styles that set
line-height,letter-spacing, orword-spacing. - Check whether those properties use the
!importantflag.
Expected results: The spacing properties can be overridden, with no !important locking them.
Actual results: The spacing properties use !important, so user overrides cannot apply.
FAQ
How does this issue relate to 1.4.12 Text Spacing?
SC 1.4.12 requires that users can set line, paragraph, letter, and word spacing to specified minimums with no loss of content. Locking spacing with !important stops users from reaching those minimums, so the content fails.
Why is this issue marked as Serious?
People who rely on extra spacing to read may be unable to apply it, which can make content hard or impossible to read. The barrier affects core reading across the page, so it is rated serious.
Standards and Regulations
| Standard | Success Criterion | Reference |
|---|---|---|
| WCAG 2.2 | 1.4.12 Text Spacing (AA) | No loss of content or functionality occurs when a user sets line height, paragraph spacing, letter spacing, and word spacing to specified minimum values. |
| EN 301 549 | 9.1.4.12 Text Spacing | Same as the WCAG text. |