Technique C8:Using CSS letter-spacing to control spacing within a word
About this Technique
This technique relates to:
- 1.3.2: Meaningful Sequence (Sufficient when used with G57: Ordering the content in a meaningful sequence)
- 1.4.5: Images of Text (Advisory)
- 1.4.9: Images of Text (No Exception) (Advisory)
- 1.4.12: Text Spacing (Advisory)
This technique applies to all technologies that support CSS.
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: Increasing the spacing between characters in a word
The following CSS would add the equivalent of a space between each character in a level-2 heading:
The CSS
h2 {
letter-spacing: 1em;
}The HTML
<h2>Museum</h2>The rendered result might look something like:
M u s e u m
Related Resources
No endorsement implied.
Tests
Procedure
For each word that appears to have non-standard spacing between characters:
- Check whether the CSS letter-spacing property was used to control spacing.
Expected Results
- Check #1 is true.