Text Spacing

In many situations, what works well for one, doesn't work well for another. I think text spacing is one of these things. Optimising text spacing to make it more readable is an individual thing. It's not possible to please everyone. So it is important that users can make changes to the text spacing without losing content or having it overlap. This criterion states:

In content implemented using markup languages that support the following text style properties, no loss of content or functionality occurs by setting all of the following and by changing no other style property:

• Line height (line spacing) to at least 1.5 times the font size;
• Spacing following paragraphs to at least 2 times the font size;
• Letter spacing (tracking) to at least 0.12 times the font size;
• Word spacing to at least 0.16 times the font size.

There are many reasons why a user may need to increase the text spacing. They may have a visual impairment that means they need each letter to be more distinct from the adjacent letters. They may have dyslexia and find tightly spaced text seems to move around or blur too much. Whatever the reason, you should be aiming to allow users to read your content with ease.

What this doesn't mean

I often encounter the misunderstanding that this success criterion means you have to set the text spacing to the defined values. That is not the case. You only have to ensure that users can change the spacing without losing content or functionality. They might do that using a bookmarklet or other tool that overrides your CSS with their preferred font settings. All you have to do is not prevent users from doing this.

How do I achieve this?

No height property

Don't set a height property on paragraphs and other text in your CSS. If you set a height property, and a user needs to increase the spacing, it is likely that some of the content will be lost. Just allow the paragraph to automatically adjust its height.

Text wrapping

Text should usually be allowed to wrap. That means that if the user changes the size or spacing, the text will adjust itself so that it still displays well.

In situations where the text is not allowed to wrap, you should ensure that the box is allowed to expand so that the text can still be read.

Units of measurement

Rather than using defined units of measurement, such as pixels, consider using relative units, such as em or rem. I use rem for most things. This means everything will size relative to the whole page, rather than a specific size. It means that when a user zooms in or views it on a different screen size, everything will still display correctly.

Good practice

To achieve this success criterion, you do not have to set any text spacing values. However, it is good practice to set the line height to 1.5. You can do that on the body CSS or on an individual element. I do it on my paragraph CSS.

p { 
	color: #1A0133; 
	font-size: 1rem; 
	font-family: sans-serif; 
	text-align: left; 
	line-height: 1.5rem;
}