The available font families that can be specified vary depending on the operating system. Using a default installation, Windows does not provide the same fonts as Mac OS X, for instance. Furthermore, the available fonts also vary depending on the programs installed on the user's computer. For instance, Microsoft Office installs a number of extra fonts in addition to those that ship with Mac OS X or Windows. In fact, with the exception of a few fonts, Mac OS X with Microsoft Office installed provides pretty much the same fonts as installed on Windows. Without Microsoft Office installed, however, many Windows fonts are not available on the Mac platform.

It is for this reason, the possibility of font inconsistencies, that the font-family property is dynamic. It can accept more than one font as its value. The browser will use the first font provided that is installed and available on the end user's computer. The browser will fall back to the next font in the list in the event that previous fonts are not available. So subsequent fonts in the list are called fallback fonts. This capability is provided because it is difficult to foresee which fonts will be available on the user's computer.

It is best to test your web page on several different platforms using different browsers on different operating systems to ensure that your fonts are working as you intend them to. Providing fallback fonts ensures consistency of fonts. Take for example the rule in Figure 6-2a.

Figure 6-2a. Figure 6-2a

The CSS in Figure 6-2a is combined with the markup in Figure 6-2b.

Figure 6-2b. Figure 6-2b

The CSS and markup in Figures 6-2a and 6-2b produce the results shown in Figure 6-2c.

Figure 6-2c. Figure 6-2c

In the example in Figure 6-2, two fonts are specified as the value of the font-family property. This allows you to specify a fallback font. In this case, if Californian FB (common to Windows computers) is not installed on the user's computer, the browser attempts to display the AppleMyungjo font (common to Macintosh computers). If neither font is available, the browser uses its default font, which is the same as the font used when no font is specified and varies depending on the browser. The font-family allows a potentially unlimited list of fonts to be specified, meaning that you can specify as many fonts as you'd like to fall back on. It may also be possible that you do not have any of these fonts, since certain software packages such as Microsoft Office, and Adobe Creative Suite install various fonts along with the software; fonts available will vary from computer to computer.

The effect of the following code is that the browser goes through the list of comma-separated fonts until it finds one that it is capable of displaying:

p {
    font-family: Arial, Shruti, "Microsoft Sans Serif", Tahoma, Mangal, Helvetica;
}

CSS provides a couple of generic fonts, serif, sans-serif, monospace, fantasy, and cursive, that you can always rely on being installed.

As I mentioned in the previous section, the available fonts vary from operating system to operating system. They can vary even more with individual user's computer systems because even more fonts can be installed along with certain programs. The only way to maintain consistency displaying from platform to platform is to provide either a list of font families (so a fallback font can be called upon if the desired font is not installed) or to specify a generic font. Generic fonts are a set of basic fonts that are available regardless of the user's operating system.

The following table outlines the generic font family names defined in CSS.

Generic fonts are often mapped, by the browser, to other fonts that already exist on the system. For example, on Windows, IE maps the sans-serif font to Arial and the serif font to Times New Roman. In fact some browsers provide user-configurable generic fonts. In Firefox, for example, you can set the font used for the serif, sans-serif, cursive, fantasy, and monospace generic fonts.

The generic font names display fonts similarly in different browsers and operating systems. Figure 6-3 shows generic font output in various browsers, as they appear by default.

Figure 6-3. Figure 6-3

Figure 6-3 shows how various browsers render generic fonts. From the output shown in those figures, you can see that generic font rendering is not exactly identical between browsers and platforms. Fonts that display consistently are serif, sans-serif, and monospace. Because of the wildly varying differences in rendering of the fantasy and cursive fonts, designers seldom use these two fonts.

In the notation for the font-family property documentation, <generic-family> refers to the possible specification of a generic font name. Often a generic font is included as a last fallback option, as shown in the following rule:

P  {
   font-family: Arial, Shruti, Tahoma, Mangal, Helvetica, sans-serif;
}

The addition of sans-serif to the end of the font list for the font-family property means that as a last resort, if none of the other fonts specified are installed on the user's computer, the generic sans-serif font should be used.

Use the following Try It Out to experiment with the font-family property for yourself.

span.font1 {
    font-family: "Perpetua Titling MT", serif;
}

span.font2 {
    font-family: "Baskerville Old Face", serif;
}

span.font3 {
    font-family: "Lucida Bright", monospace;
}

span.font4 {
    font-family: Herculanum, "Eras Demi ITC", sans-serif;
}

In the next section, I discuss how to make text italic or oblique with the font-style property.

The <absolute-size> value notation of the font-size property refers to one of seven keyword values. Absolute values for the font-size property are defined using keywords that range from xx-large to xx-small. The following table outlines the absolute values and their relation to HTML heading sizes as of CSS 2.0.

