# Letter spacing set with !important in style attributes must be at least 0.12em.

> Canonical HTML version: https://rocketvalidator.com/accessibility-validation/accesslint/0.16/distinguishable/letter-spacing
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

When `letter-spacing` is set in a `style` attribute with `!important` and the value is less than `0.12em`, users cannot override it to a comfortable spacing. This blocks people who need wider letter spacing to read text — including users with dyslexia, low vision, or certain cognitive disabilities.

Many users rely on browser extensions, custom stylesheets, or assistive technologies to increase spacing between letters. These tools typically inject author-origin CSS to override existing styles. But a `style` attribute with `!important` sits at the top of the CSS cascade for author-origin styles. No selector, no matter how specific, can beat it. The user's preferred spacing is silently ignored.

## Why this matters

WCAG Success Criterion 1.4.12 (Text Spacing), a Level AA requirement, says users must be able to adjust text spacing properties without losing content or functionality. Specifically, letter spacing must be adjustable to at least 0.12 times the font size. When an inline `style` attribute locks `letter-spacing` below that threshold with `!important`, the page actively prevents this adjustment.

Some assistive technologies can set user-origin or user-agent-origin styles, which can override author-origin `!important` declarations in the cascade. But many common tools (browser extensions, bookmarklets) can only set author-origin styles. For those users, an `!important` declaration in a `style` attribute is unbeatable.

## How to fix it

There are two straightforward options:

1. Remove `!important` from the `letter-spacing` declaration in the `style` attribute. Without `!important`, user-injected styles with higher specificity or later origin can override it.
2. If `!important` must stay, increase the `letter-spacing` value to at least `0.12em` (0.12 times the font size). At that point, the spacing already meets the minimum threshold users would set.

Moving the style to an external or internal stylesheet is also a fix, since stylesheet-based declarations can be overridden by other author-origin styles with equal or higher specificity.

## Examples

### Incorrect: letter spacing below 0.12em with !important

```html
<p style="letter-spacing: 0.05em !important;">
  This text has locked letter spacing that users cannot override.
</p>
```

The `letter-spacing` value of `0.05em` is below the `0.12em` threshold, and `!important` in a `style` attribute prevents user overrides.

### Correct: letter spacing meets the minimum threshold

```html
<p style="letter-spacing: 0.12em !important;">
  This text meets the minimum letter spacing requirement.
</p>
```

The value is at least `0.12em`, so even though `!important` is present, the spacing already satisfies what users would need to set.

### Correct: remove !important

```html
<p style="letter-spacing: 0.05em;">
  Users can now override this letter spacing with their own styles.
</p>
```

Without `!important`, assistive technologies and browser extensions can inject styles that override this value.

### Correct: move the style to a stylesheet

```html
<style>
  .narrow-spacing {
    letter-spacing: 0.05em;
  }
</style>
<p class="narrow-spacing">
  Stylesheet-based styles can be overridden by user-injected stylesheets.
</p>
```

Styles in a stylesheet, even with `!important`, can be overridden by other author-origin styles with higher specificity or later source order. This gives assistive technologies a way to adjust the spacing.