User:Bartlett/09

Hour 9. Fonts and Font Families

What You'll Learn in This Hour

• Which font properties specify bold, italic, and variant fonts
• How you can set a number of font properties at once using a shorthand property
• What the generic font families are and how to use them
• Which fonts are most commonly installed on browsers

One of the most effective changes you can make to a web page when using CSS is to simply alter the browser's default font. This can add a more professional look to your website immediately, as well as make it easier for users to read and find information. |}

./ ADD NAME=CH09LEV1SEC1.HTML

Specifying Font Properties

In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], "Getting Started with CSS," you were introduced to two font properties: font-size and font-family. These enable you to specify the size and typeface of the font, respectively. In addition, a number of other properties can be used to further select fonts from within those families. These properties are font-weight, font-variant, font-style, font-stretch, and font-size-adjust.

To understand how these properties work, it's important to understand how CSS views fonts. A font in CSS is one specific instance of several properties: a specific typeface, size, weight, and other variables. So the font 12pt Arial bold italic is different from the font 10pt Arial. They are part of the same font family, of course. It's helpful to remember that when you declare a font family, you're actually selecting a group of fonts to be used. Other properties (or browser defaults) narrow down the specific font.

Font families generally include a number of variations on the base fontfor example, an italic version of the font. In some cases, you will specify a font combination that simply isn't available as a distinct variant. The browser then has to create a variant on the fly by slanting the text to produce italic effects, for example, or by using the closest available equivalent in the font family.

The effects produced by various font settings are listed in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09table01 Table 9.1] for reference; this is because it's not always clear which property controls which effect.

Property	Effect
font-family	Selects the typeface family
font-size	Sets the size of the font
font-weight	Makes text bold or lighter
font-variant	Creates "small caps" effect
font-style	Sets italic font
text-decoration ([file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10])	Underlines text
color ([file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch10.html#ch10 Hour 10])	Changes the color of text
line-height ([file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15])	The height of the line (but not the text height)
font	Sets font-family, font-size, font-weight, font-variant, font-style, and line-height

The font-weight Property 

The font-weight property controls how heavy a font appearsin other words, the thickness of the lines used to draw that font, relative to the size of the font. The weight of a font is measured in numbers that range from 100 to 900, in steps of 100. The higher the number, the bolder the font; normal text has a weight of 400 and bold text (as created by the HTML tag) has a weight of 700.

Not all font families have specific fonts at all values; in such a situation, the browser usually uses the closest match. For example, if there's no weight 800 variant for a font, the browser may substitute weight 700.

Many browsers support only two to four font-weight values. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig01 Figure 9.1] shows how Safari displays each font-weight value of Verdana, whereas [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig02 Figure 9.2] is from Firefox. Notice that they differ on whether weight 600 should be weighted like 500, 700, or somewhere in between. Keep this in mind; it will be important later on.

Figure 9.1. Successive font-weight values of Verdana font, shown in Safari.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig01_alt.jpg [View full size image]]

File:09fig01.jpg Figure 9.2. Successive font-weight values of Verdana font, shown in Firefox.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig02_alt.jpg [View full size image]]

File:09fig02.jpg

In addition to numeric values, the font-weight property can take named values, as shown on [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09table02 Table 9.2]. The font-weight value is inherited from the containing box if any is set. The default value is normal (400) for most HTML tags; some, such as , ,

to

, and , default to bold (700).

Value	Effect
100 to 900	Lightest (100) to heaviest (900) font weight
bold	Same as 700
bolder	One step (+100) heavier than the containing box's font-weight
lighter	One step (-100) lighter than the containing box's font-weight
normal	Same as 400
inherit	The value of the containing box's font-weight property

If a font's weight is already at 900, the value bolder won't make it any heavier; likewise, if the font-weight is 100, lighter has no additional effect.

