Text Spacing

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!

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}

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}

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}

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}

Unset the line-height to its previous value:

p {line-height: unset}

And that's it for this chapter.