Tutorial

Using the CSS line-height Property to Improve Readability

While this tutorial has content that we believe is of great benefit to our community, we have not yet tested or edited it to ensure you have an error-free learning experience. It's on our list, and we're working on it! You can help us out by using the "report an issue" button at the bottom of the tutorial.

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.

demonstration of baseline

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):

demonstration of line height

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:

small line height

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

line-height sizing

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

good line height example

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.

line height demo

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.

0 Comments

Creative Commons License