Spacing Examples

Letter Spacing

In the field of typography, which is the art of printed text, letter spacing is called "kerning". As you can see, setting large spaces between words looks nice for titles, but makes the sentences difficult to read.

2em Example

This header and paragraph use a letter spacing of 2em (200% which is double the size of the font).

1.33em Example

This header and paragraph use a letter spacing of 1.33em (133% which sets the spacing between each letter one-third greater than the size of the font).

1em Example

This header and paragraph use a letter spacing of 1em (100% which sets the spacing between each letter to the same value as the size of the font).

Word Spacing

In typography, word spacing is known as "tracking".

2em Example

This header and paragraph use a word spacing of 2em (200% which sets the spacing between each word to twice the size of the font).

Letter and Word Spacing

In this example, we set both the letter spacing and word spacing. As you can see, the letter spacing is added on to the word spacing, so the spaces between words are even larger than just setting the word spacing.

2em Example

This header and paragraph use a letter spacing and a word spacing of 2em (200%, double).


Click to validate the HTML code Click to validate the CSS code