Using the CSS line-height Property to Improve Readability

In this article, you will learn about the CSS line-height property and how you can use it to create visually pleasant, readable text.
You have probably seen line-height being used before:

p {
  font-size: 16px;
  line-height: 1.2;
}

But how does it work, and what role does it have in CSS?

Typographic Roots in CSS #

Many ideas in CSS were drawn from the discipline of typography. One example is the CSS line-height property which sets the distance between two baselines of wrapped text.
The “baseline” is the imaginary line that text sits on.

For example, if we had this short snippet of text inside a <div> tag:

<div>
  The alligator went for a swim in the deep lagoon.
</div>

If you dragged your browser window so the text wrapped to the next line, you’d have two baselines and a line-height (denoted by the yellow arrows):

A larger value for the CSS line-height property will expand this distance, and smaller values will shrink it.

Line Height & Text Readability #

The line-height property plays a central role in making text readable for users. When you undersize line-height it will feel crowded. Reading text like this for extended periods will feel exhausting to the user:

If it’s too large, the user will have difficulty feeling engaged with what they’re reading:

But when you find the right line-height, your text will feel spacious and harmonious 💮🌺🌸

Finding the right line-height will vary based on your needs, but it also depends on the font family that you’re using. This is because each font has its own personality and will “read” differently in a substantial block of text.
For example, Helvetica and Times New Roman will require different line-height spacing even if they both have the same font-size.

Syntax for line-height #

You can provide line-height with all sorts of values! It’s also quite distinct from other CSS properties because it can accept typical px and % values, but it also has its own unique “unitless” value:

/* Use browser default.
 Typically "1.2" for
 all the major browsers */
line-height: normal;

/* Unitless (only line-height can do this!) */
line-height: 1.2;

/* <length> values like px, rem, em, pt */
line-height: 3em;

/* <percentage> values */
line-height: 120%;

The line-height is denoted by the yellow arrow.

How Browsers Compute line-height #

If you use a percentage or “unitless” value the font-size will be factored into the resulting line-height. For example, both snippets below will compute to 19.2px by the browser:

.myText {
  font-size: 16px;
  line-height: 1.2  /* (19.2px = 16 x 1.2) */
}

.myText {
  font-size: 16px;
  line-height: 120%;  /* (19.2px = 16 x 1.2) */
}

However, if you use “length” values like px|em|rem|pt, the font-size won’t be used to calculate the line-height:

.myText {
  font-size: 16px;
  line-height: 20px;  /* Always 20px! */
}

While both percentage and “unitless” values seem to be identical, there are subtle differences. Best practices suggest using “unitless” values whenever possible

Conclusion #

Generally speaking, a good line-height ranges between 1.5 and 1.7 for most fonts. Alligator.io, for example, uses a line height of 1.6. It’s more art than science, and many times you’ll find yourself opening your browser’s “Developer Tools” to nudge the line-height until it feels “just right” ✨👌

To learn more, visit the MDN for documentation on line-height.