There are two types of length units: relative and absolute. Relative length units specify a length relative to another length property. Style sheets that use relative units will more easily scale from one medium to another (e.g., from a computer display to a laser printer). - W3C Relative units are:
- em: the 'font-size' of the relevant font
- ex: the 'x-height' of the relevant font
- px: pixels, relative to the viewing device
The .em unit can be troublesome, though theoretically it is ideal. Read the following from the W3C specs and note the potential pitfalls: The 'em' unit is equal to the computed value of the 'font-size' property of the element on which it is used. The exception is when 'em' occurs in the value of the 'font-size' property itself, in which case it refers to the font size of the parent element. It may be used for vertical or horizontal measurement. (This unit is also sometimes called the quad-width in typographic texts.)
BAD JOKE ALERT! What did one .em say to the other .em? Who's your Daddy? Wince all you like now, but hold it to heart when you venture into the realm of .em's! Most of the confusion and difficulties when first using "em" results when the declared "font-size" of the parent element is overlooked. Used correctly, the .em is an ideal font-size unit of measure. Pixel units are relative to the resolution of the viewing device, i.e., most often a computer display. If the pixel density of the output device is very different from that of a typical computer display, the user agent should rescale pixel values. It is recommended that the reference pixel be the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. A single pixel viewed in that reference frame would approximate 0.26mm in length. Pixel units are relative to the resolution of the viewing device... With this in mind, .px may be the most portable unit of measure across devices. Absolute length units are only useful when the physical properties of the output medium are known. The absolute units are:
- in: inches -- 1 inch is equal to 2.54 centimeters.
- cm: centimeters
- mm: millimeters
- pt: points -- the points used by CSS2 are equal to 1/72th of an inch.
- pc: picas -- 1 pica is equal to 12 points.
→ be VERY afraid! Ideally? The very best unit of measure is NONE AT ALL! Let the user-agent determine the display according to the user's preference - BUT! We also know that with most designs, this is not a very practical approach. Personally? I prefer the "mix 'n match" flexiblilty of .em and .px - As user-agents become more "user-friendly" designer sizing will NOT be as potentially problematic OR controversial as it stands now. ;) - papabaer <font> Bad! CSS Good!♠
Example of em font size scaling in relation to the font size of the parent element
This paragraph is enclosed in a <div style="font-size:1.5em"> that has a declared font-size of 1.5em - the paragraph is assigned a font-size of 0.8em <p style="font-size:0.8em">. Note the difference in display in the 0.8em font size paragraph that follows.
This paragraph is enclosed in a <div style="font-size:1.2em"> that has a declared font-size of 1.2em, the paragraph is assigned a font-size of 0.8em <p style="font-size:0.8em">. As these two paragraphs demonstrate, care must be taken when using the em. Both paragraphs use a font size of 0.8em but display differently because they do not share the font size of a common parent element.
So what exactly is an em? The em unit traces its origin to the em box as used in print typography. The actual spatial rendering of an em is dependent on the glyphs of the font used. As such there is naturally a great deal of variance. The "1 em" spatial representation of an upper case letter X of the Courier font will be decidedly different from the rendering of the same upper case letter X of the Verdana font.
Though at first thought it may seem confusing it is not. An "em" unit or "1 em" displays at the default or "base" size for a rendered font glyph as contained within an HTML element where the default display is assigned by the user agent. Generally speaking, text styled with a font-size 1 em {font-size: 1em;} will display as if no size declarations were assigned. Font-size "1 em" headers, sub-headers, paragraphs and other user-agent display controlled elements will all render at the default user-agent-determined settings.
Some designers feel the "default font-size" assigned by user-agents is too large. Declaring a smaller than "1 em" font-size for body text is a simple thing. A popular "em-size" for body text (used here!) is {font-size: 0.8em;} which generally renders as the equivalent of 11px (11 pixels).
In conclusion, pixel (.px) sized fonts offer reliable control and consistant scaling across devices. A 12px font size will always retain the same relative scale to a 16px font when displayed on the same device and active resolution. The em unit scales consistantly as well and has the added advantage of allowing the end-user to adjust the text size through settings available on a particular user agent.
Em is used almost exclusively throughout this site because of its accessbility (text-resizing) advantage. The em is easy to work with as long as you recall the punch line from the earlier bad joke. Just always remember to ask each em, "Who's your Daddy?" and you and the em will do just fine! - Jack "Papa" Baer 2002/05/17