Font sizing: em vs. rem
Posted by: Tea Ho
Just when you thought you knew how to size text in CSS using pixels, em units showed up. Then, when you started using em units, people starting talking about rem units.
So what's the difference between em and rem?
Em units became popular with the rise of responsive design, since they are scalable. Ems are equal to the parent font-size, so if you set the body's font-size to 16px, 1em is equal to 16px.
1em = 16px
2em = 32px
That math is pretty simple. However, ems start to get confusing when you start nesting elements. Let's look at this CSS:
font-size: 16px; /* Set base font size in pixels */
font-size: 1.5em; /* 24px */
font-size: 1em; /* ?? */
How many pixels do you think the span is equal to? If you guessed 24px, you understand ems and can skip to the next section. If you guessed 16px, you're wrong (but it's a common mistake). The span element is actually based off of the h1 element now, therefore 1em is 24px. Ems cascade down, and each element's base size is its parent's font-size.
Enter rem! Rem stands for root-em. Like em units, rem is scalable and relative. However, rather than always having the base size change depending on which element you're styling, rem units are sized from one single font size. With rems, we define the font-size once on the html element, and the rest takes care of itself.
font-size: 1.5rem; /* 24px */
font-size: 1rem; /* 16px */
As you see, the span element renders at 16px-behaving as you would expect, without having to remember where it was nested.
Who's the winner?
I think rem is significantly more straightforward and intuitive, therefore making it a clear winner in my eyes. Unfortunately, it is not supported in versions of IE prior to 9. Or Opera Mini (if you care about Opera Mini). If you're working with older browsers, it might be safer to suffer through ems, but if you're building for modern browsers, I urge you to take rems for a spin.