The fonts you choose convey as much of your Web site’s message as your words. The initial response to a Web page is a visceral one—a reaction to the visual design—rather than a conscious thought. This happens within seconds of the page loading, and beyond the images, chrome, and colors, one of the first things the visitor notices is all of the squiggles making words.
The sad fact is, though, Web typography is mostly boring because the only font families at your disposal (unless you put the text into a graphic) are the typefaces installed on the end user’s machine. All this may seem very limiting at first, but it’s not nearly as bad as most designers believe.
The process of defining the typeface for a particular block of text is relatively straightforward—specify a list of font-family names, separated by commas, with the last name in the list being a generic font family (serif, sans-serif, monospace, handwritten, or fantasy). If a particular font in the list is not available, the browser moves to the next one, until there is a match.
font-family: georgia, times, “times new roman”, sans-serif.
However, the simplicity of setting a typeface belies the complexity of picking the right font to communicate your message.
It is estimated that there are more than 100,000 fonts available electronically. Yet, if you look around the Web, you would be forgiven if you thought there were only three—Arial (Helvetica on the Mac), Times New Roman (Times on the Mac), and Georgia. These are the three most popular fonts because—along with Verdana, Trebuchet MS, Andale Mono, Arial Black, Courier New, Comic Sans MS, Impact, and Webdings—they are the core Web fonts that are widely distributed on Mac and Windows computers. So, you are almost guaranteed that these 11 fonts will be on the end user’s machine. Eleven fonts out of tens of thousands. Not very inspiring, is it?
The 11 core Web fonts are installed almost universally on all computers. However, there are many other fonts commonly installed on the end user’s computer that are commonly overlooked. These fonts can be safely employed in your designs, using CSS:
01 | Operating system fonts: All operating systems come with pre-installed fonts. In addition to the core Web fonts, Windows XP adds 9 typefaces, Windows Vista adds another 7 (16 total), and Mac OS X supplies a whopping 30 fonts. |
02 | Microsoft Office fonts: The one application almost universally installed on all computers is Microsoft Office. Love it or hate it, Microsoft Office 2007 has another 121 fonts, while its Mac equivalent (Office 2008) includes 68 fonts. Even better, the Windows and Mac lists have 62 fonts in common. |
03 | iLife fonts: All Macs (consumer and Pro) have Apple iLife pre-installed, which has 13 fonts pre-installed. |
Note
For a complete list of the Web-Safe fonts with samples, check out speaking-in-styles. com/typography/web-safe-fonts.
That makes a total of 148 fonts likely to be on a given Windows box and 120 fonts on Macs, with an overlap of 73 fonts.
The holy grail of Web typography is downloadable fonts. After all, Adobe Flash allows you to use any font at your disposal in your design by embedding the font in the SWF file. Why can’t we just download a font file (like we do an image file) to be used by CSS? The short answer is, surprisingly, we can, or at least CSS has the grammar to allow exactly that.
Using the @fontface rule you can set the source of a font file and give it a unique name for use within your designs. For example, placing
@font-face { font-family: “fontin sans”;src: url(fonts/Fontin_Sans_R_45b.otf);}
at the top of your CSS imports the Open Type font Fontin_ Sans_R_45b.otf, which can be referenced in the CSS as fontin sans.
Before you get too excited, though, currently, only Sa3.1+ supports the downloading of the common font formats True Type (.ttf ) and Open Type (.otf ). Although both Op and FF have plans to add support, the big holdout it is IE. What could Microsoft possibly have against downloadable fonts? To understand their reasoning, you would first have to understand the vagaries of end user license agreements (EULA) and intellectual property (IP). Still, you can support downloadable fonts in your designs as long as you are willing to think fluidly about your typography.
At first, Web typography can seem stiflingly limited, with few typestyles to choose from and limited controls. This is especially true if you are a designer who wants your results to look exactly like in your visual comps. If you are willing to think more fluidly about your typography, though, giving up some control, you will find more alternatives.
As discussed in the previous section, we have three main sources for fonts—core Web fonts, Web-safe fonts, and downloadable fonts. The advantage of CSS is that we can choose any or all of these sources and specify a list of fonts to be used, depending on the end user’s setup.
In the example, the font Fontin Sans is downloaded with Web-safe font backup of Optima, a core Web font backup of Trebuchet MS, and a final generic font backup of Sans-Serif.
For the level 1 header, I’m using Garamond from the Web-safe font list, Times from the core Web fonts list, and Serif as the generic font.
Although fluid typography frees you to try different typefaces, there are a few important ideas to keep in mind while putting together your font-family list:
| Choose fonts that are as visually similar as possible. |
| For headline copy, use fonts with similar widths and kerning. Headlines generally have a finite space they can fill (one or two lines), so it’s important that the typefaces you choose run roughly the same length. |
| For body copy, select fonts with bold, italic, and bold/italic versions. Fonts that do not have specific weight and style versions will be synthesized by the browser, which is generally not as attractive as a true version. |
| If you use a downloaded font and/or a Web-safe font, always include core Web fonts and generic font families as backups. Most browsers will not support downloadable fonts, and some computers may not have the Web-safe font you chose. |
| Finally, test the fonts in different combinations. If you use different font families in different selectors, make sure all of the fonts work well together, since you can never predict which two will be used. |
Fontin Sans | Optima | Trebuchet-MS |
|---|---|---|
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo metus sit amet libero. Cras nisl neque, lacinia id, mollis vel, dictum ac, ante. Vestibulum tortor dui, convallis a, dapibus vitae, volutpat nec, justo. Integer dui. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo metus sit amet libero. Cras nisl neque, lacinia id, mollis vel, dictum ac, ante. Vestibulum tortor dui, convallis a, dapibus vitae, volutpat nec, justo. Integer dui. | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum commodo metus sit amet libero. Cras nisl neque, lacinia id, mollis vel, dictum ac, ante. Vestibulum tortor dui, convallis a, dapibus vitae, volutpat nec, justo. Integer dui. |
Because styles are inherited, the first place to set your default typographic styles (or to change them from the browser defaults) is in the body, input, and select HTML selectors. This will set your defaults over the entire page, so you will only need to set these properties again if you want to change them for a specific element.
Headers are commonly differentiated through font family, color, size, and weight. You might also want to add some letter or word spacing, but use those styles sparingly—a little goes a long way.
01 | When setting header styles, it’s best to set all of the common styles first (05). |
02 | Set differentiating styles (usually size) for each individually (10–13). |
03 | Set styles for specific instances using contextual styles—for example, how the level 2 header should be treated if it’s in column 1 rather than column 3 (14). |
If you set your base styles in the body HTML selector, generally there’s not a lot of work to do for the paragraph tags (<p>) and block quote (<blockquote>) tags.
| For paragraphs, you may want to make the text a bit smaller than the standard, set margins above and below, and I always recommend opening up the line height to at least 1.25 line spacing (125%) or higher. |
| For block quotes, you may also want to set a border, background color, or background image to set the quote off from other text on the page. |
Typographically, lists are indented and often have a lower line height than paragraphs. Additional, you can set the bullet style, either choosing one of the predefined bullet styles or creating your own image for the bullet. You might think that using the list-image property is the easiest way to do that, but that’s not common practice. Using a background image gives a lot more versatility.
Note
You can also use the list tag to create a menu or controls, as shown in Chapter 10, “Navigation.”
