July 10, 2007 WEBDEV: Scalable, CSS-based page design 
I wish I could credit the actual source of the tip to make em-based font sizes in CSS more usable. I’m not quite sure which it is or where the bookmark is.
Without looking up and citing an official definition, I’ll do my best to explain the premise and application: Using em as a unit of measurement in CSS, as opposed to px (pixel) or pt (point) or % (percent), renders the element’s dimensions or font-size as a multiple of its parent. Thus if the parent’s font-size was 12px and we style an H2 within as 2em, it will be 24px in size.
The tip is to style your body element to have a font-size of 62.5%. Based on browser defaults, this sets the baseline font-size to 10px. Any multiple is now x 10, easy to code. 12px text is 1.2em.
This also works for dimensions on elements. We can code a div 100px x 800px as height: 10em, width: 80em. By coding dimensions as a multiple of the baseline font-size, if the user chooses to increase or decrease their browser’s font-size, the percentage-based font-size on the body element increases/decreases proportionately, as do all our subsequent multiples. This can be applied to every element on the page* to allow the user to scale the entire design using the Ctrl+/Ctrl- (Cmd on the mac, Ctrl/Cmd+0 to return to default) keys on their keyboard. This is a feature supported in most modern browsers.
Take a look and see it applied: http://templates.c77studios.com/new-mjr.html
The container divs, borders, and fonts all scale as you resize the browser’s font size, scaling not just the text within the page, but the entire page proportionately.
I also played a bit with transparent PNGs in the page, placing some of the tree branches in the foreground, over the content, and some in the background. You’ll see that positions and dimensions of those images can also be defined with em measurements, so that they not only scale in size as the browser font is resized, but also in relative position, giving you the effect of zooming in closer or out further.
* I have encountered some instances in IE where decimal em values, such as 81.1em, don’t always render as an exact translation to a px value, in this case 811px. IE also seems to round, while other browsers will seem to render, smaller values, such as 1.25em. If planning on using these techniques, though, this should be avoidable by designing to even-value dimensions before coding.
