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.