You might need to know about the CSS lh unit

Introduction

The line height unit (lh) has been around for a while and I rarely see people sharing how they use it. In this article, I will share a few use cases that I personally like.

From its name, the line height unit is equal to the computed value of the line-height property.

Vertical spacing

Let’s take the following example. I want to add vertical spacing between the paragraphs. Usually, we use margin with a fixed value, or, in the best case, a mix of a fixed value and container or viewport units.

For demo purposes, I added a spacer manually between the paragraphs. It’s highlighted in pink. Its default height is 1rem.

rem

Show Lines

1rem = 16px

Logo

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil quas repellendus quisquam sint vel quia voluptas tenetur, fuga, ullam a eligendi dignissimos! Delectus, quis! Rerum illum vel natus vitae eveniet?

I switched the value to lh. Notice how the spacing between the paragraphs looks more logical.

rem

Show Lines

1lh = 0px

Logo

p {
  margin-bottom: 1lh;
}

The spacing is now based on the line height of the text. This usage used to be done with hacks where we had to manually set the height of a piece of text, then use it for the spacing.

While it might work in some cases, it will be challenging to maintain and scale.

Paper line effect

This is a popular usage for line height and lh makes it even easier. I made the lines using a CSS linear gradient. The height of the repeating pattern is set to 1lh.

Here is the background image:

.content {
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 2rem;
}

While that works as a start, it’s not an optimal solution. Try to change the font sizes below and see how it breaks the alignment with the paper lines.

Font size24px

use lh

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

If you toggle the usage of lh for the card, you will see how the alignment is better when the font size is changed.

Font size24px

use lh

Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam, quos.

I did that by setting the font size on the parent, and the paragraphs inherit it.

.content {
  font-size: 1.5rem;
  background-image: linear-gradient(
    to bottom,
    transparent calc(100% - 1px),
    rgba(0, 0, 0, 0.15)
  );
  background-size: 100% 1lh;

  p {
    font-size: inherit;
  }
}

You can also manually set a unitless line-height on the parent itself and the child elements will inherit it by default.

Floating images alignment

When was the last time you used CSS float? Here is a fun usage of the line height unit. I need the image’s height to be aligned with the line next to it.

Take the following image. Notice how the bottom edge of the image isn’t aligned with the lines.

Font size18px

use lh

Show Lines

Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam sint, iure magnam quis, quia, necessitatibus nulla sequi ipsum unde nihil alias aut odio ullam aperiam animi magni perferendis vitae veritatis?

If we toggle the usage of lh for the image’s height along with the round() function, it will work.

.content img {
  float: left;
  height: calc-size(auto, round(up, size, 1lh));
}

Here is what’s going on with the above CSS snippet:

Using calc-size() to get the image’s height via auto.
Using the round() function along with the size from calc-size() and the lh to round the image’s height to the nearest line.

Font size18px

use lh

Show Lines

In this case, changing the font size will not break the alignment, because the line height is inherited. Try it!

You can learn more about round() from this recent article.

Better fluid sizing with round()

Using the round() function to get a more predictable fluid sizing.

Faded content

In the example below, I have a list of items, and I want to limit its height to five lines. Without using the lh unit, this is hard to manage.

Try increasing the font size and see what happens.

Font size18px

use lh

Show Lines

Espresso
Pour over
French press
Moka pot
Cold brew
Turkish coffee

The height limit no longer matches the first five lines. This is because the fading and the max-height are based on pixels.

.list {
  max-height: 120px;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 30px),
    transparent 100%
  );
  overflow-y: clip;
}

In the demo below, see how the height increases to match the five lines when using the lh unit.

.list {
  max-height: 5lh;
  mask-image: linear-gradient(
    to bottom,
    #000,
    #000 calc(100% - 1lh),
    transparent 100%
  );
}

Here is the demo:

Font size22px

use lh

Show Lines

Espresso
Pour over
French press
Moka pot
Cold brew
Turkish coffee

Button icon

I learned about this usage from Andy Bell. The idea is to use the lh unit to set the size of the icon.

.button {
  --size: 0.8lh;

  svg {
    width: var(--size);
    height: var(--size);
  }
}

Check out the demo:

Font size24px

use lh

There are many more demos that can benefit from the lh unit! If you have any other use cases, please share them with me, I’d love to take a look!

You might need to know about the CSS lh unit

Table of contents

Introduction

Vertical spacing

Paper line effect

Floating images alignment

Faded content

Button icon

Further reading

You might need to know about the CSS lh unit

Table of contents

Introduction

Vertical spacing

Paper line effect

Floating images alignment

Faded content

Button icon

Further reading

Join my mailing list