Determining a unit of measurement to size our text can be a topic of heated debate, even in this day and age.Unfortunately, there are still various pros and cons that make the various techniques less desirable.It's just a matter of which less-desirable is most desirable.
In the early days of the web, we used pixels to size our text. Unfortunately, users of Internet Explorer—even in IE9—do not have the ability to change the size of the text using the browser function of increasing or decreasing font size.
For those concerned about the usability of their site, this may be a big deal. That whole inability to resize text in IE has been a continuing frustration. Richard Rutter's article, How to size text using ems, was probably the first I read of this approach, way back in 2004.
Recent versions of IE include zooming, which increases the size of on the page—a feature that is also available in most other mainstream browsers, too. I, personally, have been of the camp that px-based layouts provide the consistency I prefer and users have enough tools available to adjust their view that accessibility is less of a concern. (Wow, it has been almost seven years.) The technique modifies the base font-size on the body using a percentage.
This adjusts things so that 1em equals 10px, instead of the default 16px.
To set the font-size to the equivalent of 14px, set it to 1.4em. These issues can be worked around by declaring any child elements to use 1em, avoiding the compounding effect.
The problem with em-based font sizing is that the font size compounds. The compounding nature of em-based font-sizing can be frustrating so what else can we do?
CSS3 introduces a few new units, including the rem unit, which stands for "root em".
If this hasn't put you to sleep yet, then let's look at how rem works.
The em unit is relative to the font-size of the parent, which causes the compounding issue.
The rem unit is relative to the root—or the I'm defining a base font-size of 62.5% to have the convenience of sizing rems in a way that is similar to using px.
But what pitiful browser support do we have to worry about?