ROOT EM! Using CSS3 "rem" Units for "Elastic Pixels"

Oh look, 10 x 10 pixel box... Or is it?

Oh good, more rectangles!

Buttons anyone?


Zoom:


Ummm... Elastic Pixels WTF?

I love working in px units.

But alas! px unit's don't scale... So we're stuck with the complexity of % and em units right?

Wrong.

Say hello to rem

Hello rem

CSS3 introduces a few new units, including the rem unit, which stands for "root em" (or "font size of the root element").

Jonathan Snook, has a great explanation of Font Sizing with rem.

Enter "Elastic Pixels"

By scaling the "root em" to 1px (a 1:1 em-to-px ratio) we get a "new" kind of unit... ELASTIC PIXELS!

By increasing the single "root em" font-size, ALL our elastic pixel's increase!

Zoom Zoom

Zooming isn't as easy as it looks... John Resig (of jQuery fame), explains Sub-Pixel Problems in CSS...

To cut a long story short; sticking to whole numbers avoids browser rounding bugs.

1px * 2 = 2px - magic!

What's the use of 2x zoom?

More reading... High DPI Web Sites and Designing for iPhone 4 Retina Display: Techniques and Workflow

Skipped the reading? Me too... Basically, iOS resolutions:

The iPhone 4 has -webkit-min-device-pixel-ratio: 2 ...yep that's 1px * 2!

Adaptive Web Design

Screen DPI (really PPI) is something the Responsive / Adaptive Web Design community should care a whole lot about. With "Elastic Pixels" we might just be able to build layouts with the simplicity of px's and scalability of em's. W00T!

rem Support and Progressive Enhancement

Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9! ... Please help test mobile and other browsers here.

By declaring rem's after px's in the CSS this example - should - degrade gracefully to the px unit when rem is not supported.

Shameless plug

Chris Jacob: @_chrisjacob