Watch Out! Comparing [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig01 Figure 9.1] and [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig02 Figure 9.2], it's clear that browsers aren't consistent about how heavy they make in-between values such as 500 or 600. Because bolder and lighter move up or down in steps of 100, it's possible that a bolder (or lighter) rule may have no effect. If the default is 400, and the browser does not render 500 as 700 but as 400, an increase of 100 is meaningless. For this reason it's better to use either explicit numeric values (400 or 700) or the keyword bold for cross-browser consistency.

 The font-variant Property 

Only one type of variant font can be set with the font-variant property, a variant where lowercase letters are represented with smaller versions of capital letters. The three possible values for font-variant are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09table03 Table 9.3]; the default value is normal, and if there is a value set on the containing box, it will be inherited.

Value	Effect
normal	Use normal lowercase letters
small-caps	Use small capitals instead of lowercase letters
inherit	Use the value of the containing box's font-variant property

An example of font-variant is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig03 Figure 9.3]; the rule used is

Figure 9.3. Using font-variant: small-caps.

File:09fig03.jpg

#a { font-family: Optima, sans-serif;
 font-variant: small-caps; }

 The font-style Property 

To set something in an italic or oblique font, you can use the font-style property; font-style is not used for anything else, although the name seems deceptively general. The values for font-style are shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09table04 Table 9.4]. If a font-style property is set on the containing box, it is inherited. Otherwise, the default is usually normal, although some HTML properties, such as , , and <address>, are normally italicized by web browsers.

Value	Effect
italic	Use an italic font.
normal	Use a non-oblique, non-italic font.
oblique	Use an oblique or slanted font.
inherit	Use the value of the containing box's font-style property.

Did you Know?

What is oblique? Although it's a less common term than italic, it's a related concept.

Most fonts we see are called Roman fonts; these are not slanted, and they correspond to the CSS value of normal. An italic font is created by making slanted, slightly curly alternate versions of the letters in a Roman font; each letter has been redesigned so that it's essentially a new set of characters within the same font family.

An oblique font, on the other hand, is created by just tilting the Roman font's characters at an angle. This doesn't always require font redesign and can be done automatically by a computer, but often the results are not nearly as nice looking. Many typography books explicitly discourage the use of computer-created obliques.

Browsers treat italic and oblique property values the same because they don't really know the difference most of the time. The CSS specification allows for italic fonts to be displayed as oblique (even oblique fonts generated automatically) if a matching italic font is not available. You'll probably want to simply use italic; don't worry about the difference unless you are a professional typographer, in which case you don't need me to explain the difference between oblique and italic.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig04 Figure 9.4] shows the lack of difference between oblique and italic by current browsers; they're both rendered the same, in slanted text. This is unfortunate for typographers, but for most of us it won't be a major problem. The code used in this screenshot is

Figure 9.4. Oblique versus italic. In practice, there's no difference.

File:09fig04.jpg

<div style="font-style: normal;">
 This is normal text.
</div>
<div style="font-style: italic;">
 This text is italic.
</div>
<div style="font-style: oblique;">
 This text is oblique.
</div>

 The font Shorthand Property 

As you've probably noticed this hour, quite a few properties define a font. Rather than typing out each property, the font property enables you to set these values at one time.

The font property is a shorthand property in CSS terminology. A shorthand value has two effects: It sets all affected properties to their default values, and it assigns designated values to the appropriate properties. The font property is shorthand for the font-family, font-size, font-weight, font-variant, font-style, and line-height properties. (You'll learn about line-height and how to use it with font in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch15.html#ch15 Hour 15], "Alignment.") The font property doesn't let you set values for font-stretch or font-size-adjust; these need to be set in separate rules.

Watch Out!

Don't overlook that first function, resetting to default values! You can easily spend hours trying to debug your style sheet if you don't remember that shorthand properties set all values, even those not shown. In addition to anything else a font rule does, it also is roughly equivalent to the following declarations:

font-family: serif; /* or the default browser font */
font-size: medium;
font-weight: normal;
font-variant: normal;
font-style: normal;
line-height: 100%;

A font rule looks like this:

selector { font: style variant weight size family; }

The values for weight, size, and family must be specified in that exact order, but other than that the values can appear in any order. Any values that aren't listed are set to their default values. Here are some examples of font shorthand rules:

body { font: 12pt normal "Times New Roman"; }
h1 { font: 20pt Arial italic small-caps; }
blockquote { font: bold "Courier New", sans-serif; }

When using font it's important to keep in mind that the first function of this property is to reset values to their defaults; this means that priority order counts. For example, consider these two pairs of rules:

#a { font-weight: 700;
 font: large Verdana, sans-serif; }
