Relativity

For a long time I’ve been trying to make the transition from sizing with pixels to the relative world of ems. My progress has always been hindered by the fact it normally means you need to work with a calculator by your side whilst dealing with ridiculous fractions, coupled with the fact I have the patience of a 5 year old.

Why Bother?

Good question, why bother with relative units? Most browsers these days will scale up pixel-based designs, treating them as if they were relative.

A reason people give for using relative units is the fact you can change the base font size and everything scales up or down with it. So as your viewport gets smaller you can use a media query to scale everything down. But with the advent of css pre-processors like sass, this is no longer a valid argument and can easily be achieved using pixels.

The real reason is that a pixel no longer means one physical pixel, and with more and more hi-dpi displays in the wild this is becoming more obvious. Strangely enough a pixel is actually a relative unit, albeit to the resolution of the display. If it wasn’t, pixel-sized text would appear tiny on a high-dpi (e.g. retina) display. The pixel has lost it’s meaning so we need to adopt a more appropriate unit.

REMS

I’m a little late to the party, but I’ve recently been introduced to the rem (root em) unit. With most browsers now supporting rems, thing’s have become a hell of a lot easier. Everything you size with rems is relative to the root element, rather than with ems where each size is relative to the parent element, which causes major brain-ache when putting margins or padding on text (and also maintaining a baseline grid).

With rems this means we can set the html font-size to 62.5%, as shown by Jonathan Snook, then by dividing each pixel size by 10 we can get the equivelant rem size:

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

This is great, but we are still working around pixels, if we are going to make the transition we might as well put rems first. Fortunately we now have css pre-processors like sass to help us out.

We can use sass to calculate our pixel to rem conversations in-line. So if our html font size is back at 100%, and we wanted to convert 24px to rem we just divide it by 16 (the default pixel size):

h1 { font-size: 24 / 16 + rem; }

Because support for rem’s (unlike those smug ems) isn’t quite widespread enough for the time being we still need to provide a pixel fallback. We can simplify this process with a sass mixin

@mixin font-size($FontSizePixels) {
    font-size: $FontSizePixels + px;
    font-size: $FontSizePixels / 16 + rem;
}

We feed the mixin the pixel font size, and in return it first gives us the pixel font size for backwards compatibility, then the rem size which will override it if supported by the browser.

EMS vs REMS

There is the possibility for both to work in unison, using rems for type and ems for padding/margin relative to the font-size could prove quite useful. Although I haven’t tried to get my head around how it would be possible to stick to a baseline grid with this method.

Using rems is definitely the most accessible method (especially for us designers) for moving on from pixels and sizing relatively.