Angus Pearson

It’s pretty arbitrary which unit we Web Designers and Developers end up using - while it may seem the pixel, px is founded in the reality of how displays work and therefore is effectively the quanta of scale on the web, this isn’t actually the case.

So, what’s actually wrong with the pixel? Well, it’s not intrinsically flawed, but that doesn’t mean there aren’t better alternatives. For one, it’s misleading to think of it as representing a single physical pixel - it’s actually an angular measurement, relative to the resolution of the viewport.

Furthermore, Responsive Design has almost completely eclipsed the two-site mobile/desktop design pattern, so it’s likely that you’re going to make use of @media queries somewhere in your stylesheets. As designers we’re aware that our content needs to smoothly transition across platforms, looking good on both a 3” screen and a 30” screen. We’re mostly concerned with the transition from portrait, touch driven experiences to mouse driven landscape desktops and tablets, using grid systems and responsive column systems to re-arrange our layouts, but type often doesn’t get the attention it needs, being too big on mobile and tiny on a massive iMac.

Enter the em, which is simply defined as the width of the capital M in it’s element, and the closely related rem, the width of a M in the body’s font size.

Cascading Value

The Em’s killer feature is that it is relative to the font size of it’s parent - meaning scales cascade recursively. Due to inheritance, ‘1em’ is the inherited font size from the parent element, so 1.2em is 1.2 times that. This makes more sense if we use an example:

one   two   three   four   five
Each span's em is successively 1.2 times bigger 
<span style="font-size: 1.2em;">
  one
  <span style="font-size: 1.2em;">
    two
    <span style="font-size: 1.2em;">
      three
      <span style="font-size: 1.2em;">
        four
        <span style="font-size: 1.2em;">
          five
        </span>
      </span>
    </span>
  </span>
</span>

Cascading values are particularly useful for maintaining proportions between elements, so margins and padding keep the same amount of negative space around objects even when scaled up or down. If we don’t want to have our values scale, and always be the same, the closely related rem exists which is always relative to the global <body> font size.

This cascade had one really nice effect: If we use em and rem everywhere, we can responsively scale the entire page, text, divs, borders, everything just by changing the body font size:

body {
    font-size: 10pt;
}

@media(min-width: 480px){
    body {
        font-size: 12pt;
    }
}

@media(min-width: 1080px){
    body {
        font-size: 14pt;
    }
}

Responsive Text

Similarly, if you build a set of styles and classes that look good, you can use simple rules to scale all of those up, without having weird things happen to spacing or having to rewrite a ton of rules. This makes responsively and contextually changing font sizes easy.

M
M
M
M
The same class, applied recursively demonstrating both em for padding and rem for the white border.

There’s a fair amount of research that’s gone into optimising the readability of content; 50 to about 75 characters per line appears to be ideal, and pushing past that it quickly becomes very hard for the reader to follow your text. Many well designed sites whose focus is textual content, such as Medium.com and The Guardian (2016 Webby Winner) are designed so their flowing prose falls well within this range. Designing so that this is always the case using px/pt is not easy, as piece of text you want to scale needs it’s own set of media queries and breakpoints. With em it’s pretty simple:

article {
  font-size: 1.2em;
}

This easy scaling is also great for accessibility, as a user can change the browser’s default font size and our interfaces will scale accordingly in their entirety, instead of just the text blowing up and overflowing.

We can do even weirder stuff using the rarely-used but powerful vh, vw, vmin, vmax viewport-based units to decide on the base reference that all out em values are calculated from. This approach is pretty new, with the viewport units arriving with CSS3 but it’s now possible to have a continuously responsive design as well as the discrete breakpoints we currently use.

Gotchas

Of course, ems aren’t completely flawless. You’ll struggle to copy-paste someone else’s styles into yours and have it work perfectly the first time - the base font sizes used for cascading might be different (though at least the proportions will be in-tact). Support for ems is good with modern browsers, of course going as far back as IE8 will give you problems.

The em vs px debate continues, with periodic shifts in favourability between the two, though it should be noted that Bootstrap 4 has switched to ems & rems, citing improved responsive type. With bootstrap’s wide use and popularity, ems seem set for a big increase in usage.

Also published on Medium

Edited 2016-08-08