This article was written in 2014. It might or it might not be outdated. And it could be that the layout breaks. If that’s the case please let me know.

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.