#b { font: large Verdana, sans-serif;
 font-weight: 700; }

In the #a rules, the font-weight gets set to 700 by the font-weight property, but then the font property resets it to the default, so the weight is back to 400. The #b rules are in the correct order to make the text bold; first the font rule sets everything to default values, and then the specific rule for font-weight overrides the default.

By the Way The font property can also take values based on the user's operating system fonts; these are discussed in detail in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch23.html#ch23 Hour 23], "User Interface and Generated Content."

Try it Yourself: Setting Font Properties The best way to understand how the font properties and font shorthand work is to try it yourself. Follow these steps: 1. Create an HTML page with various types of text for styling. Include and elements, plus other types of text such as . 2. For each type of text, write a series of separate CSS rules, using font-family, font-weight, font-style, font-size, and font-variant. For example: h1 { font-family: Verdana, sans-serif;<br />font-weight: normal;<br />font-size: 200%;<br />font-style: italic;<br />font-variant: small-caps; }<br /> 3. Give different rules for your headlines and your body text. Set aside quotes with rules. Choose fonts and font sizes that complement the different types of text. Do your headlines have to be bold? 4. Now combine your style rules together into one font rule, being mindful of the default values set by a shorthand property. For example, you could write h1 { font: italic small-caps 200% Verdana, sans-serif; }<br />

./ ADD NAME=CH09LEV1SEC2.HTML

Font Families

As you learned in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch02.html#ch02 Hour 2], the font-family property is used to select the family of font faces. A font-family rule can be written like this:

selector { font-family: font1, font2, font3, ...
 generic; }

You can give as many alternate fonts as you want; the browser looks through its own list (from the computer's operating system) and locates the closest match. After it finds one, it displays the text with that font face. For example, consider this rule:

h1 { font-family: "MS Sans Serif", Palatino, Helvetica,
 "Bookman Old Style", "Times New Roman", Times,
 Garamond, Chicago, Arial, Geneva, Verdana,
 cursive; }

The browser starts looking through the list of fonts, and if it finds a match, it uses that font. So on my Windows computer, it might find "MS Sans Serif" and display the

in that font; on my Apple iBook, it won't find "MS Sans Serif" and will go on to the next one. If the iBook has Palatino (which it does), that's the font family that will be used.

Watch Out! Remember to include quotes around font names that are more than one word!

The Generic Font Families

In the long rule you just saw, I included a generic font family name at the endcursive. In case the browser can't find any of the 11 named fonts, it will use the browser's cursive font. The exact value of the cursive font varies a lot from operating system to operating system; also, modern browsers (such as Firefox or Opera) enable the user to set specific fonts tied to the generic families. So on my Firefox browser, cursive might mean "Apple Chancery", whereas on yours it may be the "Lucida Handwriting" font.

The five generic font families in CSS are serif, sans-serif, cursive, fantasy, and monospace. To show you how different browsers (on two different operating systems) will display the generic font families, I've taken some screen shots. Your browser may display these differently as well; in most browsers you can reconfigure your generic font families depending on which fonts are installed on your system.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09ex01 Listing 9.1] is a simple HTML file with embedded style attribute rules that use the generic font families.

Listing 9.1. Styling with Generic Font Families

<!-- generic-9.1.html --><br /><html><br /><head><br /><title>Generic Font Families</title><br /></head><br /><body><br /><h1 style="font-family: serif;">Serif Family</h1><br /><h1 style="font-family: sans-serif;">Sans-Serif Family</h1><br /><h1 style="font-family: monospace;">Monospace Family</h1><br /><h1 style="font-family: fantasy;">Fantasy Family</h1><br /><h1 style="font-family: cursive;">Cursive Family</h1><br /></body><br /></html><br />

In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig05 Figure 9.5], you can see the generic font families from [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09ex01 Listing 9.1] as shown in Firefox, running on my iBook Macintosh laptop.

