How big is an em?

You can’t use the em as a unit in most pixel-editors. If we use these types of editors in our design process, this means that we have to calculate em-sizes from pixel-sizes. And if we do that, an em seems like a terribly complex unit. Pixels use the simple metric system, which is easy to use. We all know how to count from 1 to 10. If we calculate em-sizes from pixel-sizes we’re suddenly working with multiples of 16, instead of 10. Which is much harder.

An em is a unit, just like a pixel

If you ignore the idea that 1em is equal to 16px the em is suddenly pretty easy to use. It turns into an easy to understand decimal unit. A font-size of 1em is nice for body copy. A font-size of 1.2em is bigger. A font-size of 0.8em is smaller. How much exactly? 1.2 times bigger, and 0.8 times smaller. Exactly. I don’t know how many pixels this is. But that doesn’t matter. Type it into your text-editor, open it in your favourite browser and just look at it. Is it big enough? No? Try 1.25em. Or 2.9em. Or 1.414em if you’re a classically trained graphic designer. This is exactly as hard as understanding how big a pixel is.

How big is a pixel?

When I started creating stuff for the web I had no idea how big a pixel was. But after measuring stuff in Photoshop for years I understand it better. I know how wide a 300px column is, approximately. And I know how big a font-size of 32px is, approximately. I learned the size of a pixel by using it. It’s the same with other units like the em. You’ll learn. Just use them.

A handy table

But, to help you on your way, here’s a handy little table with some often used dimensions with behind it their em and pixel values. Hope it helps.

A table with common screen sizes, and other sizes often used on the web. You could work with 10em columns to keep your responsive design maintainable and modular. Which is easier to work with than multitudes of 160px.
What is it? Size in ems Size in Pixels
CSS width of an iPhone 5s 20em 320
CSS width or height of many phones 30em 480
Width or height of many Android phones 40em 640
Width of the ancient web
Width of the medieval web 50em 800
Width or height of many Android phones 60em 960
Width of the 960 website template (the old web)
Fairly common screensize 80em 1280

Typography

I thought about creating a table that compares font-sizes in em with font-sizes in px, but I think an easier and better way to work with em is by using tools like Type Scale or Grid Lover.

Comments

    • Stomme poes
    • #

    I’ve traditionally used ems and not had issue with them… until I started working somewhere that used Javascript now and then to adjust sizes. By default the numbers in there were px.

    I think this is the only place where I’ve needed to attempt any sort of conversion, though even then I just eyeballed it. There are differences between browsers and OSes, but I’ve gotten that with px too, if text is involved.

  1. I like working with ems for fonts, margins and paddings. As well breakpoints. I use a sass mixin that converts the pixels to ems for me.
    In my stylesheet I still have the reference to the pixel units.