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/fonts.html#font-size-props.)

Think of these values in the same way you would the old-school <small> and <big> elements in HTML. 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.