CSS Text Spacing

In the previous CSS Text — Font Styling chapter, we saw how to style text in CSS by altering its weight, casing, and size.

Now in this chapter, we shall see how to control the different aspects of spacing of text. Spacing plays a vital part in the field of design. It can make an otherwise complex chunk of information more breathable and digestible to the eye by allowing certain areas for the eye to rest at.

While designing websites, you'll almost always use at least one of the concepts that we discuss in this chapter; they're all that important.

In particular, in this chapter we'll see how to control the spacing between letters, which is sometimes also known as tracking; the spacing between words; and the spacing between lines, also referred to as leading.

To adjust the spacing between letters, we use the letter-spacing property in CSS. In the world of design, this is commonly referred to as the tracking of text.

letter-spacing can be set to either a <length> value or to the special value normal, which is effectively the same as the value 0.

Here's the syntax of letter-spacing:

letter-spacing: <length> | normal;

Let's consider some examples before exploring some important aspects of letter-spacing.

In the following code, we demonstrate a series of paragraphs with different letter-spacings, all specified as px values:

<p class="p1">This is 1px letter spacing.</p>
<p class="p2">This is 10px letter spacing.</p>
<p class="p3">This is 20px letter spacing.</p>

p {
   font-family: sans-serif;
}

.p1 {
   letter-spacing: 1px;
}

.p2 {
   letter-spacing: 10px;
}

.p3 {
   letter-spacing: 20px;
}

We've used a sans-serif font for this example, and will do so for all the following ones, because it would make for slightly more legible text compared to using a the generic serif font.

Let's see the result:

As is evident here, the larger the letter spacing, the harder it is for us to read the text.

Negative values of letter-spacing are also possible, as demonstrated below:

<p class="p1">This is -1px letter spacing.</p>
<p class="p2">This is -2px letter spacing.</p>
<p class="p3">This is -10px letter spacing.</p>

.p1 {
   letter-spacing: -1px;
}

.p2 {
   letter-spacing: -2px;
}

.p3 {
   letter-spacing: -10px;
}

Once again, the farther away we go from a normal letter-spacing, the more difficult it is to understand what's written.

Negative letter-spacing, which is also referred to as tight tracking, is mostly used on large font sizes, such as those of headings.

Consider the following:

<p>This is normal letter spacing.</p>
<p class="p2">This is -1px letter spacing.</p>
<p class="p3">This is -5px letter spacing.</p>

p {
   font-size: 30px;
}

.p2 {
   letter-spacing: -1px
}

.p3 {
   letter-spacing: -5px
}

All but the last paragraph here again falls below the level of legibility, so always wisely choose the letter spacing of your text.

Since letter-spacing can be set to a <length> value, we can even use em values, which will be resolved down to a px value relative to the font size of the element.

An example follows:

<p>Font size 13px. Letter spacing 6.5px.</p>
<p>Font size 16px. Letter spacing 8px.</p>
<p>Font size 24px. Letter spacing 12px.</p>

p {
   letter-spacing: 0.5em;
}

.p1 {
   font-size: 13px;
}

.p2 {
   font-size: 16px;
}

.p3 {
   font-size: 24px;
}

Let's see the result:

In the first paragraph, the font size of the text is 13px and so with a 0.5em letter spacing, the computed value of the letter spacing becomes 6.5px (13 x 0.5 = 6.5). Similar reasonings apply to the second and third paragraphs.

Moreover, as specified before, the special value normal is the same as 0, i.e. no letter spacing. This is also the default value.

The following snippet demonstrates this idea:

<p>No letter spacing.</p>
<p class="p2">Normal letter spacing.</p>
<p class="p3">0 letter spacing.</p>

.p2 {
   letter-spacing: normal;
}

.p3 {
   letter-spacing: 0;
}

Here, all three paragraphs have the exact same letter spacing.

If you carefully notice, letter-spacing is only applied between individual letters in a piece of text and not before the very first letter.

Let's illustrate this with a more noticeable example:

<span>This is a span.</span>

p {
   font-size: 30px;
   letter-spacing: 10px;
}

