Understanding Typography on the Web

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).

Table 3.1. Generic Font Families

NAME	EXAMPLE
Serif	Times New Roman
Sans-serif	Helvetica and Arial
Monospace	Courier New
Cursive	Brush Script MT
Fantasy	Papyrus

• Serif. A serif is the small ornamentation at the end of a letter that gives it a distinguishing quality. Serifs are holdovers from the days of stonecutting and pen strokes. Serifs often improve legibility by making individual letters stand out from their neighbors.

  Serif fonts are generally best suited for the display of larger text on screen or for smaller printed text. They are not so good for smaller text on a screen, because the serifs often obscure the letter. Serif fonts often portray a more conservative feel.

• Sans-serif. As you might guess, sans-serif fonts are those fonts without serifs.

  Although the characters are less distinctive, sans-serif fonts work better for smaller text on a screen. Sans-serif fonts often portray a more modern feel.

• Monospace. Although monospace fonts can have serifs or not, their distinguishing feature is that each letter occupies the same amount of space. The lowercase letter l, for example, is much thinner than the uppercase letter M. In non-monospace fonts, the letter l occupies less space than the M, but a monospace font adds extra space around the l so that it occupies the same amount of space as the M.

  Monospace fonts work best for text that has to be exactly (but not necessarily quickly) read, such as programming code, in which typos can spell disaster. Although easier to scan, monospace fonts can become monotonous for reading large amounts of text. Monospace fonts often give technical or typewritten feel to text.

• Cursive. Cursive fonts attempt to mimic cursive or calligraphic handwriting, usually in a highly stylized manner with the letters generally appearing partially or completely connected.

  Cursive fonts are best reserved for decoration and large headlines; they are not very good for reading large chunks of text. Cursive fonts give an energetic and expressive feel to text.

• Fantasy. Decorative fonts that don't fit into any of the preceding categories are referred to as fantasy fonts. These fonts usually are extremely ornamental but are still letters, so exclude dingbats or picture fonts, illustrations, or icons.

Graphic and Vector Text

Unlike HTML text, graphic text is a graphic (GIF, PNG, or JPEG) that just happens to have text in it. This means that you can do anything you want in terms of how the text looks and use any font you want, regardless of whether site visitors have that font on their machines.

You also have all the limitations that go along with using graphics, such as larger file sizes (larger graphics mean slower download times) and the difficulty of editing text. Graphics also take up a set amount of screen space and may be cut off if the visitor's screen is not large enough, do not re-flow to take up more space, and often do not print clearly.

Vector text combines the best of both worlds. Like HTML text, it is easy to edit and can position itself dynamically, depending on the screen size. But like graphic text, vector text allows you to apply special effects easily (on a slightly more limited scale), and you can use any font that you want.

Unfortunately, most browsers in use today do not natively support vector text (i.e., it isn't built in).

Currently, the only (mostly) universal way to get vector text into a Web site is to use Macromedia's Flash plug-in. Although a plug-in, most browsers come with it pre-installed.

The Scalable Vector Graphics (SVG) format, which is now a W3C standard, may also one day be a viable option, but is currently only natively supported in recent versions of Firefox and Opera, with implementation coming soon in Safari. Of course, this only makes up at most 15 percent of the Web-viewing public.

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.

Dingbats

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.

Character Entities

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.