an em?big is
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.