Techniques for WCAG 2.0

Skip to Content (Press Enter)

-

C21: Specifying line spacing in CSS

Applicability

All technologies that support CSS

This technique relates to:

Description

Many people with cognitive disabilities have trouble tracking lines of text when a block of text is single spaced. Providing spacing between 1.5 to 2 allows them to start a new line more easily once they have finished the previous one.

Examples

Example 1

Setting the element to 1.5 line height. In the style sheet set the characteristics of the element.

Example Code:

p { line-height: 150%; }

In the content the element will now be 1.5 line height, throughout the document.

Example Code:

<p> Lorem ipsum dolor sit …  </p>

Example 2

Setting a class to 1.5 line height (space-and-a-half line spacing). In the stylesheet, define the class.

Example Code:

p.tall {line-height:150%}

In the content, call up the class.

Example Code:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Example 3

Setting a class to double-spaced line height. In the stylesheet, define the class.

Example Code:

p.tall {line-height:200%}

In the content, call up the class.

Example Code:

<p class="tall"> Lorem ipsum dolor sit …  </p>

Tests

Procedure

  1. Open content in a browser.

  2. Check that the spacing between lines in blocks of text is between 1.5 and 2.

Expected Results