Section 18.2. Font Family


18.2. Font Family

The CSS specification provides the font-family property for specifying the font face for text elements.

font-family

Values:

     [[<family-name> | <generic-family> ] [,<family-name> |     <generic-family> ]*] | inherit 

Initial value:

Depends on user agent (the default font in the browsing device)

Applies to:

All elements

Inherited:

Yes

Use the font-family property to specify any font (or list of fonts, separated by commas), as shown in these examples:

     h1 {font-family: Arial; }     tt {font-family: Courier, monospace; }     p {font-family: "Trebuchet MS", Verdana, sans-serif; } 

The value of the property is one or more font names, separated by commas. This allows authors to provide a list of fonts, starting with a first choice, followed by a list of alternates. The user agent (typically a browser) looks for the first font on the user's machine and, if it is not found, it continues looking for the next font in the list until a match is made.

Note that in the third example, the "Trebuchet MS" is enclosed in quotation marks. Font names that contain character spaces must be enclosed in quotation marks (single or double). If the font name appears in an inline style, be sure to use single quotes if the style attribute uses double (or vice versa).

18.2.1. Generic Font Families

You should include a generic font family as the last option in your list so that if the specified fonts are not found, a font that matches their general style will be substituted. Generic family names must never be enclosed in quotation marks.

The five possible generic font family values are:


serif (e.g., Times New Roman)

Serif typefaces have decorative serifs, or slab-like appendages, on the ends of certain letter strokes (Figure 18-1, left).


sans-serif (e.g., Helvetica or Arial)

San-serif typefaces have straight letter strokes that do not end in serifs (Figure 18-1, right).


monospace (e.g., Courier or New Courier)

In monospaced typefaces, all characters take up the same amount of horizontal space on a line (Figure 18-2). For example, a capital W will be no wider than a lowercase i. Compare this to normal typefaces that allot different widths to different characters.


cursive (e.g., Zapf-Chancery or Comic Sans)

Cursive fonts emulate a script or handwritten appearance.


fantasy (e.g., Western, Impact, or some display-oriented font)

Fantasy fonts are purely decorative and would be appropriate for headlines and other display type. Fantasy is not commonly used for web sites, because it is difficult to anticipate which font will be used and whether it will be legible online.

Figure 18-1. Serif and sans-serif font characters


Figure 18-2. Monospace and normal font characters


18.2.2. Commonly Available Fonts

Because a font will display only if it is available on a user's hard drive, it makes sense to design with the most commonly available fonts, particularly for sites with wide-reaching audiences. So, which fonts can you rely on?

In general web design practice, designers tend to specify fonts from Microsoft's Core Web Fonts collection. This is a set of TrueType fonts (for both Windows and Mac) that have been specially designed to be easy to read on screens at small sizes. Microsoft released the fonts in 1996 and initially made them available for download. Today, they are installed automatically with Internet Explorer and other Microsoft software, so you can count on the majority of users having them available. Table 18-1 lists the fonts in the Core Web Fonts collection.

Table 18-1. Core Web Fonts from Microsoft

Serif

Georgia

Times New Roman

Sans Serif

Arial Arial Black

Trebuchet MS

Verdana

Monospace

Courier New

Andale Mono

Miscellaneous

Comic Sans MS

Impact

Webdings


Microsoft publishes an interesting online resource that lists which fonts are installed with its various popular applications and each version of the Windows operating system. There are also lists of the fonts that come installed with Macintosh OS X, Unix systems, and Adobe Type Manager. You'll find the font lists at www.microsoft.com/typography/fonts/default.aspx.


If you know your audience might have more specialized fonts installed, by all means, make a statement and go off the beaten path. You can always provide a more commonly available font as a backup in the list of font names.




Web Design in a Nutshell
Web Design in a Nutshell: A Desktop Quick Reference (In a Nutshell (OReilly))
ISBN: 0596009879
EAN: 2147483647
Year: 2006
Pages: 325

flylib.com © 2008-2017.
If you may any questions please contact us: flylib@qtcs.net