Similar to the printed medium, varying the size of text on a web page creates visual interest and gives the user cues to the relative importance of various content on the page. Font sizes are specified using the font-size property.

The general syntax for the font-size property is shown below:

selector { font-size: measurement; } selector { font-size: keyword; }

The value of the font-size property can be either relative or absolute. Relative values are based on the font size of the parent element, while absolute values are independent of the size of any other elements in the document. Each method has its advocates, though you may find situations where one method works better than the other depending on the audience and the web site's purpose.

Before we get into the font-size property, we first need to examine how fonts are sized. The actual relation of the font-size property to user agent display is determined by the font's designer. This relationship is specified as an em square (also known as an em box) defined by the typeface design.

However, the rendering of a font is dependent on the relationship between the character design (known as glyph) and the em box. Depending on the typeface design, an em for one font may be noticeably different than the em for another font of the same size. Thus, a "1 em" upper case letter M in the Courier font will be decidedly different from the spatial rendering of the upper case M of the Verdana font.

Let's begin our discussion with font-sizing keywords.

Keywords

Keywords refer to the following nine designations:

Examples

p.finePrint { font-size: small; } p.headLine { font-size: x-large; }

All keywords are technically relative sizing keywords. Keywords adjust text in relationship to the default font size defined by the browser.

Most browsers use a default font size of 16 pixels.

The medium keyword corresponds to the default font size of the HTML root element. This is typically 16 pixels for browsers, but the user may adjust this in the browser options, or via the view menu. The first seven keywords, xx-small through xx-large, are sized relative to the MEDIUM keyword size and to each other by a fixed scaling factor that depends on the CSS specification used and the user agent.

The last two, smaller and larger, are relative to the font size of the parent element.

According to the CSS1 specification, the scaling factor between one keyword and the next higher size should be 1.5, while the scaling factor between one keyword and the next lower size would be the inverse of that, 0.66. For example, if MEDIUM equates to 10 pixels, then LARGE would be 10px x 1.5 = 15 pixels, and SMALL would be 10px x 0.66 = 6.6 pixels. The actual sizes rendered are dependent on the user agent, so the scaling factors are not necessarily 1.5 and 0.66. In fact, the CSS2 specification recommends that the scaling factor for the next larger keyword to be between 1.0 and 1.2, at the discretion of the user agent.

Working from the assumption that MEDIUM equals 16 pixels the following table shows the effective font sizes for the scaling factors specified by CSS1 and CSS2, respectively.

Keyword Scale: 1.5 Scale: 1.2
xx-small 5 pixels 9 pixels
x-small 7 pixels 11 pixels
small 11 pixels 13 pixels
medium 16 pixels 16 pixels
large 24 pixels 19 pixels
x-large 36 pixels 23 pixels
xx-large 54 pixels 28 pixels

Relative Keyword Sizes

Smaller and larger are relative keyword sizes. They are unique in that they do not define a fixed proportion relative to the MEDIUM keyword size, but rather, they specify a font size relative to that of the parent element. They simply specify that the size of the selected element is to be one keyword smaller or larger than the keyword size of the parent element. For example, if the parent element is MEDIUM, then using keyword SMALLER would make the selected element SMALL, one size smaller in the keyword order. Conversely, if the parent element is LARGE, using the keyword LARGER would make the selected element X-LARGE. If the parent element is X-SMALL, using LARGER would make the selected element SMALL, one size larger in the keyword order.

Examples

This paragraph is sized using the keyword xx-small. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword x-small. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword small. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword medium. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword large. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword x-large. This sentence contains text formatted with keyword smaller and keyword larger.

This paragraph is sized using the keyword xx-large. This sentence contains text formatted with keyword smaller and keyword larger.

Notice that SMALLER and LARGER render in different sizes, depending on the size of the parent element. In Firefox, smaller and larger will effectively create two additional anonymous keyword sizes; a scaling factor smaller than xx-small, and one factor larger than xx-large.

Users agents are not required to increase font size beyond xx-large, or decrease font size beyond xx-small.

Many CSS guru's advocate using keywords as the simplest method of font sizing but there are some issues:

There are CSS workarounds to solve these issues, including using @import, but they take some time to understand and implement (see CSS Design: Size Matters Open in a New Window by Todd Fahrner). However, if done wisely, most agree that this method gives fairly consistent and reliable results.