Figure 9.5. Generic font families in Firefox (Mac OS X).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig05_alt.jpg [View full size image]]

File:09fig05.jpg

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig06 Figure 9.6] shows you what the generic font families look like in Firefox running on my Windows desktop computer. Notice that the serif, sans-serif, and monospace families are consistent with the iBook's families, but the cursive and fantasy families are very different. In fact, the fantasy font family seems to be unsupported in this particular browser configuration, as it uses a plain looking sans-serif font. Especially for the fantasy and cursive families, the choice of font for generic families depends a lot on which browser and operating system are used, and which fonts are installedeven when the browser versions are identical.

Figure 9.6. Generic font families in Firefox (Windows XP).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig06_alt.jpg [View full size image]]

File:09fig06.jpg

What about Internet Explorer's generic fonts? [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig07 Figure 9.7] shows how Internet Explorer on Windows handles the fonts. In this example as well, there is no special font for the fantasy family; it may well be that whatever font Internet Explorer is looking for is not installed on the computer in question. You can't rely on having any given font on a user's machine, or even rely on the generic fantasy and cursive families being either fantastic or cursive. They may just be plain fonts, as these examples show.

Figure 9.7. Generic font families in Internet Explorer (Windows XP).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig07_alt.jpg [View full size image]]

File:09fig07.jpg

As described in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch03.html#ch03 Hour 3], "Browser Support for CSS," Internet Explorer for Macintosh is an entirely different piece of software than Internet Explorer on Windows. This is evident in the generic font families, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig08 Figure 9.8].

Figure 9.8. Generic font families in Internet Explorer (Mac OS X).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig08_alt.jpg [View full size image]]

File:09fig08.jpg

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig09 Figure 9.9] shows the generic font families as displayed by Opera 8.5 on the Macintosh. There are several things to note here: The first is that Opera isn't displaying Arial for the sans-serif family, as you see with the other browsers. The second is that the MS Comic Sans font, used as a cursive font by Internet Explorer and Firefox on Windows, appears here as a fantasy font!

Figure 9.9. Generic font families in Opera 8.5 (Mac OS X).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig09_alt.jpg [View full size image]]

File:09fig09.jpg

Finally, [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig10 Figure 9.10] shows how Safari displays the font families. In short, it doesn't bother with the cursive and fantasy fonts; instead, they're shown as plain, ordinary sans-serif Arial.

Figure 9.10. Generic font families in Safari (Mac OS X).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig10_alt.jpg [View full size image]]

File:09fig10.jpg

Generic font families are good for fallback; without them, your font face will be the single default of the browser, usually something like "Times New Roman". Though as you can see, they're not very consistent. They are still better than the basic default, however, and you will want to include a generic family in each font-family property value (or font shorthand property value).

Serif

In font terminology, serifs are defined as the little feet or curved bits added to the ends of the straight lines that constitute a letter. These help to make the characters easier to distinguish when reading, especially when reading print. A serif font makes it much easier to distinguish among the number 1, the lowercase letter l, and the uppercase letter I, as shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig11 Figure 9.11].

Figure 9.11. Serif fonts make it easier to distinguish letters.

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig11_alt.jpg [View full size image]]

File:09fig11.jpg

Serif fonts are often used for normal body text in web browsers. The default test font is commonly "Times New Roman", which is usually the generic serif family font as well. However, serif fonts tend to display poorly on the screen compared with print, especially at smaller font sizes. Many web developers will immediately change the font-family to a sans-serif font as the first rule of their style sheets.

Other examples of serif fonts include "Bookman Old Style", "Book Antiqua", "Century Schoolbook", Garamond, "Goudy Old Style", Palatino, and Sonoma. The font Times is similar to "Times New Roman", and it's often useful to specify both of those fonts together, like this:

