Tag Archives: rem

Font scaling

PX vs EM? Neither!!! Heard of REM?

I’m starting a new project at my client and we have really been given almost complete free reign over what technology and styles we want to use. it’s lovely.

The one consequence of it however is that you have to make all the decisions on what tools and styles you are going to use… and if you choose poorly you can only blame yourself.

Scouring the web for the latest and greatest on best practices, I came along this CSS genius which talks about the most obscure metric you-never-heard-of. rem.

The problem with PX is that pixels don’t resize well on old browsers and containers don’t grow well.

The problem with EM as a CSS measurement is that if you have a child item with EM with an EM on the parent, the child will either shrink or grow as you nest more deeply. There are simple hacks for it, but I’ve never been happy with them.

What is nice about REM is that it works just like EM, but the scaled size doesn’t reapply as your child items nest further down.. they use the root element’s (usually html) size as a baseline and scale off that. Everyone wins!

Here is a cool hack/example:

html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* =14px */
h1 { font-size: 2.4rem; } /* =24px */

Read this amazing article for more info over at snook.ca

NOTE: You can also do some cool font vertical rhythm tricks if you’re using Sass, but that is for another post, another day.