Techniques for WCAG 2.0

On this page:

-

# C21: Specifying line spacing in CSS

## Applicability

All technologies that support CSS

This technique relates to:

- Success Criterion 1.4.8 (Visual Presentation)
  - How to Meet 1.4.8 (Visual Presentation)
  - Understanding Success Criterion 1.4.8 (Visual Presentation)

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

- Test Procedure #2 is true.

- Top
- Contents
- Intro
- Previous: Technique C20
- Next: Technique C22