Zoom, reflow & spacing
Inline Text Spacing Is Locked with !important
Text spacing is forced in the page code, so people can't widen gaps between lines, letters or words to make reading easier.
avoid-inline-spacingWCAG 2.1Introduced in WCAG 2.1.Level AAAA — the Australian baseline (WCAG 2.2 AA) most laws and policies ask for.
- Status
- SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
- Owner
- DesignDevTest
- Audit
- Automated+ManualA scanner finds it; a person confirms the fix.
Why it matters
Many people read better with more space between lines, letters and words. They use a browser extension or their own style sheet to add it.
When a style attribute sets line-height, letter-spacing or word-spacing with !important, their settings can't win. The text stays cramped, and reading becomes slow and tiring.
Who it affects
| Who | What they experience | Impact |
|---|---|---|
| Low-vision users (magnification) | They can't spread out the text to make it easier to track and read. | High impact |
| Cognitive and neurodivergent users | People with dyslexia can't add the spacing that stops letters and lines blurring together. | High impact |
Business & product impact
| Area | Why | Impact |
|---|---|---|
| Legal | It relates to WCAG 1.4.12 Text Spacing at Level AA, the usual legal benchmark. Australia's Disability Discrimination Act complaints and EN 301 549 both point to it. | Moderate impact |
| Conversion | People who can't read your terms or product details comfortably may give up. The effect is real but hard to measure. | Low impact |
| SEO | Search engines don't care about this — don't sell it as an SEO win. | Low impact |
| Brand trust | Readers who rely on spacing tools notice when a site fights them. | Moderate impact |
| Cost to fix | Usually a quick fix: delete `!important` or move the style into your style sheet. | High impact |
Fixing it in code
Line spacing on a paragraph
Don't
<p style="line-height: 1.2 !important;">Delivery takes 3 to 5 days.</p>A screen reader says: “No difference — a screen reader reads both the same way.”
Do
<p class="body-text">Delivery takes 3 to 5 days.</p>
<!-- In your CSS: .body-text { line-height: 1.5; } -->A screen reader says: “No difference — a screen reader reads both the same way.”
Without !important in the inline style, the reader's own spacing settings can take over.
Letter spacing on a heading
Don't
<h2 style="letter-spacing: 0 !important;">Our story</h2>A screen reader says: “Heading level 2, Our story”
Do
<h2 style="letter-spacing: 0;">Our story</h2>A screen reader says: “Heading level 2, Our story”
Dropping !important lets a user's style sheet change the spacing.
Designer's handoff note
Design boxes, buttons and cards that grow with their text. Don't fix their height.
Check your layouts with wider spacing: line height 1.5 times the font size, and extra space between paragraphs, letters and words.
Quick test
Tool
Text Spacing bookmarklet (opens in a new tab) (free) in any browser
Checklist
- Pass
- The gaps between lines, letters and words widen, and no text is cut off or overlapping.
- Fail
- Some text stays cramped, or text gets cut off or overlaps other content.
Check these at the same time
- Text colour is too close to its background colour
color-contrast
What a green scan still misses
A scanner only finds !important in inline styles. It can't see style sheets that block spacing, or text that gets cut off when spacing grows — check that by eye.
Reference
- Rule ID
avoid-inline-spacing- Raised by
- axe-core: “Inline text spacing must be adjustable with custom stylesheets”
- WCAG
- 1.4.12 Text Spacing (opens in a new tab) · Level AA · since WCAG 2.1
- Other standards
- EN 301 549 9.1.4.12
- Last reviewed
- 14 October 2026