Are you still using PX for font sizing?

09 November 2012

Ah yes, the same old font sizing issue... PX or EM, support Internet Explorer or not, blablabla. But if you, like me, have always ignored this debate a little, you might wonder what the fuss was all about. Let me remind you what were the pro's and con's of using PX or EM.

PX

Pros: consistent sizing. Every browser and device interprets this value the same. 10px is 10px. Period.
Cons: Internet Explorer didn't allow resizing PX defined fontsizes untill IE9. It supported scaling, but it scaled the whole page, you could not adjust font size when defined in PX.

EM

Pros: adjustable font size in IE! and with the font-size: 62,5% trick in the body declaration it was even fairly easy to use (1.2em then equaled 12px). You can change all font sizes at once by changing the body font-size.
Cons: em-based font sizes add up on child elements. If you define 1.4em on an LI element, the first elements become 14px, but children get a 27px value... that can cause serious unexpected behavior. To avoid this one should define a 1em font-size on all child elements.

What now?

So PX suck and EM suck maybe even harder. What should we do then? Well, there's a new kid in town and it's called REM and that's not a rock band, but another way to define font size. It stands for "Root EM" and it works the same as EMs, but with the difference that this unit isn't relative to its parent like EM, but to the root element (HTML). This solves the problem of inheriting font sizes by children and all problems caused by that. That eleminates all cons of the EM element and leaves us with exactly NO cons. Wow!

Can I use it in my work right now?


Ah yes... browser support. "look at this fancy stuff! It doesn't work on any browser, but look what the future has to bring!".... actually, this isn't one of those supercool bleeding-edge techniques. Well, it is supercool, but it is supported in most browsers!

Browser support for rem




This isn't a real problem. You can easily fix this by defining a PX based fallback for every REM value, but you can also use a supercool polyfill that automatically calculates and adds PX values in browsers that don't support REM yet (IE8 and earlier).
You must have JavaScript enabled to use this form!

Leave a comment!

  1. Your mail is safe with me. It's only only used to display your Gravatar image!

3 comments

  1. Gravatar

    Josh

    03 September 2014

    Thanks a lot for this very useful hint. I'm diving into accessibility since a few months, and it's astonishing how many pitfalls there are, and also how many solutions exists for them - you only have to know about them; the earlier, the better.

  2. Gravatar

    Johan

    12 November 2012

    Thanks for the addition!

  3. Gravatar

    Hans Christian Reinl

    12 November 2012

    When using preprocessors such as Sass or LESS there is the possibility of adding a mixin to polyfill missing rem-support with px-based values. I use <a href="https://github.com/drublic/SASS-Mixins/blob/master/rem.scss">this mixin</a> which is basically a copy of the mixin Divya Manian used while we developed HTML5 Please API (at least this is the first time I saw it).