Weighing Our Options
In addition to pixel units, there are several other ways of sizing text using CSS, so let's take a look at our options next. The possible values for the font-size property in CSS are broken down into four groups.
LENGTH UNITS
Length units can be either relative or absolute values. The following are relative-length units: em:
relative to the font size of the parent element ex:
relative to the height of the letter x of the specified font px:
relative to the resolution of the device; the most common unit
Absolute-length units are primarily useful only for print or when the physical dimensions and properties of the browser and/or device are known: in:
inches cm:
centimeters mm:
millimeters pt:
points pc:
picas
RELATIVE-SIZE KEYWORDS
Only two values are possible when we're using relative-size keywords: larger smaller
These values are relative to the current size of the parent element. The World Wide Web Consortium (W3C), an organization that sets Web standards, explains that, for example, if the parent element is set with a font size of medium, using the keyword larger will increase the current element's font size to large. (For more on this, check out [www.w3.org/TR/CSS21/font90#font-size-props].) Think of these values in the same way you would the old-school <small> and <big> elements i85. They are essentially guidelines for size, taking into account sizes that may already be determined higher up the document tree.
PERCENTAGES
Using a percentage assigns a size that is relative to its containing (or parent) element. Specifying a setting of 120% would add 20% to whatever unit was previously specified (if any). We cover percentages (combining them with keywords) as part of our bulletproof approach that follows.
ABSOLUTE-SIZE KEYWORDS
Absolute-size keywords refer to a table of font sizes determined by the browser or device. The seven possible values are: xx-small x-small small medium large x-large xx-large
The W3C suggests to browser manufacturers a 1.5 scaling factor between each keyword, and recommends that scale remains constant no matter what physical size the text renders in. In English, that means large is one and a half times larger than medium, and similarly, small is one and a half times smaller than medium. Their simple syntax is just one of the advantages of absolute-size keywords, which we cover more extensively in the next section of this chapter. Now that we have a complete picture of all the possible values for the font-size property, we can move on and discuss a strategy that provides a flexible base for users and enables them to control text size. |