span {
   background-color: yellow;
}

See how the 'T' at the start of the text is aligned with the left edge of the yellow box; this confirms that the letter-spacing isn't applied before the 'T'.

But what if we right-justify the text? Let's find out.

As per the result, there's no change.

This is desirable, for if this wasn't the case, applying letter-spacing would've put off text block alignments with the rest of the elements on the webpage.

In the section above, we learnt how to modify the spacing between all the characters in a piece of text. But what if we wish to do this for a specific pair of characters?

If you're a designer, you'd probably know that this is referred to as kerning.

Kerning is simply the spacing between any two specific characters in a piece of text.

Sometimes, fonts are built in a way whereby certain pairs of characters, when written together, produce a slightly odd spacing. Geometrically, those characters would be spaced out absolutely perfectly but not optically (i.e. as seen by the eye).

In such cases, as is mainstream in design software, we can manually adjust the kerning between the troubling characters until everything looks homogenous.

In CSS, it's possible to adjust the kerning of a pair of characters, but it's not that trivial.

Let's consider an example.

Following we have some text, rendered with the Bree Serif font, with a noticeable odd spacing between the letters 'W' and 'a':

<div>Water</div>

div {
   font-family: 'Bree Serif';
   font-size: 50px;
}

Just changing the letter-spacing of the <div> won't alleviate this odd spacing as it'll change the spacing between each subsequent pair of letters, as demonstrated below:

div {
   font-family: 'Bree Serif';
   font-size: 50px;
   letter-spacing: -2px /* Won't solve the issue! */
}

The text is tighter than before but the 'W' and 'a' still have an extra spacing between them.

So how to solve this issue?

Well, we need to wrap the letter after which we have an odd spacing inside a <span> element and then change the letter-spacing of this <span>.

Let's try doing so:

<div><span>W</span>ater</div>

In the following snippet, we deliberately set a large letter-spacing and a yellow background to the <span> just to give you a sense of what's exactly happening:

div {
   font-family: 'Bree Serif';
   font-size: 50px;
}

span {
   letter-spacing: 20px;
   background-color: yellow;
}

See? With letter-spacing applied to <span>, we are effectively controlling the spacing after the letter 'W'.

Simple, right?

Now, let's adjust the kerning between 'W' and 'a' — our original problem:

div {
   font-family: 'Bree Serif';
   font-size: 50px;
}

span {
   letter-spacing: -3px;
}

By some quick trial and error, a letter spacing of -3px seems very close to perfect and so we'll stick to it.

Perfect!

Do keep in mind that in the case above, the kerning we applied between 'W' and 'a', i.e. -3px, won't work when we scale down the font to a small size. For that, we'd need to adjust our kerning again.

See the following snippet:

div {
   font-family: 'Bree Serif';
   font-size: 20px;
}

span {
   letter-spacing: -3px;
}

Notice how the letters 'W' and 'a' are now almost touching each other.

We'll need to reduce down our letter-spacing:

div {
   font-family: 'Bree Serif';
   font-size: 20px;
}

span {
   letter-spacing: -1px;
}

And that's it.

However, a much more flexible option would be to use an em value for letter-spacing to be all free from this issue.

Something as follows:

div {
   font-family: 'Bree Serif';
   font-size: 20px;
}

span {
   letter-spacing: -0.05em; /* Much more flexible in this case */
}

The kerning looks right in this font size. Let's also see it for the larger one:

div {
   font-family: 'Bree Serif';
   font-size: 50px;
}

span {
   letter-spacing: -0.05em; /* Much more flexible in this case */
}

Yup. Looks right here as well.

This section clearly demonstrates the fact that it isn't impossible to adjust the kerning in a piece of text manually using CSS. But, as you just saw, it isn't very straightforward.

First we ought to wrap the troubling character inside a <span>, then apply just the right value for letter-spacing, and finally be proud of our CSS knowledge (well we should be).

The good news for us is that many fonts used on the web these days don't have any noticeable kerning issues, so we don't usually have to get into such adjustments. But if we ever have to, at least we now know how to do it.

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.