In the previous Font Styling chapter we looked at how to style text in CSS by altering their weights, cases, sizes and much more.

In this chapter we will see how to adjust the spacing between text - characters, words and lines.

Spacing is a vital part to design - it can make a design breathable and digestable for viewers. Spacing applies to many areas of a web design of which text is a sure attendant. You won't see any great design out there without some sort of therapy given to text in terms of its spacing.

So with some understanding of spacing, in general terms, we can now jump over to experiencing it in CSS text. Let's begin!

Space between characters - letter-spacing

To adjust the distance between characters in a piece of text we can use the letter-spacing property by specifying it a distance in px (or any other CSS unit).

The property actually conveys everything about it simply by its name: letter-spacing - the spacing between letters.

Let's see an example:

p {letter-spacing: 4px}
p {letter-spacing: unset}

4px letter spacing

Default letter spacing

Space between words - word-spacing

To adjust the distance between words in a piece of text we can use the word-spacing property by specifying it a distance in px (or any other CSS unit).

Just Like letter-spacing, even this property conveys its purpose with its name: word-spacing - the spacing between words.

Let's see an example:

p {word-spacing: 10px}
p {word-spacing: unset}

10px word spacing

Default word spacing

Space between lines - line-height

To adjust the spacing between lines in a piece of text we can use the line-height property by specifying it a value in px (or any other CSS unit) or a relative number.

Now as you can see this property deviates slightly from the naming we saw above i.e it uses the word height instead of spacing. Remember this!

Let's see line-height in real code.

Set the line height equal to 30px:

p {line-height: 30px}

This is a paragraph
which has a line height
equal to 30px

Set the line-height to be double of its current value using a relative number value:

/* set the line-height equal to 2 * current line-height*/
p {line-height: 2}

This is a paragraph
which has a line height
equal to 2

Unset the line-height to its previous value:

p {line-height: unset}

This is a paragraph
with its default
line height

And that's it for this chapter.