Techniques for WCAG 2.0

On this page:

-

# C8: Using CSS letter-spacing to control spacing within a word

## Applicability

All technologies that support CSS.

This technique relates to:

- Success Criterion 1.3.2 (Meaningful Sequence)
  - How to Meet 1.3.2 (Meaningful Sequence)
  - Understanding Success Criterion 1.3.2 (Meaningful Sequence)

## Description

The objective of this technique is to demonstrate how the visual appearance of spacing in text may be enhanced via style sheets while still maintaining meaningful text sequencing. The CSS `letter-spacing` property helps developers control the amount of white space between characters. This is recommended over adding blank characters to control the spacing, since the blank characters can change the meaning and pronunciation of the word.

## Examples

### Example 1: Separating characters in a word

The following CSS would add the equivalent of a space between each character in a level-2 heading:

Example Code:

    h2
    {
    	letter-spacing: 1em;
    }

So for the markup:

Example Code:

    <h2>Museum</h2>

the rendered result might look something like:

Example Code:

    M u s e u m

## Resources

Resources are for information purposes only, no endorsement implied.

- CSS 2.0: Letter and word spacing

## Related Techniques

- F1: Failure of Success Criterion 1.3.2 due to changing the meaning of content by positioning information with CSS
- F32: Failure of Success Criterion 1.3.2 due to using white space characters to control spacing within a word

## Tests

### Procedure

For each word that appears to have non-standard spacing between characters:

1. Check whether the CSS `letter-spacing` property was used to control spacing.

### Expected Results

- Check #1 is true.

- Top
- Contents
- Intro
- Previous: Technique C7
- Next: Technique C9