These keywords specify the font size based on a scaling factor of 1.2. Scaling factor is the ratio between two shapes. The scaling factor is determined by multiplying the font size by 1.2 to determine the next font size relative to the previous one. For instance, if a font size of 16 pixels is assumed for the medium keyword value, the large keyword would be approximately 20 pixels, rounding up from 19.2 because 16 multiplied by 1.2 equals 19.2.

These keywords exist for sizing fonts relative to the browser user's font-size preferences. The browser precalculates the value of each keyword depending on those preferences. The name absolute is somewhat misleading because each keyword is relative to the user's font-size preferences. The actual length unit size of each keyword varies depending on a number of factors, such as:

Despite all of these variables, this is one place where the three browsers, IE, Firefox, Safari, and Opera, seem to be consistent.

Figure 6-10 shows each absolute font size in relation to the default HTML heading size and a size specified in points.

Figure 6-10. Figure 6-10

Although this association between font size keywords and length units works for the Rockwell font I used in Figure 6-10, the point sizes depicted are approximations and might not be the same point unit values when another font is used. If you increase or decrease the size of the text using the zoom feature of the browser, you'd notice that the point sizes change in response to the absolute keyword values if you are using IE 7, Safari, Opera, or Firefox. However, IE 6 ignores the user's adjustments to font size preferences on font sizes specified in points (or any other absolute length unit, like inches or centimeters). Therefore, the point sizes do not change with the size of the absolute keywords when adjustments to the user's font size preferences are made. You can make adjustments in the size of the font in Internet Explorer from the View

Relative font-size keywords, covered in the following section, are closely associated with the absolute font size keywords.

The <relative-size> notation of the font-size property refers to two values: larger and smaller. When either of these two values is used, the font size is determined by the values appearing in the table for absolute size keywords discussed in the previous section. Take, for instance, the example in Figure 6-11a.

Figure 6-11a. Figure 6-11a

Combine the CSS in Figure 6-11a with the markup in Figure 6-11b.

Figure 6-11b. Figure 6-11b

The results are shown in Figure 6-11c.

Figure 6-11c. Figure 6-11c

Figure 6-11 demonstrates how the next value in the absolute font-size keyword table is chosen. Because the font for the <body> element is made medium in size with the font-size: medium; declaration, when font-size: larger; is applied to the <p> element, the browser chooses the next larger value in the absolute keyword table and applies a font size that is the same as would be generated by the font-size: large; declaration. If the value is specified with a length unit—say, for instance, as pixels—the browser simply applies a 1.2 scaling factor to that size to get the larger size.

Figure 6-12 shows how a font size specified as 16 pixels gets increasingly larger when font-size: larger; is applied to descendant elements.

Figure 6-12. Figure 6-12

In contrast to the font-size: larger; declaration, Figure 6-13 shows what happens when the font-size: smaller; declaration is used instead.

Figure 6-13. Figure 6-13

The font-size: smaller; declaration performs the same scaling factor changes that the font-size: larger; declaration does, but does them in reverse.

Percentage font sizes work much like the em units discussed in Chapter 2. Consider the example in Figure 6-14a.

Figure 6-14a. Figure 6-14a

Combine the CSS in Figure 6-14a with the markup in Figure 6-14b.

The result is shown in Figure 6-14c.

Figure 6-14c shows that percentage values are based on the element's ancestry. The font size for the <p> element is the default font size, which is medium or typically 16 pixels. The font size of the first <span> element is made 50% larger than the font size of its parent element, the <p> element. Assuming the default font size is 16 pixels, that makes the font size of the first <span> element 24 pixels. Then, the nested, child <span> element is made 25% bigger than the font size of its parent <span> element, which comes to 30 pixels.

Figure 6-14b. Figure 6-14b

Figure 6-14c. Figure 6-14c

A percentage font size measurement might also be used to decrease the size of a font. Take, for instance, the CSS in Figure 6-15a.

Figure 6-15a. Figure 6-15a

The CSS in Figure 6-15a is combined with the markup in Figure 6-15b.

Figure 6-15b. Figure 6-15b

The result is shown in Figure 6-15c.

Figure 6-15c. Figure 6-15c

As you saw in Figure 6-14c, Figure 6-15c shows how percentage fonts can be used to make a font smaller. Again assuming the default font size is 16 pixels, the child <span> element is made 25% smaller than the font of the <p> element, which comes to 12 pixels. Then the nested <span> element is made 25% smaller than its parent <span> element, which comes to 9 pixels.

Now that you've had an overview of how the font-size property works, you can try out the font-size property firsthand.

<p>
    You can also make fonts
    <span style='font-size: larger;'>larger</span> or
    <span style='font-size: smaller;'>smaller</span> by way
    of the <span style='font-size: larger;'>larger</span> or
    <span style='font-size: smaller;'>smaller</span> keywords.
</p>

<p>
    You can make fonts
    <span style='font-size: 150%;'>50%  larger</span>
    or <span style='font-size: 75%;'>25% smaller</span> by way
    of percentages.
</p>

