8.3. The font-size Property

Font size is one of the most troublesome aspects of Web design. This is because browsers vary widely in the ways they understand and apply some of the key concepts that determine how fonts will be sized for display. Before we explore this any further, let's take a look at the official definition of the ways in which you can define the size of a font on a Web page. You can specify the font size you wish to use by selecting from a collection of seven constants:

• xx-small

• x-small

• small

• medium

• large

• x-large

• xx-large

These define what are referred to as absolute sizes, but as we'll see, in reality, there's nothing terribly absolute about them in the usual sense of that word. You can also define absolute font sizes by specifying a length value in units, such as pixels or points.

You can also use two constants that define relative sizes: larger and smaller. In addition, you can use the relative measurement of ems. Finally, you can set the font size using a percentage value, an alternative to the ems approach to relative font sizing.

8.3.1. HTML Sizes Versus CSS Sizes

In the days before CSS, designers often assigned font sizes using absolute or relative values from 1 to 7. You could specify a size of +1 (meaning you wanted the font to be one "level" higher than the default font size for that element), -1 (to create a font one "level" smaller than the default font size for that element), or 1 (one of seven absolute values, with no sign).

The fact that there were seven such values in HTML and now there are seven absolute size constants in CSS has led some people to conclude that there must be a one-to-one correspondence between those two scales. In fact, there is no real connection between the two. You cannot count on the idea that <font size="7"> in HTML produces the same result as font-size: xx-large in a CSS rule.

8.3.2. Variability Across Browsers and Platforms

Beyond that almost-understandable discrepancy lies a deeper issue, which is demonstrated in Figure 8-1. There, the same Web page's contents are shown as rendered by a number of different browsers, browser versions, and platforms.

Given such variability between browsers, platforms, and even versions of the same browser, how in the world can you achieve anything like a predictable design of the fonts on your Web pages?

The short answer is that there is no way to accomplish this, short of using graphics or Adobe Acrobat PDF files to render and display your pages^[2]. It's inevitable that your pages will look somewhat different across these variable platform-browser-version combinations.

^[2] It is true, however, that if you use pixels for your font sizes, you can get very close to pixel-perfect matches between browsers. Actual sizes will still vary with screen resolution in that situation (smaller pixels mean smaller fonts), but using pixels is the current best practice for obtaining close to perfect consistency. This comes at the significant expense of reduced accessibility.

What's a designer to do?

As a first step, use CSS rules rather than the deprecated <font> tag to define the fonts in your designs. The W3C is always working on ways to overcome the limitations in Web page rendering, and with CSS support in current browsers, you're already much closer to the ideal of accessible, yet predictable font sizes.

8.3.3. Relative to What?

When you use relative font sizes, such as ems or percentages, and even the relative constants larger and smaller, you need to understand the base measurement to which they relate. Recall from Chapter 3, that ems tell the browser to render text in a size that is some multiple or fraction of that base measurement. Thus, a font-size setting of 1.5em tells the browser to blow up the font size to 1.5 times the base measurement, and a font size of 0.5em tells the browser to shrink the font size to half the base measurement.

So what is the base measurement?

In the case of text contained directly in the body of a document, the base measurement is the default font size for the browser. If the default setting for text in a browser is, for example, 12 points, then a font-size setting of 1.5em produces 18 point type.

For text inside other elements, the base measurement used by relative font sizing is the font-size of the element's parent container, rather than the size of the element's default font, as you might have expected. You might, for example, expect that if you define a particular class or instance of an h1 tag to have a font-size of 1.5em, you'd end up with a heading that was one and a half times the size of all other h1 headings. In reality, the font size will be 1.5 times that of the parent element of the h1 in question. Figure 8-2 demonstrates this by showing two headings, both of which have the document body as their parent element. The top heading is a standard h1. The second is an h1 that's been defined as having a font-size of 1.5em. Not quite what you might expect, is it?

Figure 8-3 shows how defining a font-size of 1.5em in a span of text within an h1 heading affects that span's size. The word "Important" is 1.5 times as large as the other words in the heading because the heading is the span's parent element.