Ems versus Percents
Recently, a post came through on the Yahoo! Dreamweaver list about ems versus percents for sizing in CSS. Basically, the question was whether or not there was actually a difference between them and whether or not it mattered which one you use. This comes up quite a bit, and I can completely understand how it can be confusing, so I thought I'd share my thoughts on the issue.
I want to start with an explanation of what, exactly, an "em" is. An em is a unit of measurement defined as the height of the given font; specifically, it is (at least in theory) the height of a capital "M" in the font. In practice, that means that one em = the font size, so if you have your font size set to 16 pixels, 1em = 16px. If your font is set to 12 points, then 1em = 12pt.
However, in 16px text, 100% is, obviously, 16 pixels. If your font is at 12 points, then 100% is 12pt. And that's the root of the question: if 1em = the size of the font, and 100% = the size of the font, then what's the difference?
The answer is that when dealing just with font sizes, there isn't a difference. If you have your body's font set to the browser default (16px for most browsers), then there is no difference at all between setting your h1 to 120% or to 1.2em. They are identical.
Box sizes, though, are a different creature altogether. Percentage widths on a box refer not to the size of the font, but to the browser window. So if I say that I want my "mainContent" div to have a width of 80%, I'm saying that I want it to span 80% of the browser window, however big that may be. But it's also legal to say that I want my "mainContent" div to be set in ems. So I might decide to set the div to, say, 48em. And here's where the power of ems comes in. Assuming that I'm using that browser-default 16px, then a box with a width of 48em would be 768 pixels wide. But ... and here's the trick behind using ems ... if you then resize your *text*, the box will also resize.
Why, one might ask, would you want to do that? Quite simply, for accessibility. It's not about YOU, the designer, resizing text. Rather, it's about tying your design to the browser's resize text functionality - an important accessibility tool.
You can actually see this in action. Using Firefox*, visit both cnn.com and yahoo.com. On CNN, resize your text (View -> Zoom -> Zoom Text Only, then View -> Zoom -> Zoom In or ctrl-+)**. Then do the same thing on Yahoo's homepage. What you'll see is that CNN's layout breaks pretty quickly, since their layout is pixel-based, but Yahoo's does not - their boxes expand with the text.
*You need to use Firefox for the above example because IE's text resizing feature only allows for resizing if the font size on the page is set in percents or ems, and CNN's is not, so the text will not resize.
** Until very recently, Firefox defaulted to only "zooming" text when using ctrl-+ and ctrl--. I'm not precisely sure when they switched to zooming the whole page (including graphics), which IE has been doing since version 7 was released, but I know that it was very recent - one of the dot releases since 3. I'm personally not a fan of zooming the whole page. If I'm on one of those blogs designed by a moron who is using 3 point text and I need to make the text bigger to read it, I don't want the whole page to expand to the point that I have to scroll left and right and to the point that the images pixellate, but the browser designers forgot to ask my opinion before they changed the feature.
So I hope that helps explain things a bit.
By the way, in DW CS3 and CS4, the starter pages contain a bunch of layouts called "elastic" that size their boxes using ems for exactly this reason, so you might try playing with them to see what happens. For example, change the font size in the CSS for one of the sidebars and watch what happens to its width. The book "Mastering CSS Using Dreamweaver CS3" (or the CS4 version) has a chapter on using these layouts. (Stephanie Sullivan, one of the co-authors of the book, actually created all of those starter pages, so she knows of what she speaks.)


