Letter Spacing Accessibility

Letter spacing accessibility addresses the horizontal space between characters and its impact on readability for users with visual or cognitive impairments. Proper letter spacing helps users distinguish individual characters and improves reading comprehension, particularly for those with dyslexia.

What Is Letter Spacing Accessibility

Letter spacing, also called tracking, controls the uniform space between all characters in a text block. In CSS, the letter-spacing property adjusts this value from the font’s default. Positive values increase space; negative values tighten text.

WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) at Level AA requires that content remain functional when users set letter spacing to at least 0.12 times the font size (0.12em). This ensures users who need increased spacing can apply it without breaking layouts.

Default letter spacing typically works for most users, but overly tight tracking can impair readability. Characters that appear too close together become difficult to distinguish, particularly for users with low vision or dyslexia. Display text and logos sometimes use reduced tracking for aesthetic purposes, but body text should avoid tight spacing.

How Letter Spacing Accessibility Works

Letter spacing affects character recognition and reading speed. Research shows that moderate increases in letter spacing can improve reading performance for some users with dyslexia, though excessive spacing can harm readability by disrupting word recognition.

Design systems define letter spacing as part of typography tokens, often paired with font size contexts. Body text typically uses default or slightly increased spacing. Display text might use reduced spacing at large sizes where the effect remains readable. Caption or small text may benefit from slight spacing increases.

Component implementations apply these token values consistently. Buttons, labels, headings, and body text each receive appropriate letter spacing through their typography definitions. This prevents designers from applying arbitrary tracking values that might impair accessibility.

Supporting user overrides requires layouts that accommodate increased character spacing. Fixed-width containers might overflow when letter spacing increases. Design systems should test that components remain functional with 0.12em letter spacing applied globally.

Font selection interacts with letter spacing. Some fonts have generous default spacing; others are tightly set. Design systems should evaluate how their chosen fonts perform at various spacing values and adjust defaults accordingly.

Key Considerations

• Avoid negative letter spacing in body text and UI elements
• Display text may use reduced spacing only at sizes where characters remain distinct
• Support user overrides up to 0.12em without layout breakage
• Test typography with increased spacing to verify readability
• Consider that some fonts require spacing adjustments from their defaults
• Provide guidance on acceptable letter spacing for custom typography use
• All-caps text often benefits from increased letter spacing for legibility

Common Questions

When is reduced letter spacing acceptable?

Reduced letter spacing may be acceptable for large display text, logotypes, and decorative text where aesthetic considerations apply and the content is not essential for comprehension. Headlines at 48px or larger can tolerate tighter tracking because individual characters remain large enough to distinguish.

Body text, UI labels, form fields, and any text users must read to complete tasks should never use reduced letter spacing. These contexts prioritize readability over aesthetic effect.

How does letter spacing interact with word spacing?

WCAG 1.4.12 also addresses word spacing, requiring support for user overrides up to 0.16 times the font size. Letter spacing and word spacing work together to affect text density and readability.

Increased letter spacing without corresponding word spacing adjustments can make word boundaries less distinct. Design systems should consider both properties when defining typography tokens and ensure that increased letter spacing does not impair word recognition.

Should design systems force specific letter spacing?

Design systems should provide appropriate default letter spacing through typography tokens but must not prevent users from overriding these values. Using !important on letter-spacing or other text styling properties can block user stylesheets and assistive technology adjustments.

The WCAG requirement focuses on allowing user overrides rather than mandating specific defaults. Design systems that provide sensible defaults and accommodate customization satisfy both accessibility requirements and design consistency goals.

Summary

Letter spacing accessibility ensures horizontal character spacing supports readability and accommodates user preferences. Design systems implement this through typography tokens with appropriate defaults, avoiding tight tracking in readable text, and ensuring layouts adapt when users apply increased spacing.