line-height

In this topic, we will talk about the line-height property. This property helps to specify the distance before and after inline elements. Browsers define its value automatically depending on the family and size of the text font, but we can change it if needed.

Purpose and usage

This property quite literally determines the height of a line.

Most often line-height is used to change the distance between lines in text. Varying the line spacing makes the text more readable and pleasing to the eye.

To better understand the importance of the right line-height selection, let's look at the three ways of formatting one quote:

div {
    line-height: 0.7;
}

div {
    line-height: 1.5;
}

div {
    line-height: 2.7;
}

The second option seems to be the best, not too cramped, not too spacey. So how can we specify the desired value?

Basic value

The first value that line-height gets from the browser is normal. This value is calculated specifically for each case and is used if we don't intend to write it on our own. The value depends on the family and size of the text font and usually roughly equals the font size multiplied by 1.2.

div {
    line-height: normal;
}

Well, if browsers set the value themselves, why would we want to change it? It turns out that the default option isn't always good enough. For example, if we set a small font size and normal line-height, the result might be undesirable:

div {
    line-height: normal;
}

It will be nicer if we add some space to the text:

So how can we do it?

Unitless values

Let's replace normal with some non-negative number for the gray quote above and compare the results:

div {
    line-height: 1.5;
}

So what did just happen? The browser took the number that we specified in the property and multiplied it by the font size. The resulting number is the new line-height pixel value.

For most fonts recommended unitless line-height ranges from 1.5 to 1.7.

Length values

We can also use any of the CSS standard units like px, em, cm, and so on. Let’s review some examples.

div {
    line-height: 20px;
}

div {
    line-height: 50px;
}

div {
    line-height: 1.5em;
}

div {
    line-height: 3em;
}

Percentage values

One more way to set the line-height value is “number + %”. Here we do the same thing as with the unitless values: we write how many times the font size needs to be increased using percentages. For example, if we have the font size equal to 20px and the line-height equal to 150%, then the browser calculates 150% of 20px, so the final line-height is 30px.

Here’s the last set of examples for this topic:

div {
    line-height: 50%;
}

div {
    line-height: 150%;
}

div {
    line-height: 300%;
}

Conclusion

There are many ways to make the text on your website more esthetically pleasing and readable. Adding the right amount of space to the text is one of them.

So, let's move on to solving the problems!