<p>
    You can even make a font
    <span style='font-size: 1.5em;'>50% larger</span>  or
    <span style='font-size: 0.75em;'>25% smaller</span> by way
    of em units.
</p>

The next section examines a special shorthand property used to specify several font properties in one.

As for the first part of the notation, here's a breakdown of each portion:

[ <'font-style'> || <'font-variant'> || <'font-weight'> ]?

This indicates that either a font-style, font-variant, or font-weight value can be provided. The question mark indicates that this part is optional; you don't have to include a font-style, font-variant, or a font-weight. The double vertical bars in the notation indicates that each value is optional, and they also indicate that any combination of the three can appear. You can include just a font-style, just a font-variant, just a font-weight, all three, or any combination of the three.

The next part indicates that a font size must be specified:

<'font-size'>

The font size is not optional, so a font-size value must always be provided.

The next part indicates that a line-height (discussed in Chapter 7) may be specified, but because a question mark follows it, the line height is optional:

[ / <'line-height'> ]?

The forward slash in the notation indicates that if a line height is specified, a forward slash must separate the font-size and line-height properties. The question mark after the closing square bracket indicates that this portion of the syntax is optional.

The last portion indicates that a font-family must be specified:

<'font-family'>

So at the very least, a font-size value and a font-family value must be specified. Now that you understand the notation, Figure 6-17a is an example of this property including all its optional values.

Figure 6-17a. Figure 6-17a

The CSS in Figure 6-17a is combined with the markup in Figure 6-17b.

Figure 6-17b. Figure 6-17b

The result is shown in Figure 6-17c.

Figure 6-17c. Figure 6-17c

This rule includes all the values possible with the font property shorthand. Figure 6-17 shows that this rule makes the font italic, small-caps, bold, 1em in size with a 1.5em line-height and a sans-serif font. I haven't discussed the line-height property yet because this property is discussed in Chapter 7, but essentially the line-height property accepts a normal length value, which sets the height for each line of text.

In contrast to the example in Figure 6-17, the example in Figure 6-18a shows the font property with a minimal set of values.

Figure 6-18a. Figure 6-18a

The CSS in Figure 6-18a is combined with the markup in Figure 6-18b.

Figure 6-18b. Figure 6-18b

The result is shown in Figure 6-18c.

Figure 6-18c. Figure 6-18c

The notation indicates that at least a font size and a font family must be provided, as is reflected in the preceding example. Figure 6-18c shows output with a Monotype Corsiva font 32px in size.

Here are a few more possible variations of the font property:

font: bold 1.2em Arial, sans-serif;

This makes the font bold and 1.2em in size. Then, like the font-family property, the font property accepts a list of fonts. I've specified an Arial font, which is common. If that font isn't found on the user's computer, the generic sans-serif font is used. The following is another variation of the font property:

font: italic 1.2/2em "Times New Roman", Times, serif;

The preceding rule makes the font italic and 1.2em in size with a 2em line height. Those specifications are followed by a list of font families.

Now that you've had an overview of the font shorthand property, you can try out the font property for yourself in the following Try It Out.

body {
    font: 16px sans-serif;
}

p.font1 {
    font: bold 24px sans-serif;
}

p.font2 {
    font: italic bold small-caps 24px sans-serif;
}

p.font3 {
    font: 16px monospace;
}

In the next section I talk about system fonts, which are fonts that you can use to style a web page based on an end user's operating system fonts.

System fonts are keywords that refer to a font predefined by the user's operating system. The following table outlines each available system font.

System fonts may only be set as a whole when a system font is specified using the font shorthand property, the font-family, font-size, font-weight properties, and all other aspects of font display are set at once.

The CSS in Figure 6-20a is combined with the markup in Figure 6-20b.

Figure 6-20c shows what system fonts look like in various browsers on various operating systems.

Figure 6-20a. Figure 6-20a

Figure 6-20b. Figure 6-20b

Figure 6-20c demonstrates each of the system fonts. From left to right and top to bottom the screenshots in Figure 6-20c are Safari, Windows XP IE 6, Windows Vista IE 7, Mac Opera 9, Ubuntu Linux Firefox 1.5, Windows XP Opera 9, Mac Firefox 1.5, Windows XP Firefox 1.5.

Figure 6-20c. Figure 6-20c

System fonts are intended to allow a web designer to set fonts based on a user's font preferences as defined for his or her operating system. While system fonts sound great in theory Figure 6-20c shows that system fonts are a bit of a hit and miss proposition. They don't work in IE 7 on Windows Vista, in Firefox on Ubuntu Linux, or in Safari on Mac OS X. Because system fonts can't be relied upon absolutely, it may be better to just define font styles for yourself.

Additionally, different aspects of system fonts can be overridden via the cascade by specifying the different font properties after a font declaration with a system font value. This is demonstrated by the following rule:

p {
    font: caption;
    font-size: 2em;
    font-style: italic;
}

In the preceding example, the font size and font style replace those specified for the system font.