HTML and CSS

Spacing Letters and Words

Another aspect of typography that CSS has picked up on is letter spacing and word spacing, handled by the letter-spacing and word-spacing properties, respectively. Values for each are lengths (see Example 9-8).

Example 9-8. Letter and word spacing
<p style="letter-spacing: 10px;">I married early, and was happy to find in my wife a
 disposition not uncongenial with my own. </p>
<p style="word-spacing: 0.5em;">Observing my partiality for domestic pets, she lost no
 opportunity of procuring those of the most agreeable kind. We had birds, gold fish, a fine
 dog, rabbits, a small monkey, and a cat.</p>

The first paragraph will have 10 pixels between each letter, and the second will have 0.5 ems between each word (see Figure 9-15).

Figure 9-15. Letter and word spacing.

The results are unusual. Although you wouldn't normally use these styles in conservative documents, you can begin to see how using such styles can provide sophisticated design options.

by BrainBellupdated
Advertisement: