WebAIR

Have you provided sufficient letter-spacing, line-spacing and paragraph-spacing? (TXT20)

Why is this important?

People with specific learning disabilities sometimes struggle to read text when the space between lines and paragraphs is very small. When the spaces between lines are very small, it makes it difficult to for them to identify where they are on a particular line. Similarly, when the gaps between paragraphs are very small, it makes it difficult for them to identify when they have reached the end of a paragraph. Increasing the space between lines and paragraph will make the text easier to read.

 

There are no specific requirements for letter spacing, other than to ensure that it is specified correctly, using CSS, and that additional characters are not inserted to create space between letters.

How to fix the problem

The spacing between lines can be specified in CSS using the "line-height" property. This is similar to the publishing term "leading". The default spacing between lines depends on the font you are using and can vary from browser to browser but is approximately the font size plus a little bit extra. To make the text easier to read, ensure that the "line-height" property is set to at least 150%, which is equivalent to 50% larger than the font size.

 

The spacing between paragraphs can be specified in CSS using the padding and margins of the paragraph element. To allow readers to easily identify when they have reached the end of a paragraph, ensure that the space between paragraphs is at least 150% larger than the line spacing. This should be equivalent to there being a blank line between the two paragraphs.

 

Letter spacing can be specified in CSS using the "letter-spacing" property.

Example

//The line-height property of CSS
p {
line-height: 150%;
}

//The margin property of CSS, used to define paragraph spacing (in this case, to the bottom margin)
p {
margin-bottom: 2em;
}

//The letter-spacing property of CSS
p {
letter-spacing: 1em;
}

Further Information

  1. http://accessites.org/site/2007/06/improving-accessibility-through-typography/
  2. http://www.smashingmagazine.com/2012/07/24/one-more-time-typography-is-the-foundation-of-web-design/