Step One
Choose the font that you wish to be your first, ideal choice. This can be any font at all, but for practical purposes it should be a font on your system. I’m going to choose Segoe UI Light, which is installed with Windows 7 and Vista.
Step Two
Determine the generic font-family to be the last, catch-all choice: look at the font you have just chosen and determine whether it is a serif, sans-serif, cursive, monospace or fantasy font.
| Font Type | Description |
|---|---|
 serif | Serif fonts are the oldest printed typefaces, with forms originating from the time of the Roman Empire. Serifs are the small structural details placed at the terminating points in the strokes of each letter. Serif fonts are traditionally used in commercial publishing: most books, newspapers and magazines use a serif typeface for their body text. If you do not specify a font for use in your web page, a serif font, such as Times or Times New Roman, is used by most browsers by default. You may hear serif fonts referred to as slab serif, Egyptian, or Roman fonts. |
 sans-serif | Sans-serif fonts are fonts without serif structures, but which still use proportional spacing (which distinguishes them from monospaced fonts). Traditionally used for headings, sans-serif fonts are increasingly being used for body copy. Classic sans-serif fonts include Helvetica, Futura (Stanley Kubrick's favourite font for titling), and Gill Sans. You may also hear sans-serif fonts referred to as Gothic, Doric, humanist or linear fonts. |
 Monospace | Monospace fonts are those in which each letter uses the same amount of horizontal space. (In other words, a monospaced A character will have the same amount of horizontal space reserved for it as an I.) This gives monospace typefaces an appearance associated with computers, electronics, and dot-matrix printers. Classic monospace fonts include Courier and Andale Mono; monospace fonts may also be referred to as fixed pitch or non-proportional fonts. In an HTML document, content wrapped in a |
 fantasy | While they contain legible characters, fantasy fonts are primarily intended to be used for decoration. The default fantasy font for the Mac, Papyrus, is a good example of this, as a classic example of the lazy typographer’s go-to font for imparting an “exotic” feel (used recently, and to some derision, as the font for Na'vi language subtitles in James Cameron’s Avatar). |
 cursive | Cursive fonts are intended to resemble handwriting, and as such should usually be used sparingly. The classic (and much-derived) example of a cursive font is Comic Sans |
This generic font-family is the end-cap to the choices for your declaration. In my case, Segoe UI Light is a sans-serif font, so my declaration so far would be:
h2 {
font-family: Segoe UI Light, sans-serif;
}Step Three
Create a list of fonts between the ideal choice and the generic font family that are increasingly common and in declining order of preference, covering Mac, Windows and (ideally) Linux. In other words, the second font choice for our example should be as similar to Segoe UI Light as possible, but more common. The font should probably be in the same type classification as the first, ideal choice. For the Mac, I would argue that Helvetica (more ideally Helvetica Light) would be the best choice, as it is installed on 100% of OS X systems. Myriad would also be a good option. Arial (again, ideally a light version) would be a good final catch for both PC and Mac, with Nimbus Sans L to cover Linux. So our declaration would list these in declining order of preference:
h2 {
font-family: Segoe UI Light, Helvetica Light, Helvetica, Myriad, Arial Light, Arial, Nimbus Sans L, sans-serif;
}It is possible that fonts like Helvetica will have several font-weights built into them. Using a font-weight: 100 will make no difference to fonts that are already light, but may yield a light version of a standard font, so it should be added to the declaration.
Photograph by Greenzowie used under a Creative Commons Attribution-NonCommercial-NoDerivs 2.0 Generic license
Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
