Line Height Accessibility

Line height accessibility ensures vertical spacing between lines of text supports comfortable reading for users with visual or cognitive impairments. Adequate line height prevents text from appearing cramped and helps readers track from one line to the next without losing their place.

What Is Line Height Accessibility

Line height, also called leading, measures the vertical distance from one baseline to the next in multi-line text. In CSS, line-height can be specified as a unitless number (multiplier of font size), a length value, or a percentage. Accessible line heights provide enough space for comfortable reading without excessive gaps that disrupt visual flow.

WCAG 2.1 Success Criterion 1.4.12 (Text Spacing) at Level AA requires that content adapts when users override text spacing properties, including setting line height to at least 1.5 times the font size. This does not mandate 1.5 as a default but requires that layouts not break when users apply this setting.

In practice, line heights between 1.4 and 1.6 provide comfortable reading for most body text. Headings can use tighter line heights (1.2 to 1.3) because large text needs less proportional spacing and headings rarely extend to multiple lines.

How Line Height Accessibility Works

Line height affects readability through several mechanisms. Insufficient spacing causes lines to visually merge, making it difficult for readers to track horizontally. This particularly impacts users with dyslexia or low vision. Excessive spacing can break the visual connection between lines, making paragraphs feel disjointed.

Design systems define line height tokens that pair with font size tokens. A common approach creates line height values for each size in the typography scale, optimized for that size’s typical use case. Body text tokens might default to 1.5 line height while display text tokens use 1.2.

Component implementations apply these tokens consistently. Paragraph components use body line height. Heading components use corresponding heading line heights. This systematic approach prevents arbitrary line heights that might fail accessibility requirements.

Supporting user overrides requires avoiding fixed heights on text containers. If a container has a fixed pixel height, increasing line height causes text overflow rather than container expansion. Design systems should ensure layouts accommodate text spacing changes without clipping or overlapping content.

Key Considerations

• Body text should use line height of at least 1.4, preferably 1.5
• Headings can use tighter line heights (1.2-1.3) due to larger font size
• Use unitless line-height values to scale proportionally with font size
• Avoid fixed-height containers that would clip text when spacing increases
• Test layouts with 1.5 line height override to verify nothing breaks
• Consider that some languages and scripts may need different line height defaults
• Pair line height with appropriate paragraph spacing for overall readability

Common Questions

What line height should body text use?

Body text benefits from line heights between 1.4 and 1.6, with 1.5 being a common default. This range provides sufficient space for comfortable reading while maintaining visual cohesion between lines.

The optimal value depends on factors including font characteristics, line length, and content type. Narrow columns may tolerate tighter line height than wide columns. Fonts with tall ascenders and descenders may need more space. Design systems should test their specific typography choices to determine appropriate values.

How does line height interact with line length?

Line height and line length (measure) work together to affect readability. Longer lines benefit from more line height because readers must track farther horizontally and need clearer separation to find the next line. Shorter lines can use tighter line height without causing tracking problems.

Design systems should consider this relationship when defining responsive typography. If line lengths increase significantly at larger breakpoints, corresponding line height adjustments may improve readability.

Do line height requirements apply to all text?

The WCAG text spacing requirements apply to text in human languages but not to text that is part of a logo or brand name, text in images (which should be avoided when possible), or text that is incidental or decorative.

However, design systems benefit from applying consistent line heights broadly. UI text, labels, and other short text strings may not require 1.5 line height for readability but benefit from systematic treatment. Exceptions should be documented and limited to cases with clear justification.

Summary

Line height accessibility ensures text remains readable through appropriate vertical spacing between lines. Design systems implement this through line height tokens paired with font sizes, avoiding fixed-height containers, and supporting user spacing overrides as required by WCAG Success Criterion 1.4.12.