A type family (commonly referred to in Web design as a font family) is a category of typefaces (fonts) that have similar characteristics. Each individual character within a font is referred to as a glyph. The text that you type in your HTML document acts, for the most part, like the text in a word processor. The advantages of HTML text are that it is easy to edit if changes are required, and it can adjust to the width of the screen on which it is being viewed. In addition, content is often stored within databases, and then out put as HTML text.
However, HTML text has some severe limitations for design purposes. By and large, most of the textual control is left up to the visitor's browser, and you can't do things like run text vertically rather than horizontally. Even more stifling is the fact that you are limited to the fonts that are available on the visitor's machine (see "Using Browser-Safe Fonts" later in this chapter). So if you have a specific font on your machine that you want to use, but the people viewing your site don't have that font on their machines, you're out of luck.
CSS gives designers greater control of many common typographic features (such as line and word spacing), but even with CSS, HTML text is severely limited, particularly in the special-effects department. This is why many designers turn to text in graphics or vector graphics to get the look they want.
Specifying the Character Set
If you are using XHTML instead of HTML, whichif you haven't caught on by nowis what I heartily recommend, then you will need to specify the character set in use by your page. A character set is simply a list or repertoire of characters with a unique code or name.
You specify the character set in the head of your HTML page using a meta tag. The most popular international character set is the UTF-8 (8-bit Unicode Transformation Format) character set:
<meta http-equiv="Content-Type" content="text/html; charset= utf-8" />
Alternatively, if you are only writing in English, another common character set is the ISO 8859-1 character set:
<meta http-equiv="Content-Type" content="text/html; charset= ISO-8859-1" />
Both UTF-8 and ISO 8859-1 work about the same for English, but UTF-8 supports other alphabets.
If you specify a character in your HTML that doesn't exist in the specified character set, the browser generally will display an error marker in place of the character.
Generic Font Families
CSS defines five generic font families into which most fonts can be categorized (Table 3.1).
Like cursive fonts, fantasy fonts are best reserved for decoration. You should choose fantasy fonts carefully to reinforce the look and feel of your Web site, since each fantasy font has its own particular personality.
Although it does not have an official CSS designation, there is another important category of fonts to consider. Dingbats, also called symbol or picture fonts, do not represent numbers or letters, but are instead a collection of icons or pictograms each corresponding to a letter on the keyboard. The most common example of this font type is Webdings, which is installed on most computers. Webdings is a collection of common international symbols (Figure 3.1). Although these glyphs can be used in place of a graphic version of the icon, there is no guarantee that the font will be installed.
Figure 3.1. The dingbats for A-Z, a-z, and 0-9.
A more reliable alternative to dingbat fonts are HTML character entities. These are a collection of specialized glyphs that, instead of being represented by a single letter, are represented by code that begins with an ampersand (&) and ends with a semicolon (;). For example, the ampersand is represented in the code as:
For many characters (such as the ampersand itself), this is the only way to have them display consistently across browsers and operating systems. Figure 3.2 illustrates some common character entities.
Figure 3.2. A few character entities. These are generally nonstandard typographic characters, math, and science symbols, as well as non-English characters.