Dublin Library

The Publishing Project

Line Height Units

  • 2 min. read

 

Line height units are not new but not widely used yet. They provide to measure things based on the line height of an element for the current font at the current line height.

There are two line height units:

  • lh: measured relative to the line height of the element
  • rlh: measured relative to the line height of the root element (usually the html element)

The most common case of using lh and rlh is to set paragraph block (top and bottom in Latin languages) margins or paddings.

In this example, we set the paragraph block (top and bottom) margins to 1 line height of the element:

p {
	margin-block: 1lh;
}

While fully supported in modern browsers, we can still use a fallback for browsers that don't support line height units. The fallback is to use a fixed value, such as 1em, which is equivalent to the font size of the element. The order of the properties is important, as the browser will use the last one it supports:

article {
  padding: 1em;
  padding: 1lh;
}

Jenn simmons created a demo of line height units in action, shown below:

The difference between lh and em (and rlh and rem) is consistency. Using em and rem looks rougher less polished, but it takes a trained eye to see the difference.

If you enable show margins and show line grids in the Codepen demo, you can see the differece between the two units.

Edit on Github