# Avoid Inline Spacing

> Pages must not lock text spacing, so users can override line, letter, and word spacing with their own styles.

Source: https://knowledge.evinced.com/web/web-validations/avoid-inline-spacing

Pages must not lock text spacing, so users can override line, letter, and word spacing with their own styles.

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.

```html
<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.

```html
<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

-   [C35: Allowing for text spacing without wrapping](https://www.w3.org/WAI/WCAG22/Techniques/css/C35)
-   [C36: Allowing for text spacing override](https://www.w3.org/WAI/WCAG22/Techniques/css/C36)

### Advisory techniques

-   [C8: Using CSS letter-spacing to control spacing within a word](https://www.w3.org/WAI/WCAG22/Techniques/css/C8)
-   [C21: Specifying line spacing in CSS](https://www.w3.org/WAI/WCAG22/Techniques/css/C21)
-   [C28: Specifying the size of text containers using em units](https://www.w3.org/WAI/WCAG22/Techniques/css/C28)

### Failure techniques

-   [F104: Failure of Success Criterion 1.4.12 due to clipped or overlapped content when text spacing is adjusted](https://www.w3.org/WAI/WCAG22/Techniques/failures/F104)

## ACT Rules

-   [Important letter spacing in style attributes is wide enough](https://www.w3.org/WAI/standards-guidelines/act/rules/24afc2/)
-   [Important line height in style attributes is wide enough](https://www.w3.org/WAI/standards-guidelines/act/rules/78fd32/)
-   [Important word spacing in style attributes is wide enough](https://www.w3.org/WAI/standards-guidelines/act/rules/9e45ec/)

## Try It Yourself

### Using a text spacing extension

1.  Install a browser extension or user style sheet that increases text spacing.
2.  Set line height to 1.5, letter spacing to 0.12em, and word spacing to 0.16em.
3.  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

1.  Inspect a text element in your browser's dev tools.
2.  Look for inline styles that set `line-height`, `letter-spacing`, or `word-spacing`.
3.  Check whether those properties use the `!important` flag.

**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](https://www.w3.org/TR/WCAG22/#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](https://www.etsi.org/standards/etsi-301-549) | Same as the WCAG text. |

## Personas impacted by this issue

-   [Low Vision](https://knowledge.evinced.com/a11y-essentials/personas#low-vision)
-   [Cognitive](https://knowledge.evinced.com/a11y-essentials/personas#cognitive)
-   [Dyslexia](https://knowledge.evinced.com/a11y-essentials/personas#dyslexia)
-   [Attention and Focus](https://knowledge.evinced.com/a11y-essentials/personas#attention-and-focus)

## Learn More

-   [Understanding SC 1.4.12 Text Spacing](https://www.w3.org/WAI/WCAG22/Understanding/text-spacing.html)
