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.
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
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.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.
|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|
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.