Text spacing refers to the amount of whitespace around pieces of text. Between letters in words, between words, and between lines.

Text spacing affects readability, and therefore the usability of a Web site. It’s something you should pay attention to.

This article reviews some text spacing options.

Line spacing

This is how much vertical space is added between lines of text. Like this:

Normal line spacing

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Too crowded

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.

Spread apart

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi
ut aliquip ex ea commodo consequat.

CoreDogs spreads out the text a little. This makes it easier to read.

By the way, line spacing is also called leading, pronounced “ledding,” to rhyme with “wedding.”

Line spacing in CSS

Here’s what CoreDogs uses for most of its text:

line-height: 1.4;

Reduce the number to bunch text together. Increase the number to spread things out.

Letter spacing

This is the horizontal space between letters in a line of text.

Normal letter spacing

Lorem ipsum dolor sit amet

Compact letter spacing

Lorem ipsum dolor sit amet

Expanded letter spacing

Lorem ipsum dolor sit amet

Letter spacing is sometimes called “kerning.” If you can’t find letter spacing in the menu of your favorite graphics program or word processor, look for kerning.

Letter spacing in CSS

Here are the samples above, with the CSS.

Normal letter spacing

letter-spacing: 0em;

Lorem ipsum dolor sit amet

Compact letter spacing

letter-spacing: -0.1em;

Lorem ipsum dolor sit amet

Expanded letter spacing

letter-spacing: 0.4em;

Lorem ipsum dolor sit amet

0em gives you normal spacing. Negative values bunch letters together. Positive values spread them out.

Word spacing

This is the horizontal space between letters in a line of text. It isn’t used as much as letter spacing. Word spacing is also called “tracking.”

Normal word spacing

Lorem ipsum dolor sit amet

Compact word spacing

Lorem ipsum dolor sit amet

Expanded word spacing

Lorem ipsum dolor sit amet

Word spacing in CSS

Here are the samples above, with the CSS.

Normal word spacing

word-spacing: 0em;

Lorem ipsum dolor sit amet

Compact word spacing

word-spacing: -0.2em;

Lorem ipsum dolor sit amet

Expanded word spacing

word-spacing: 1em;

Lorem ipsum dolor sit amet

0em gives you normal spacing. Negative values bunch words together. Positive values spread them out.