Does your text stay readable with more space between it?
Some visitors add more space between letters, words and lines to read your text more comfortably. Think of people with dyslexia or a visual impairment. The question is: does your text stay readable when they do, or does something disappear, overlap or get clipped?
This free tool shows you straight away: on your own live site with the button for your bookmarks bar, or right here with an example you can adjust yourself.
How does it work?
Drag the button to your bookmarks bar and click it on any page of your own site. The space between letters, words and lines is increased at once, so you can see where your text disappears or overlaps. Want to see what happens first? Move the sliders in the example below.
What does this tool change?
The tool increases the space in four places. These are the values a visitor must be able to set without your text falling away. They belong to the accessibility rule WCAG 1.4.12 (Text Spacing).
| Property | CSS | Minimum |
|---|---|---|
| Line height | line-height | 1.5x the font size |
| Paragraph spacing | margin | 2x the font size |
| Letter spacing | letter-spacing | 0.12em |
| Word spacing | word-spacing | 0.16em |
You do not have to apply these values by default. The point is that your site must not break when a visitor does.
Test your own live site
Drag the button below to your bookmarks bar. Then open a page of your own site and click the bookmark. All four values are applied at once, so you can see straight away where your text breaks. Click again to switch it off.
No bookmarks bar? Turn it on with Ctrl+Shift+B (Windows) or Cmd+Shift+B (Mac). Cannot drag? Use the "Copy the code" button and paste the code into a new bookmark.
After clicking, watch for:
- text that disappears or gets clipped
- content that overlaps other content
- buttons or labels where the text spills out
- menus, tooltips or dropdowns that become unreadable
Interactive example
Move the sliders to see what happens to the text. You can also edit the sample text yourself. Turn on "fixed height" to see how a container with overflow: hidden clips the text.
Tip: you can click inside the example below and type your own text.
A card with a title that only just fits
By default this card has just enough room for its title. Turn on "fixed height" above and increase the line height: you will see the text spill out of the card or get clipped.
A button with textOrdinary paragraphs should simply grow with the text spacing. When a visitor sets more space between letters, words and lines, all text has to stay readable. Nothing may disappear behind an edge or overlap another paragraph.
Extra white space helps people with dyslexia, low vision and older readers most. For them that extra room is the difference between a readable sentence and a jumble of letters.
Text spacing is one of the 55 WCAG success criteria. Want to know if your entire website meets accessibility requirements?
Request an audit or call +31 85 5055 890.