EM's for line-height

Question

I would like to convert my new website from pixels to ems. My question is, should I also apply ems to my text line-height property?

Diedra

Yes, you can. em is a valid unit for CSS line-height property – Truancy

The accepted answer points out why one should NOT use any unit with line-height: because line-height is then calculated only ONCE and the result is inherited. To have line-height adjust with font-sizes, remove the unit. – Institution

Answer 1

Assuming that “converting to ems” means using the em unit for font-size, then you should set line-height in a manner that also adapts to the font size. The two properties are closely related, and if you set one of them in em and the other (e.g.) in px or pt, then the page will break if the font size is changed. So it would work against the very idea of “using ems” to use essentially different units for essentially connected properties.

For example, if you set font-size: 1.5em and line-height: 18px, then things will depend on the font size of the element’s parent and may go very wrong if that size is much smaller or much larger than expected.

Whether you use the em unit or a pure number is a different issue. Using just a number, as in line-height: 1.2, is primarily equivalent to using the em unit, as in line-height: 1.2em. But there is the difference that when line-height is inherited, it is the pure number that gets inherited, not the computed value.

For example, if an inner element has twice the font size of its parent, then the inherited value 1.2 means that 1.2 times its own font size is used, which is OK. But if the parent had line-height: 1.2em, then the child would inherit a value that 1.2 times the parent’s font size – which is much smaller than its own font size.

for more explanation end examples see line-height @ Mozilla Developer Network

Soerabaja

Thanks for the difference between line-height: 1.5em and line-height: 1.5, it saved me a lot of searching! – Weighting

Answer 2

line-height can be set in px, em's, every unit will fit.

line-height works best and future proof if you use a factor/multiplier, meaning no unit, but only a number that is multiplying your font-size.

.foo {
  font-size: 1.3em; /* based that 1em == 10px */
  line-height: 1.3; /* 16.9px line-height */
}

So, Yes, you can, to answer you question: no you should not.

just go for the factor based line-height to be future proof.

Orian

Is it recommended to convert line-height to ems if I use ems for my font-size? – Diedra

Answer 3

It is recommended to use the unitless number for line-height (to prevent inheritance issues). The computed line-height will then be the product of the unitless value multiplied by the element's font size.

It may be more convenient to use the font CSS shortcut, like so (example taken from the Mozilla CSS docs):

div { font: 10pt/1.2  Georgia,"Bitstream Charter",serif }

A good example of why the unitless value is preferable is given here: Prefer unitless numbers for line-height values.

Pox

Great tip and MDN resource! I always wondered about the line-height property and the intricasies of ems. With that link and the background on ems, I came out a lot wiser. – Onder