During a recent pair programming session, I came to the tough realization that I really know nothing about CSS. Granted, I can add in a div tag here and there, and yes, I can make a responsive page using Twitter Bootstrap like no one’s business. But, what do I really know about design? Not as much as I thought I did.

I figured out that this was the case when the designer I was pairing with started using ems and rems. I should probably preface this and say that I have always been a pixel kind of girl. I was formerly of the mindset that you can have any font size you like – as long as it’s defined in pixels.

But, after doing a bit of research, I found that ems and rems actually have an interesting history behind them, and are super helpful when it comes to elastic layouts and responsive design.

wait. there are different types of layouts?

Yes! Trying to make your web applications responsive can be a nightmare, and kind of feels like this:

Designers have long debated what kind of page layouts are the best solution for this problem. The most interesting one is the elastic layout, which combines fluid and fixed layouts, and relies completely on sizing all the elements on a page by using ems. This is a pretty popular layout amongst designers and developers alike because, when it’s properly implemented, the entire page grows or shrinks in proportion with the user’s window size.

By now, you’re probably thinking to yourself, Okay, that’s all great, but dear lord please tell me what ems and rems are!

Well, your wish is my command.

Getting down with ems

An em is nothing more than a unit of measurement. Ems have actually been around for awhile and date back to the early days of typography. The em was originally a point of reference to the width of the metal block used to make a capital “M” in any particular size of typeface.

But for our purposes, we only need to think about ems in the context of CSS, which is a vertical measurement. Jon Tan, designer and typographer extrordinaire, describes em units pretty clearly:

“One em equals the vertical space needed for any given letter in a font, regardless of the horizontal space it occupies. Therefore:
If the font size is 16px, then 1em = 16px.”

Protip: most popular web browsers have a default font size of 16 pixels. So, if you wanted to have a font size that was half that size, or 8 pixels, you could specify that in ems as “0.5em” (in other words, 50% of the original font size).

But do i really need to use ‘em?

You don’t have to use ems. Case in point: I’d never used them until a week ago. But using them can save you lines of code. The most important thing to remember about ems is how they are different from pixels: ems are relative, pixels are not. This is especially helpful when you have nested elements.

Imagine you have a file that needs to have four different font sizes:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.regular_font {
  font-size: 14px;
}

.big_font {
  font-size: 28px;
}

.med_font {
  font-size: 21px;
}

.small_font {
  font-size: 7px;
}

The regular_font class is the parent type, from which the three other classes will inherit. This code is perfectly fine, but imagine that you need six different font sizes or, for a larger app, ten or twenty. And what if you decided at the last minute that you wanted to make the parent element 16px, rather than 14px? Since pixel values don’t inherit, you’d have to go back and change every single font size to make all the styling to scale. No bueno, amirite?

The same styling could be rewritten using ems, like so:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

.regular_font {
  font-size: 1.0em;
}

.big_font {
  font-size: 2.0em;
}

.med_font {
  font-size: 1.5em;
}

.small_font {
  font-size: 0.5em;
}

All of the font sizes now inherit from their parent element, which means that they will scale (think perecentages) depending on the size of the parent element. If you wanted to change the styling of all these font sizes, you’d only actually have to change the parent element. Muy bueno, si?

Okay, Okay – but what’s this rem nonsense?

Rems are almost the same as ems, except that there’s no parent element that’s defined. Instead, all the font sizes are based on the root html element. Don’t freak out – all this really means is that you define a font size on the html element, and then all other elements will scale in font size relative to that.

In this example, the .small_font class inherits directly from the html parent element:

1
2
3
4
5
6
7

html {
  font-size: 1.0em;
}

.small_font {
  font-size: 0.5rem;
}

But, but…I’m really bad at math!

Don’t worry: there’s an app for that. More specifically, a website that helps you calculate your ems. You can head on over to PXtoEm.com, and play around with pixels and ems and become a styling wizard.

Now, GO FORTH and style away!

tl;dr?

• Ems are relative units of measurement, and pixels are not. Rems are basically just like ems, except that they inherit from the html element directly.
• You don’t have to use ems, but they can be helpful. A good way to start is by using pixels in development, and then assess whether your application actually needs to be responsive before heading over into em territory.
• For more clarity on ems vs rems, check out Jeremy Church’s awesome post on exactly that.