Font Sizing with REM

by Tom Kenny (@tkenny)

I read this article by Jonathan Snook way back when he posted it and thought it was great but never got round to actually using it.

It looks really simple to use:

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

I’m fed up with constantly maintaining em compounding sizing issues so I’ll finally be trying this method for future projects.


Improve Your Eye for Great Design

Learn why the best designers make the decisions they do to design successful websites people love in this FREE eBook with 3 in-depth case studies. I’ve spent hours studying what makes these websites amazing, so you can use what works and focus on your design work. Subscribe now to get it immediately.

100% privacy. No spam. Completely free!

by Tom Kenny

I’m a freelance web designer and front-end developer with over 7 years of experience designing for the web. Follow me on Twitter here.