The main reason is to accommodate varying screen resolutions and protect your site from going haywire on different monitors. First, IE6 and IE7will not allow users to resize text that has been sized in pixels. Face it, your readers will need to resize text at some point for a whole host of reasons. They could have bad eyesight, or they could be using a super hi-rez laptop monitor, or they might be be giving a presentation.

My transition to EM’s from Pixels has been one of experimenting to learn the methods so I can code in EM’s with the same flow that I use with Pixels. I’m at the point now where it’s easier to code in EM’s because I know what the result will be and I feel more in control of the typography.

EM is taken from the print world. Typographers use it as a unit of measurement for horizontal spacing. It’s a relative unit of measure: 1em is a distance equal to the text size. For example, in a 10px type, an em is 10 pixels, in 16 pixel type it is 16em. Basically 1 em of padding is equal to the text size. Confused? Don’t worry about it. Let’s code.

Let’s code for EM:

First. let’s set the stage with a browser set to “medium” text size. This makes the default pixel size for the page 16px. Now let’s reduce the overall size of the text by 10% by setting the font-size in the CSS to 62.5%. This makes the corresponding font size 10px.

16 x .625 = 10

Now that we have a round number we can see how to equate EM’s with Pixels for this exercise.

16px = 1.6em
8px = .8em
10px = 1em

Don’t worry about all this math. I hate math. What is simply illustrates is a way to change your thought patterns from Pixels to EM by using a multiple of 10 as a reference.

What about H tags?

This is where I love EM. As you might already know, H tags are key to good SEO discipline. The bots love seeing a page with a correct title tag structure:

H1 followed by H2 followed by H3 followed by H4 … and so on.

This issue is that creatively we often need to have different sized title tags. but who wants to head a page with an H4 tag? No me. Using EM, we can easily control the screen size of the font while keeping the SEO hierarchy we are looking for.

Using our medium text setting above, the default size for our font is 10px.


H1 {font-size: 2em} /*pixel equivalent- 20px */

H3 {font-size: 1.5em} /*pixel equivalent- 15px */

H4 {font-size: .9em} /*pixel equivalent- 9px */

How about Changing the body text?

Since we’ve set the overall body text at 10px, the body text will default to 10px. But what if you want the text to be 12px? That’s easy enough.

Change the global “p” style or a defined style to 1.2 em

12/ 10 = 1.2em

p {font-size: 1.2em}

or

.maintext p {font-size:1.2em;}

The same rules apply to List values (UL, LI tags), and even table cells, But don’t use tables, CSS is so much better!