Using the CSS line-height Property to Improve Readability

Published on February 4, 2020

William Le

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.

demonstration of baseline

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

  The alligator went for a swim in the deep lagoon.

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


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.

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about our products

About the authors
Default avatar
William Le


While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?

This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

“However, if you use “length” values like px|em|rem|pt, the font-size won’t be used to calculate the line-height:” Isn’t the ‘em’ calculated by the font-size of the current div element?

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Featured on Community

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel