Which unit should we use for our CSS line-height? This property has a specific behaviour and its maintainability depends on the unit we will use.
I advise not to set line-height values with fixed units like 'px', 'pt', 'rem', 'vh', etc. The main problem is that we have no landmarks with this kind of values.
Line-height is often between 120% (compact) and 150% (large) of the font-size. In the following example, I need a calculation to tell if it is too compact or not.
.element {
font-size: 16px;
line-height: 20px;
/* equivalent to 125% */
}
Play with this example on jsbin
There could be one good reason to use fixed units, when the designer gave you specific values, like "12/21pt", and you want to keep the same format.
I also advise not to set line-height values with 'em' or '%' units. In this case, the problem is that we break the cascade.
The line height will be relative to the font-size for the elements matching the selector. However, it will be fixed for its children.
.element {
font-size: 16px;
line-height: 1.25em;
}
.element > .children {
font-size: 12px;
/* line-height computed to 20px */
}
Play with this example on jsbin
I found one use case for relative units, it allows you to keep a vertical rhythm whatever the children font-size.
I advise to set line-height with unitless values. It is easy to read, for example, '1.25' is equivalent to 125% of the font-size. It respects the cascade, so the line-height will be proportional to the font-size, even for children elements.
.element {
font-size: 16px;
line-height: 1.25;
}
.element > .children {
font-size: 12px;
/* line-height computed to 15px */
}
Play with this example on jsbin
Use unitless values for line-height.