On 15/09/2007, Chris G cl@isbd.net wrote:
The question is basically - what do they actually mean?
There are four ways to set a font size using CSS.
An "absolute size" is one of xx-small, x-small, small, medium, large, x-large, xx-large. Despite the name, these are relative to the browsers default font size, but absolute to that browser config - i.e. a "font-size: small" will be the same size wherever it appears on your page. Typically each step in/decreasing by 20% IIRC from "medium".
A "relative size" is "smaller" or "larger" (again, 20% IIRC). This is relative to the inherited font size for that element.
A "percentage size" is a percentage of the inherited font size, so font-size: 80% is equivalent to font-size: smaller, though there are (were?) some nasties with different browsers in this area (different browsers have different definitions as to what the size is a percentage of, though things may be better nowadays).
A "length" is either relative to something (em, ex, px) or fixed (pt, mm, in, etc.). There's a good explanation of lengths at http://www.bigbaer.com/css_tutorials/css_font_size.htm but TBH I disagree with their conclusions (but then it's an old reference). I wouldn't use relative lengths for fonts, though they are OK for things like DIVs or IMGs, and I see no purpose for fixed lengths on screen at all (they do of course come in to their own for hard copies).
In an ideal world, I much prefer using the relative size measurements "smaller" or "larger". In an ideal world, that is. For example:
== Example begin <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Example</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8"> <style type="text/css"> p { font-size: medium; } /* Redundant */ .smallprint { font-size: smaller; } </style> </head> <body>
<p>This is medium (default)</p> <p class="smallprint">This is smaller</p> <p class="smallprint"><span style="font-size: smaller">This is smaller still</span></p> == Example end
In the above, there's no way that I'm aware of to have a single class that has a "smaller smaller" font size - achieved above by nesting a "font-size: smaller" span in a <p> of class "smallprint". One way around this is to revert to %ages, though this relies on knowing what "smaller" actually means:
.smallestprint { font-size: 60%; } /* Or is it 64%? */
One last thing: always always always validate your CSS - the Web Developer Toolbar for Firefox allows you to do that at the click of a button (you'll need the "Validate local CSS/HTML" option if you're behind a firewall).
Greg