Fonts

Using the CSS font properties, you can choose a font family, font weight (its boldness setting), and font size (see Table 6-2). Be prepared, however, for a bit of Web-style uncertainty, as this is one case where life isn't as easy as it seems.

DESIGN TIME: Making Color Look Good

Nothing beats black text on a white background for creating crisp, clean, easy-to-read Web pages with real presence. This black-and-white combination also works best for pages that have a lot of colorful pictures. It's no accident that almost every top Web site, from news sites (www.cnn.com) to search engines (www.google.com) to e-commerce shops (www.amazon.com) and auction houses (www.ebay.com), use the winning combination of black on white.

But what if you're just too colorful a person to leave your Web page in plain black and white? The best advice is to follow the golden rule of color: use restraint. Unless you're creating a sixties revival site or a Led Zeppelin tribute page, you don't want your pages to run wild with color. Here are some ways to inject a splash of color without letting it take over your Web page:

Go monochrome. That means use black, white, and one other dark color. Use the new color to emphasize an important design element, like subheadings in an article. For example, the Time magazine Web site once used its trademark red for headlines (although now it favors a sleeker black-and-white combination).
Use lightly shaded backgrounds. Sometimes, a faint wash of color in the background is all you need to perk up a site. For example, a gentle tan or gold can suggest elegance or sophistication (see the Harvard library site at http://lib.harvard.edu/). Or light pinks and yellows can get shoppers ready to buy sleepwear and other feminine accoutrements at Victoria's Secret (www.victoriassecret.com).
Use color in a box. Web designers frequently use shaded boxes to highlight important areas of a Web page (see Wikipedia at http://en.wikipedia.org/). You'll learn how to create boxes later in this chapter.
Be careful about using white text. White text on a black or dark blue background can be striking—and strikingly hard to read. The rule of thumb is to avoid it unless you're trying to make your Web site seem futuristic, alternative, or gloomy. (And even if you do fall into one of these categories, you might still get a stronger effect with a white background and a few well-chosen graphics with splashy electric colors.)

Table 6-2. Font properties

Property	Description	Common Values	Can Be Inherited?
font-family	A list of font names. The browser scans through the list until it finds a font that's on your visitor's PC. If doesn't find a supported font, it uses the standard font it always uses.	A font name (like Verdana, Times, or Arial) or a generic font-family name: serif, sans-serif, monospace.	Yes
font-size	Sets the size of the font.	A specific size, or one of these values: xx-small, x-small, small, medium, large, x-large, xx-large, smaller, larger.	Yes
font-weight	Sets the weight of the font (how bold it appears).	normal, bold, bolder, lighter	Yes
font-style	Lets you apply italic formatting.	normal, italic	Yes
font-variant	Lets you apply small caps, which turns lowercase letters into smaller capitals (LIKE THIS).	normal, small-caps	Yes
text-decoration	Applies a few miscellaneous text changes, like underlining and strikeout. Technically speaking, these aren't part of the font (the browser adds these).	none, underline, overline, line-through	Yes
text-transform	Transforms text so that it's all capitals or all lowercase.	none, uppercase, lowercase	Yes

Although most CSS font properties are straightforward, the font-family property has a nasty surprise—it doesn't always work. The inescapable problem you face is that no two computers have the same set of fonts installed, so the fonts you use to design your Web page won't necessarily be the fonts your visitors have installed on their PCs. A simple way to solve this problem is to create browsers that automatically download fonts they don't have, but this would be a Web nightmare. First, automatic downloads could swamp the average computer's hard drive with thousands of (potentially low-quality) fonts. Second, it would infuriate the software companies who sell fonts. (Fonts aren't free, and so wantonly copying them from one computer to another isn't kosher.)

There may be practical solutions to these problems, but, unfortunately, browser companies and the people who set Web standards have never agreed on any. As a result, any font settings you specify are just recommendations. If a PC doesn't have the font you request, the browser reverts to the standard font it uses whenever it's on a site that doesn't have special font instructions.

Given that caveat, you're probably wondering why you should bother configuring font choices at all. Well, here's one bit of good news. Instead of requesting a font and blindly hoping that it's available to a browser, you can create a list of font preferences. That way, the browser tries to match your first choice and, if it fails, your second choice, and so on. At the end of this list, you should use one of the few standard fonts that almost all PCs support in some variation. You'll see this technique at work in the next section.

Specifying a Font

To select a font, you use the font-family attribute. Here's an example that changes the font of an entire page:

body {
  font-family: Arial;
}

Arial is a sans-serif font found on just about every modern PC, including those running Windows, Mac OS, Unix, and Linux operating systems. (See Figure 6-6 for more about the difference between serif and sans-serif fonts.)

Serif fonts use adornments, or serifs, that make them easier to read in print. This book uses a serif font, for example. If you look closely at the letter "S" in the body text, you'll see tiny curlicues in the top-right and bottom-left corners. On the other hand, sans-serif fonts have a spare, streamlined look. They can make pages seem less bookish, less formal, more modern, and colder.

Figure 6-6. Serif fonts use adornments, or serifs, that make them easier to read in print. This book uses a serif font, for example. If you look closely at the letter "S" in the body text, you'll see tiny curlicues in the top-right and bottom-left corners. On the other hand, sans-serif fonts have a spare, streamlined look. They can make pages seem less bookish, less formal, more modern, and colder.

To be safe, when you create a font list, always end it with a generic font-family name. Every PC supports generic fonts under the font-family names serif, sans-serif, and monospace.

Here's the modified rule:

body {
  font-family: Arial, sans-serif;
}

At this point, you might be tempted to get a little creative with this rule by adding support for a less common sans-serif format. Here's an example:

body {
  font-family: Eras, Arial, sans-serif;
}

If Eras is relatively similar to Arial, this technique might not be a problem. But if it's significantly different, it's a bad idea.

The first problem is that by using a nonstandard font, you're creating a Web page whose appearance may vary dramatically depending on the fonts installed on your visitor's PC. Whenever pages vary, it becomes more difficult to really tweak them to perfection because you don't know exactly how they'll appear elsewhere. Different fonts take up different amounts of space, and if text grows or shrinks, the layout of other elements (like pictures) changes, too. Besides, is it really that pleasant to read KidzzFunScript or SnoopDawg font for long periods of time?

A more insidious problem happens if a visitor's computer has a font with the same name that looks completely different. Even worse, browsers may access an online database of fonts to try and find a similar font that's already installed. This approach can quickly get ugly. At worst, either of these problems can lead to illegible text.

Tip

Most Web page editors won't warn you when you apply a nonstandard font, so be on your guard. If your font isn't one of a small set of widely distributed Web fonts (more on those in a moment), you shouldn't use it.

Finding the Right Font

To make sure your Web page displays correctly, you should use a standard font that's widely available. But just what are these standard fonts? Unfortunately, Web experts aren't always in consensus.

If you want to be really conservative, you won't go wrong with any of these fonts:

Times
Arial
Helvetica
Courier

Of course, all these fonts are insanely boring. If you want to take more risk, you can use one of the following fonts, found on almost all Windows and Mac computers (but not necessarily on other operating systems, like Unix):

Verdana
Georgia
Tahoma
Comic Sans MS
Arial Black
Impact

To compare these different fonts, see Figure 6-7.

Figure 6-7. Have you spotted these fonts at large on the Web?

Verdana, Georgia, and Tahoma can all help give your Web pages a more up-to-date look. However, the characters in Verdana and Tahoma start off a bit large, so you usually need to ratchet them down a notch in size (a technique described in the next section).

For a good discussion of fonts, the platforms that reliably support them, and the pros and cons of each font family (some fonts look nice onscreen, for example, but they generate lousy printouts) see http://web.mit.edu/jmorzins/www/fonts.html/ and www.upsdell.com/BrowserNews/res_fontsamp.htm.

Font Sizes

Once you sort out the thorny issue of choosing a font, you may also want to change its size. It's important that you select a text size that's readable and looks good. Resist the urge to shrink or enlarge text to suit your personal preferences. Instead, aim to match the standard text size you see on other popular Web sites.

Despite what you might expect, you don't have complete control over the size of the fonts on your Web pages. Most site visitors use browsers that let them scale font sizes up or down, either to fit more text on-screen or, more commonly, to make text easy to read on a high-resolution monitor. In Internet Explorer and Firefox, you find these options in the View → Text Size menu.

A browser's font-size settings don't completely override the size you've set in your Web page, however. Instead, they tweak it up or down. For example, if you choose to use a large font size on your Web page (which corresponds to a setting of about 15 points in a word processor) and a visitor using Internet Explorer selects View → Text Size → Larger, the text size grows about 20 percent, to 18 points.

The fact that your visitors have this kind of control is another reason you shouldn't use particularly small or large fonts on your pages. When you combine them with browser preferences, a size that's a little on the large size could become gargantuan, and text that's slightly small could turn unreadable. The best defense for these problems is to test your Web page with different browsers and different font size preferences.

As you'll discover in the following sections, you can set font sizes in several ways.

Keyword sizing

The simplest way to specify the size of your text is to use one of the size values listed previously in Table 6-2. For example, to create a really big heading and ridiculously small text, you can use these two rules:

body {
  font-size: xx-small;
}
h1 {
  font-size: xx-large;
}

These size keywords are often called absolute sizes, because they apply an exact size to text. Exactly what size, you ask? Well, that's where it gets a bit complicated. These size details aren't set in stone—different browsers are free to interpret them in different ways. The basic rule of thumb is that the font size medium corresponds to a browser's standard text size, which is the size it uses (12 points) if a Web site doesn't specify a text size. Every time you go up a level, you add about 20 percent in size. (For math geeks, that means that every time you go down a level, you lose about 17 percent.)

The standard font size for most browsers is 12 points (although text at this size typically appears smaller on Macs than on Windows PCs). That means large text measures approximately 15 points, x-large text is 18 points, and xx-large text is 27 points.

Figure 6-8 shows the basic sizes you can choose from.

Note

When using size keywords, make sure your Web page specifies an XHTML doctype. If you don't, Internet Explorer renders your page in the dreaded "quirks" mode, which makes your text one size larger than it should be. As a result, your page won't look the same in Internet Explorer as it does in other browsers, like Firefox.

Figure 6-8. There are seven standard text sizes, ranging from xx-large to xx-small. You can dictate font sizes, too, by specifying a pixel measurement.

Percentage sizing

Another font-size option is to use percentage sizes instead of size keywords. For example, if you want to make sure your text appears normal size, use this rule:

body {
  font-size: 100%;
}

And if you want to make your text smaller, use something like this:

body {
  font-family: Verdana,Arial,sans-serif;
  font-size: 83%;
}

This displays text at 83 percent of its standard size. It doesn't matter whether the standard size is considered small (Internet Explorer) or medium (most other browsers). This particular example creates nicely readable text with the Verdana font.

It's just as easy to upsize text:

h1 {
  font-size: 120%;
}

But keep in mind that 100 percent always refers to the standard size of normal paragraph text, not the standard size of the element you're styling, like an h1 heading. So if you create a heading with text sized at 120 percent, your heading is going to be only a little bigger than normal paragraph text, which is actually quite a bit smaller than the normal size of an <h1> heading.

Using percentage sizes is the safest, most reliable way to size text. Not only does it provide consistent results across all browsers, it also works in conjunction with the browser size preferences described earlier.

Relative sizing

Another approach for setting font size is to use one of two relative size values— "larger" or "smaller". This is a bit confusing, because as you learned in the last section, absolute sizes are already relative—they're all based on the browser setting for standard text.

The difference is that relative size settings are influenced by the font of the element that contains them. The easiest way to understand how this works is to consider the following style sheet, which has two rules:

body {
  font-size: xx-small;
}

b {
  font-size: larger;
}

The first rule applies an absolute xx-small size to the whole page. If your page includes a <b> element, the text inside inherits the xx-small size (see Inheritance for a recap of inheritance), and then the second style rule steps it up one notch, to x-small.

Now consider what happens if you edit the body text style above to use a larger font, like this:

body {
  font-size: x-small;
}

Now all bold text will be one level up from x-small, which is small.

The only limit to the two relative sizes is that they can step up or down only one level. However, you can get around this limitation by using font numbers. For example, a size of +2 is a relative size that increments a font two levels. Here's an example:

body {
  font-size: x-small;
}

b {
  font-size: +2;
}

Now the bold text becomes medium text, because medium is two levels up from x-small.

Relative sizes are a little trickier to get used to than absolute sizes. You're most likely to use them if you have a style sheet with a lot of different sizes. For example, you might use a relative size for bold text if you want to make sure bold text is always a little bit bigger than the text around it. If you were to use an absolute size instead, the bold text would appear large in relation to small-sized paragraph text, but it wouldn't stand out in a large-sized heading.

Note

When you use absolute or relative sizes, you create flexible pages. If a visitor ratchets up the text size using his browser's preferences, the browser resizes all your other fonts proportionately.

Pixel sizing

Most of the time, you should rely on absolute and relative sizing for text. However, if you want to have more control, you can customize your font size precisely by specifying a pixel size. Pixel sizes can range wildly, with 12 pixels and 14 pixels being about normal for body text. To specify a pixel size, use the number immediately followed by the letters px, as shown here:

body {
  font-size: 11px;
}
h1 {
  font-size: 24px;
}

Note

Don't put a space between the number and the letters "px". If you do, your rule may work in Internet Explorer but it will thoroughly confuse other browsers.

As always, you need to test, refine, and retest your font choice to get the sizes right. Some fonts look bigger than others, and require smaller sizes. Other fonts work well at larger sizes, but become less legible as you scale them down in size.

Web purists avoid using exact sizes because they're horribly inflexible in Internet Explorer. For example, if a near-sighted visitor has upped the text size settings in Internet Explorer, this adjustment won't have any effect on a page that uses pixel sizing. (For some reason, other browsers don't suffer from this problem—they're able to resize pages even if you use pixel sizes.) As a result, using pixel sizes is a quick shortcut to inconsistent results. By using them, you could inadvertently lock out certain audiences or create pages that visitors find difficult to read or navigate on certain types of browsers. It just goes to show that in the Web world there's a price to be paid for getting complete control over formatting.