Good web-designers care about mobile font-sizing. Huge fonts on a desktop might look great, but on a mobile phone where you’re allocating a character per line, you’re gonna have a bad time.

DEMO

Sizing typography sucks. Sizing it over and over for various devices sucks more.

The Old EM Technique

One of the biggest pro’s of putting in the work on EM sizing techniques is that you can modify one container and all the font sizes below it adjust accordingly. That’s pretty handy when you’re dealing with media queries. But what happens if you want to adjust the body copy of a container but you don’t want to mess with any of the elements within it? You have to readjust all of those EMs — which is tedious or nightmare-ish depending on how deep you need to go.

REMs to the Rescue

REMs came along and made this a bit better: now we could attach font-sizes to our <html>’s font-size.

A Responsive Match Made in Heaven

Simply adjust the font-size of your html selector for each breakpoint and enjoy the benefits of having huge text on huge screens, medium sized text on medium screens, small text on mobile — you get the point.

And if you screwed up and want to adjust a font-size for a particular element, go ahead, it won’t hurt anything else like EMs will.

Browser Support

IE9+ out of the box. IE8+ with Snook’s px fallback technique, but that can get really tedious and your fonts aren’t relative for IE8, so I think it’s a better solution to conditionally load the Respond.js and REM.js polyfills and forget about maintaining pixel fallbacks.

Caveats

To my knowledge all REMs are based off the html selector’s font-size, so you can’t target specific areas to adjust in specific ways. It’s a minor tradeoff and I’ve never needed to adjust the font sizes for an area without wanting to adjust the font size for the entire app. Your mileage may vary, in which case, you can always go back to writing/maintaining filthy hobbitses EMs.

~ Cory (@ccccory)