EM's for line-height
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
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.
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.