All in the Font Family

Web Review
November 1997

Fonts. There are literally thousands of them, each one putting a slightly different spin on the look of a language. Graphic designers spend hours looking for the perfect font for a project. Web designers, on the other hand, often didn't bother at all, because until style sheets, the Web didn't offer really good font control.

Oh, sure, there was the FONT tag, which you could use to define a certain font or group of fonts-- for example, <FONT FACE="Helvetica,Arial">. But what happened if a user's browser didn't have either of those fonts? The browser would use its default setting, which often as not is something totally unlike the specified fonts. Not only that, but control over the font's size was crude at best, being defined on a scale from one to seven.

Now, of course, CSS1 offers a much better and more comprehesive system for setting font styles, sizes, and more. Because of this fact, by the way, the FONT tag is deprecated in HTML 4.0, which means it's on its way to being dropped entirely from the specification, so you may want to consider how you're going to make the transition from the FONT tag to using the CSS1 font properties. To help you with this, and in keeping with the spirit of this week's issue, let's take a closer look at how CSS1 handles fonts.

A Family Matter

Let's say that we want a certain font to be used for the body text of a document; say, Times, which is a very common font. We don't care about the font's size, or anything else. The easiest thing to do is declare BODY {font-family: Times;} and leave it there. It's likely that 95% of the computers out there will have Times as an installed font, and they'll use it to display the page. But what about the other 5% which never had Times, or where it was removed from the system? Back to the user's default font, whatever that is.

This is why you want to make sure that you declare a font family, not just a particular font, when making a font-family declaration. (After all, the property name itself encourages you do to so.) Times is a serif font, so we modify the previous declaration to be BODY {font-family: Times,serif;}. Using this declaration, if the user's computer doesn't have Times available for whatever reason, the browser will pick a similar font-- Palatino, perhaps, or New Century Schoolbook.

As for the families, there are five of them, which correspond to the five generic-family values: serif, sans-serif, monospace, cursive, and fantasy. Serif fonts are much more traditional print-page-looking fonts, like Times or New Century Schoolbook. If you look closely, the strokes in each letter have areas which are thinner and thicker, as though inscribed with a pen. Sans-serif fonts, on the other hand, are somewhat simpler, with every stroke of a consistent width throughout its length; examples are Helvetica, Arial, and Verdana.

Cross-Platform Fonts

When designing pages which will only be viewed by one type of computer-- say, just Macs-- you can get away with specifying fonts which you know will be available to your audience. Otherwise, it helps to know which fonts are available to the vast majority of computers, or are at least close enough to each other that there is no appreciable difference. Here are a few of the most common.
Times, TimesNR, New Century Schoolbook
Helvetica, Arial, Verdana
Mistral, Author

In both serif and sans-serif fonts, letter widths are variable. A lower-case "L" is skinnier than a lower-case "M," and the text is placed accordingly. In a monospace font, though, every letter is exactly the same width, as though typed out with an old-fashioned typewriter. Courier is probably the best-known monospace font, and if you've ever used <TT> or <PRE>, then you know what a monospace font looks like. Cursive fonts are about what they sound like-- they appear to be cursive writing, and fantasy fonts are basically the leftovers. A fantasy font might look like cows, or cattle brands, or to be made out of piping, or anything.

Okay, but what happens if you want to declare the use of a font whose name is longer than just one word? New Century Schoolbook is a good example. Let's say that we want to use it instead of Times. If so, then here's how the declaration looks: BODY {font-family: "new century schoolbook",serif;}. Note that the font's name here is enclosed in quotation marks, which is vital in cases where the name includes spaces. You can use either single-quotes or double-quotes, whichever you prefer. As for the capitalization of the fon'ts name, it doesn't really matter.

Simpler, Yet More Complex

There is a shorthand font property, of course, called simply font. It accepts the same values as font-family, plus a lot more, but there is one thing you have to beware. Let's take a simple font-family declaration and drop the -family, so that we have simply BODY {font: Times,serif;}. Believe it or not, this declaration is illegal, wrong, and likely to cause problems with your browser. Why? Because it doesn't include a font size, and according to the specification, a font size is required when using font. So you have to fill in something, even if it's the default value of medium, like this: BODY {font: medium Times,serif;}. You also need to put the font's size before the font's family; again, it's what the specification requires.

As we've seen, there are a few things you have to watch out for if you want your font declarations to yield what you had in mind, or at least something close.

By following these simple steps, you'll be well on the way to great page design using style sheets.