Should A Web Designer Care About Relative Font Sizes?
We all know pixel-based font sizes defined in px. But, with the rise of responsive design, it became popular to use relative font sizes defined in a unit called em.
Another unit people are talking about is rem. But why do we need them instead of working with pixels? Should designers care about this?
But, why should I use relative font sizes?
First of all, I think it's good for every designer to know a little bit about CSS3. Therefore it's good to know about font sizing techniques anyway. Especially, if you're designing for multiple resolutions with responsive design. Think of generally smaller or larger font sizes on mobile phones. It takes time to recalculate every pixel value to the new base font size. This is where relative font sizes become useful. With em/rem sizing, you can change just the base font size for a specific viewport to decrease or increase all font sizes, while keeping proportions between the different styles.
What's the difference between px, em and rem?
Pixels are used for absolute font sizes. The unit em is used to calculate the size relative given as a factor (e.g. 1.5em). The factor is multiplied with the font size inherited from their parent elements.
1.5em = Inherited Font Size * 1.5 = ?
This leads to problems, because it might become complex to know the inherited font size from within the CSS. Here it comes to rem. The cool thing about this CSS3 unit is, that it always uses the root (e.g. html) font size as the base size instead of the inherited one. Therefore it is always calculable.
1.5rem = Default Font Size (e.g. 16px) * 1.5 = 24px
I'm not good at math, give me a hint!
The default font size is given by the browser and device you're site is viewed on (e.g. 16px for desktop browsers). This requires you to calculate the correct em / rem values like...
28px = 28/16 = 1.75rem
There is a trick to get rid of the math. If you're working with px in your designs, you can change the base font size to 62.5% or 10px, which results in the following easy 1/10 conversion.
28px = 28/10 = 2.8rem
No calculation needed anymore. If you're familiar with SASS or LESS, there are other ways to calculate the font size while keeping the native default font size like mentioned in Calculating EMs with SCSS.
Does this rem thing work in all browsers?
You're fine with all recent browsers and versions. If you need to provide support for IE7 and IE8, you need to workaround the inexistent rem support by providing both, the font-size in px (as fallback) and the rem value.
html { font-size: 62.5%; } p { font-size: 15px; font-size: 1.5rem; } /* =15px */