blockquote { font-family: "Times New Roman",
 Times, serif; }

Sans-serif

The prefix sans means "without," so a sans-serif font is one that does not have serifs. Sans-serif fonts look cleaner and more streamlined than serif fonts, and they often fit better on most web pages. (Not all web designs are the same, though, and you can many times find uses of both serif and sans-serif fonts, often within the same style sheet.) A sans-serif font is shown in [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig12 Figure 9.12].

Figure 9.12. Sans-serif fonts have a more modern look than serif fonts.

File:09fig12.jpg

The most common sans-serif font is Arial; its near relatives are Helvetica and Geneva. Another important font is Verdana, which was specifically developed for on-screen display; it is wider than Arial and easier to read, especially at smaller sizes. Other examples of sans-serif fonts are "Century Gothic", Chicago, Futura, and Tahoma.

Monospace

The term monospace means that each letter is displayed in the same amount of space; columns of text line up by character, for example, so that the 15th character from the left on each line is always at the same location. This is rather like an old typewriter. (Do people still use typewriters in the 21st century?) The code samples in this book are set in a monospace font, as is any word meant to be typed, such as property values and the names of properties and selectors. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig13 Figure 9.13] is an example of the monospace generic family.

Figure 9.13. The letters of monospace fonts line up in columns.

File:09fig13.jpg

The most common monospace font family is "Courier New", and this is the default monospace value on pretty much every browser. Courier is an older version of "Courier New"; you may want to list both of these to ensure a greater likelihood of a font match.

Other monospace fonts include "Andale Mono", VT102, and Mishiwaka.

Fantasy

The fantasy generic family is even more of a grab bag than the cursive family; any irregular, somewhat-whimsical font falls into this category. Some are old woodcut-style ornate letters; some are bizarre squiggles; some look like animals; and some look like letters cut from newspapers for a ransom note. [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig14 Figure 9.14] has an example of a font from the fantasy generic family.

Figure 9.14. One of many possible fantasy fonts.

File:09fig14.jpg

Because the fantasy generic family is so loosely defined and because browsers have interpreted this as a catchall for any strange fonts that may come along, a declaration of fantasy could produce text that looks like anything. For example, on my browser it may display in a comic book print font, but on yours it could appear in an old English woodcut font. Because this kind of irregularity makes it hard to design effectively, you'll probably want to avoid using this family.

Cursive

The cursive generic family is very variable; it refers to any font that was based on the way people handwrite text. As with fantasy, there are no real standards on what the default cursive family should be, which is why it is different from computer to computer and even from browser to browser. Examples include "Script MT Bold", "Apple Chancery", Swing, "MS Sans Serif", and "Lucida Handwriting". In [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09fig15 Figure 9.15], you can see one example of a cursive font.

Figure 9.15. One browser's cursive font (Firefox running on Mac OS X).

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/images/09fig15_alt.jpg [View full size image]]

File:09fig15.jpg

Cursive fonts tend to be very difficult to read onscreen and probably should be avoided unless you have a very specific reason to use one, such as the writer's name after a formal letter, styled to represent a written signature.

Commonly Installed Fonts

