The Amazing Em Unit

This is some paragraph text, specified in CSS as "1.33em". This means that if you have chosen a 12-point or "medium" font as your default (i.e., for body), then this should measure 16 points. If your display is at 96 dpi (the Windows norm), then this will equate to 21.33 pixels. For reference, this sentence is specified at 21.33 pixels. With the same parameters, a (hypothetically) good Mac CSS implementation would see it at 16 pixels, like this sentence. In any case, the object below maintains proportionality with the text, regardless of font size or platform, because the height and width of the object are specified in em units as well. Change your font size and observe. Cool huh? [What? You say it doesn't work? Well of course not - there are no complete CSS implementations yet! Do complain.]

If you have Flash and a proper CSS implementation, this object scales nicely to remain in proportion with the text in the font size of your choosing. This particular GIF image and text are just placeholders to demonstrate how the OBJECT element degrades gracefully.

This coding scheme should permit specification of the size relations of all text and objects in a resolution-independent manner, with the font size chosen by the user as a base. If the user (or a script), changes the value on body, then all objects should scale up or down linearly, like PDF except with reflow and no fixed pages.

The font size chosen by the user as a comfortable default (1 em) provides more truly useful information about the rendering environment than all the resolution-sniffing, window-querying, "open-this-wide" logic you can throw at the problem. Between CSS em units for resolution-independence, and percentages for aspect independence (like the margins on this page), you've got what you need to do rich, dynamic visual design that's highly degradable, maintainable, user-friendly, and fat-free!