The em unit is practical for scaling things. Note how the em width scales with the px font-size, so you only need to change the latter and the former will adjust automatically to fit the text:
CODE
#a, #b {width: 6em;}
#a {
font-size: 20px;
background: pink;
}
#b {
font-size: 30px;
background: lime;
}
<div id="a">lorem ipsum</div>
<div id="b">lorem ipsum</div>
If you instead used rem for the width, it would not scale with the font-size value, so you'd have to change both.
In contrast, em is not practical for nested element font-sizes, here the rem unit would be more convenient:
CODE
li {font-size: 1.5em;}
<ul>
<li>outer
<ul>
<li>inner</li>
</ul>
</li>
</ul>
Here are a couple of long pages on the subject (I haven't read them properly myself yet):
http://zellwk.com/blog/rem-vs-em/http://webdesign.tutsplus.com/tutorials/co...-rem--cms-23984Note that IE10 seems to be buggy, both with the "font" shorthand:
http://caniuse.com/#search=rem and the "font-size" property:
https://connect.microsoft.com/IE/feedback/d...unit-of-measure