Because there's so much variance among computers, you may not be able to know with certainty whether or not a given font will appear on a user's computer. She might indeed be using Internet Explorer 6 on Windows, but she also could have decided to delete Arial entirely! (Why someone would do this, I'm not quite sure.)

However, it's possible to devise a list of relatively safe fontsthose that are found on most operating systems and browsers. You should continue to use generic families as fallbacks, but these are relatively safe.

The common fonts are "Times New Roman", Times, Arial, Helvetica, Geneva, Verdana, "Courier New", and Courier. Other fonts are less reliable, such as "MS Comic Sans", Papyrus, and Optima.

Try it Yourself: Font Families in Action Let's look at what fonts you have installed on your computer which are used by your browser. Do the following: 1. Create an HTML file with various types of text to style. You can download [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09ex01 Listing 9.1] from the book's website, or make up your own page. 2. Try out the generic fonts. Set a rule like this to make all the text on your page the same font family: body { font-family: sans-serif; }<br /> 3. Then try setting different fonts for the headline elements and the body text; combine them together to get the best appearance. h1, h2, h3, h4, h5, h6 { font-family: fantasy; }<br />p { font-family: cursive; }<br /> 4. Now view the page in a different browser. How does your page change, or does it? 5. Try using the common fonts such as Arial or Verdana. These are nearly ubiquitous on the Web, but what about Papyrus or Optima? h1 { font-family: Verdana, sans-serif; }<br />blockquote { font-family: Papyrus, fantasy; }<br />

./ ADD NAME=CH09LEV1SEC3.HTML

Summary

When you specify a font, you're actually selecting a font from a set maintained by the user's browser and operating system. Browsers use the various font properties, such as font-weight, font-variant, font-style, and font-size, to narrow down the fonts within a specific font-family and select the right one to use. All these properties can be specified with the font shorthand property.

Five generic font familiesserif, sans-serif, cursive, fantasy, and monospaceare used if the user's computer doesn't contain a font you specify. A short list of common fonts is available on all browsers. CSS describes a method for downloading fonts on demand, but unfortunately neither of the two competing methods for downloading fonts is very reliable.

./ ADD NAME=CH09LEV1SEC4.HTML

Workshop

The workshop contains a Q&A section, quiz questions, and an exercise to help reinforce what you've learned in this hour. If you get stuck, the answers to the quiz can be found after the questions.

Q&A

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa1q1a1 Q.]

I need to have specific fonts on my page, even if the user doesn't have them on his computer. What can I do?

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa1q1 A.]

If you want specific fonts for headers or navigation buttons, you can create graphics containing your text, using a graphics editing program to choose the exact fonts required. The problem with text-as-graphics is that the images don't scale at all with the user's preferences, which may make it harder for some users with visual disabilities. In any case, you need to remember to set the alt attribute on the HTML <img> tag to a value equal to the text on the graphic. For more on this, see [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch22.html#ch22 Hour 22], "Accessibility and Print Media," and [file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch24.html#ch24 Hour 24], "Troubleshooting and Browser Hacks."

Quiz

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q1a1 1.]	Consider the following HTML: <div style="font-weight: bold;"><br />That's <span style="font-weight: bolder;">heavy</a>,<br />man.<br /></div><br /> What numeric value (100 to 900) is the equivalent of the font weight on the word heavy?
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q2a2 2.]	How do you write the following properties with the font shorthand property? .double { font-weight: 700;<br />color: navy;<br />font-family: Verdana, sans-serif;<br />font-size: x-large;<br />font-style: oblique;<br />font-variant: small-caps; }<br />
>	>
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q3a3 3.]	What are the generic font families that are closest to each of these fonts? # Verdana Times New Roman Lucida Handwriting Helvetica Courier New

Answers

[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q1 1.]	The value bold is inherited from the containing box, and it has a value of 700. The bolder property value increases the inherited value by 100, so the total is 800.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q2 2.]	Here's one way to write that rule with the font property: .double { font: oblique small-caps 700<br />x-large Verdana sans-serif;<br />color: navy; }<br /> Because color isn't included in the font shorthand property, it has to be declared separately. Note that the order of weight, size, and family is used; hopefully, you remembered that the order does matter for those values.
[file:///C:/Documents%20and%20Settings/dani/Asztal/Sams%20Teach%20Yourself%20CSS%20in%2024%20Hours_2ndEd/0672329069/ch.htm#ch09qa2q3 3.]	The generic families for each font are # sans-serif serif cursive sans-serif monospace

Exercise

Explore the use of fonts in CSS with this optional project. Create a web page with a style sheet that uses a number of different fonts for headers, paragraphs, navigation, footers, tables, and anything else. Go overboard with your font choicesmake up dozens of styles, a different font for each type of contentand then start decreasing the variety of fonts you use. Discover at what point "a lot" is "too many," and discover how many fonts you really need to make a web page look right. (My preference? No more than two or three.)

./ ADD NAME=CH10.HTML