Ensure users can adjust text spacing (line, paragraph, letter, and word spacing) without breaking content or functionality. This is especially important for people with dyslexia, low vision, or cognitive disabilities, who often need more space between lines or letters for readability.
Key Points
When users override text spacing via custom CSS or browser extensions, all content must remain visible, usable, and not overlap or cut off.
The following minimum adjustments must be supported without breaking layout:
| Property | Minimum Requirement |
|---|---|
| Line height | 1.5 × font size |
| Paragraph spacing | 2 × font size |
| Letter spacing (tracking) | 0.12 × font size |
| Word spacing | 0.16 × font size |
- Applies to all visible text (except captions, images of text, or logos).
- Ensures no overlapping, truncation, or hidden content when spacing is increased.
- Works alongside responsive and fluid design principles.
Short Summary
Your site’s text layout must remain intact and readable even when users increase spacing between lines, letters, or words — ensuring flexible readability without layout breakage.
Example Issues and Fixes
Overlapping Text When Spaced
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<p class="text-base leading-tight w-60 bg-gray-100 p-4 !m-0">
Increasing text spacing can cause lines to overlap if the design uses tight line heights.
</p>
</div>
Increasing text spacing can cause lines to overlap if the design uses tight line heights.
<div class="flex w-full flex-col items-center justify-center gap-8 p-8 text-center">
<p class="text-base leading-relaxed w-60 bg-gray-100 p-4 !m-0">
Increasing text spacing can cause lines to overlap if the design uses tight line heights.
</p>
</div>
Increasing text spacing can cause lines to overlap if the design uses tight line heights.
Quick Checklist
- Can users apply line height ≥ 1.5×, paragraph spacing ≥ 2×, letter spacing ≥ 0.12×, and word spacing ≥ 0.16× without losing content?
- Avoid fixed heights and tight leading.
- Ensure no text overlap or truncation when spacing increases.
- Use relative units (e.g.,
em,rem) instead of fixed pixels. - Test using a custom stylesheet or browser accessibility extension.