Why Ems?

I’ve long sized text only in px. Even when it was patently uncool to do so – the days in which smart people cared about the fact that text set in px couldn’t be resized in IE 6-8. I’ve switched over to using ems now. I haven’t moved every single project over yet, but my mind has switched. Why? I finally found some compelling reasons that I now grok.

You’re going to need to change font sizes for different screen sizes

The same size body type that looks good on a phone sized screen does not look good on a widened desktop layout. Look at Trent’s site for a good example of this. Text should be a bit bigger on large screens.

Let’s say you look through your stylesheet and find 50 different font-size declarations in px. That’s 50 places you need to change that font size through a media query when the screen size changes. That’s 50 suck points.

First of all 50 places is too many for all but the most enormous of websites. But let’s say those 50 places were all in em. Now through media queries you only need to change the font-size on the body and that change will cascade all the way through the document and adjust the sizes accordingly.

body {
  font-size: x-large;
}
@media (max-width: 1000px) {
  body { font-size: large; }
}
@media (max-width: 500px) {
  body { font-size: medium; }
}

It’s arbitrary anyway

Devices do try to normalize the physical size that “1px” is despite their screen density. What a funny thing. A pixel has nothing to do with a real pixel on your screen. It’s actually an angular measurement.

You might feel more comfortable sizing in px because you’ve done it longer, but that doesn’t make it more intuitive. You’re picking a value that looks right on the screen. What does it matter if it’s 1.35 or 17?

Relative Space

Let’s say you are going to use image icons in your design. You want to apply them to headers at will. You want the size of those icons to be commensurate with the size of the header. You can’t reserve space like padding-left: 20px, because that will always been 20px regardless of the font-size of the header. If you set that padding in ems, you can reserve an amount of space relative to the current font-size of that header.

Relationships

If you go all-in with ems, you can start setting things like margin and padding with ems. That means when you notch that body font-size down, spacing around your site also notches down. This ties the design of your site to the typography, which is some major ying/yang #synergy action.

Minor Blahs

There are still a few obnoxious things with ems, like the cascading. If you decide that list items should be font-size: 1.1em and then have nested lists, it will cascade and grow the font size of the child lists. You probably didn’t want that. You can fix it with li li { font-size: 1em; } but that’s the kind of thing that can grind your gourd. That’s where rem’s can come in, but that can be tricky as well since there is less browser support (IE 9+).