How to fix avoid inline spacing on Headless / Custom (I build in code)

Steps for Headless / Custom (I build in code)

1. Search your component files and templates for `style=` props/attributes containing `lineHeight`, `letterSpacing`, `wordSpacing`, or spacing-related `margin`/`padding`.
2. Move those values into a CSS/SCSS class, a CSS custom property, or a design-token in your stylesheet (or Tailwind utility class if using a utility framework).
3. In React/Vue/Svelte etc., replace `style={{ lineHeight: '1.6' }}` with `className="product-body"` and define `.product-body { line-height: 1.6; }` in your stylesheet.
4. For CSS-in-JS (styled-components, Emotion), ensure spacing is applied via the component's static styles, not dynamically injected `style` tags that behave like inline overrides.
5. Run the axe-core library in your test suite (`@axe-core/react` or similar) to catch regressions automatically in CI.
6. Manually test by bookmarking the WCAG 1.4.12 text-spacing test bookmarklet and verifying no content is clipped or overlaps after applying it.

What is avoid inline spacing?

When spacing properties like `line-height`, `letter-spacing`, `word-spacing`, or `margin-top`/`padding-top` are written directly onto an HTML element using a `style="..."` attribute, they become "locked in" — they cannot be overridden by a user's custom browser stylesheet or accessibility tool. WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) requires that users can adjust these four specific spacing properties without losing content or functionality. Inline styles break that guarantee because they have the highest CSS specificity, overriding even `!important` rules in many situations. The fix is to move those spacing values into an external or internal stylesheet (a CSS class), where they can be adjusted by assistive tools and user stylesheets.

People with dyslexia, low vision, or cognitive disabilities often rely on browser extensions or operating-system settings that increase line height, letter spacing, or word spacing to make text readable. When your store hard-codes these values as inline styles, those overrides are silently blocked — text can become unreadable or overlap other content, directly causing a visitor to abandon your store. This is a WCAG 2.1 Level AA failure, meaning it exposes you to legal risk under regulations like the ADA (US), EN 301 549 (EU), and the UK Equality Act. It also affects the growing number of accessibility-overlay tools that customers use. Fixing it broadens your potential customer base, reduces legal exposure, and signals to search engines and auditors that your site meets modern quality standards.

See the complete Avoid inline spacing guide for every platform and the full background.