Using the Em

Why use ems?

I prefer using pixels...almost all the time. That's why I was naturally resistant to using ems when designing websites. But the more problems I ran into sizing websites for different browsers, especially for mobile devices, the more I began to contemplate the usefulness of using ems. So why use ems? The most primary reason to use ems is for universal resizing, Internet Explorer simply will not allow readers to resize text that has been sized in pixels. If your content is good enough, maybe someone will see the need to present your work, on perhaps an overhead projector. The most common problem that is presented nowadays is the problem of resizing for mobile devices. Using pixels works good, but using ems is a more responsive, flexible, and maintainable method.

The problem with ems still remains however...how do you use them? Luckily, there is a work around for the hard core pixel users. This simple line of code: BODY {font-size:62.5%}. This reduces all pixels on the page to a pixel size of 10px. Why 10px? Because it becomes almost elementary to think in terms of ems. For example, 1em is 10px, 5em becomes 5px, and 1.2em is 12px. There's a little math to do when it comes to inherited element sizes. There are two problem solvers when it comes to resizing the font-sizes in nested elements.  1. Child pixels /parent pixels = child ems. Example: If our BODY's pixels are resized at 10px and we want the main div's (the child element of "body") content to be at 12px. Then you would use the formula: 12px/10px = 1.2ems. Sprinkle your css file with a little css reset to make sure all deeply nested items all maintain an em size of 1em and you're good to go. For a better explanation of em usage try using Clagnut's Blog or a technical W3C explanation. Works like a charm :).

Add comment

Security code

For the quickest response, please use our request for quote form.

Request a Quote

(312) 423-7955

222 W Merchandise Mart Plaza, Suite 1212 Chicago IL 60654