"Isn't the font tag depreciated?" he asked
Depreciated and deprecated! "Well, then what is the best replacement?"
http://www.bigbaer.com/css_tutorials/css_font_size.htm
The W3C CSS2 page employs .em and % (percentage) for font-size management.
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.
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)..
Example of inline CSS fontsize[edit]
Using relative em units. This is a lot cleaner than using <font>. You cant write valid XHTML (strict) using <font>, use this instead (or an external stylesheet if making your own webpage, but we were talking about using it in wiki pages).
<div style="font-size:0.7em">Blah</div>
<div style="font-size:1.0em">Blah</div>
<div style="font-size:1.2em">Blah</div>
<div style="font-size:1.5em">Blah</div>
<div style="font-size:2.0em">Blah</div>