Technique C21:Specifying line spacing in CSS

Applicability

All technologies that support CSS

This technique relates to:

1.4.8: Visual Presentation (Sufficient)
1.4.12: Text Spacing (Advisory)

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.

p { line-height: 150%; }

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

<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.

p.tall {line-height:150%}

In the content, call up the class = "left".

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

Example 3

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

p.tall {line-height:200%}

In the content, call up the class = "right".

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