# Inline text spacing must be adjustable with custom stylesheets

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/axe/4.11/avoid-inline-spacing
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

Some users need to adjust text spacing to make content readable. People with low vision may increase letter or word spacing to reduce visual crowding. People with cognitive disabilities, dyslexia, or attention deficit disorders often struggle to track lines of text that are tightly spaced — increasing `line-height`, `letter-spacing`, or `word-spacing` can make reading significantly easier.

When text-spacing properties are set inline with `!important`, they gain the highest specificity in the CSS cascade. This means user stylesheets, browser extensions, and assistive technology tools cannot override those values. The text becomes locked into a fixed spacing that may be difficult or impossible for some users to read.

This rule relates to **WCAG 2.1 Success Criterion 1.4.12: Text Spacing** (Level AA), which requires that no loss of content or functionality occurs when users adjust:

- 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
- Word spacing to at least 0.16 times the font size

If inline `!important` declarations prevent these adjustments, the content fails this criterion.

## How to Fix It

The fix is straightforward: **do not use `!important` on inline `style` attributes for `line-height`, `letter-spacing`, or `word-spacing`**. You have a few options:

1. **Remove `!important`** from the inline style declaration. Without `!important`, users can override the value with a custom stylesheet.
2. **Move styles to an external or embedded stylesheet.** This is generally the best approach because it separates content from presentation and gives users more control through the cascade.
3. **If `!important` is truly necessary**, apply it in a stylesheet rather than inline. Inline `!important` styles are virtually impossible for users to override, while stylesheet-level `!important` can still be overridden by user `!important` rules.

Note that other inline style properties like `font-size` are not flagged by this rule — only the three text-spacing properties (`line-height`, `letter-spacing`, `word-spacing`) are checked.

## Examples

### Incorrect: Inline styles with `!important`

These examples fail because `!important` on inline text-spacing properties prevents user overrides.

```html
<!-- line-height with !important — cannot be overridden -->
<p style="line-height: 1.5 !important;">
  This text is locked to a specific line height.
</p>

<!-- letter-spacing with !important — cannot be overridden -->
<p style="letter-spacing: 2px !important;">
  This text has fixed letter spacing.
</p>

<!-- word-spacing with !important — cannot be overridden -->
<p style="word-spacing: 4px !important;">
  This text has fixed word spacing.
</p>

<!-- Mixed: word-spacing is fine, but letter-spacing has !important -->
<p style="word-spacing: 4px; letter-spacing: 2px !important; line-height: 1.8;">
  Even one !important on a spacing property causes a failure.
</p>
```

### Correct: Inline styles without `!important`

These examples pass because users can override the inline values with a custom stylesheet.

```html
<!-- line-height without !important — overridable -->
<p style="line-height: 1.5;">
  Users can adjust this line height with a custom stylesheet.
</p>

<!-- letter-spacing without !important — overridable -->
<p style="letter-spacing: 2px;">
  Users can adjust this letter spacing.
</p>

<!-- word-spacing without !important — overridable -->
<p style="word-spacing: 4px;">
  Users can adjust this word spacing.
</p>

<!-- Multiple spacing properties, all without !important -->
<p style="word-spacing: 4px; letter-spacing: 2px; line-height: 1.8;">
  All three spacing properties can be overridden by the user.
</p>

<!-- font-size with !important is fine — not a text-spacing property -->
<p style="font-size: 200%;">
  This does not trigger the rule.
</p>
```

### Best practice: Use an external stylesheet instead

```html
<!-- HTML -->
<p class="readable-text">
  Styles are defined in the stylesheet, giving users full control.
</p>
```

```css
/* CSS */
.readable-text {
  line-height: 1.8;
  letter-spacing: 0.05em;
  word-spacing: 0.1em;
}
```

By keeping text-spacing styles in a stylesheet, you make it easy for users to apply their own overrides while maintaining your default design.