The new typography

Those of you who read clagnut on the web site (as opposed to the RSS feed) may have noticed the appearance of a Switch Typeface widget [the widget is cross-browser, backwards & forwards compatible – but more of that in a future post].

Typefaces are set in CSS using the font-family property. As a browser can only use fonts that are installed on the user’s system, font-family lets us specify a list of typefaces in order of preference, followed by a generic face. For example:

font-family: Arial, Helvetica, sans-serif

In this example the browser will look to use Arial. If Arial is not available, it will look for Helvetica. If that is not on the system either, the browser will use a default sans-serif font specified in its preferences.

There is no limit to the number of typefaces we can specify in the font-family cascade (often referred to as the font stack) yet so often designers stick to the same old choices just because they are on everyone’s system. Why not make the list longer and get a bit more adventurous with type choices? If users haven’t got your first, second, or even third choice, they’ll end up with what you would have given them anyway.

In our previous example, we’ve specified two related typefaces: Arial and its inspiration Helvetica. However, Univers was also derived from Helvetica and is one of the most widely sans-serifs in graphic design. Further, Univers’s designer, Adrian Frutiger, went on to design another variation simply called Frutiger. So let’s add these faces to our font stack; most people will still see Arial, however some will get one of our primary choices:

font-family: Frutiger, Univers, Arial, Helvetica, sans-serif

Care needs to be taken that we only specify related typefaces, particularly in their readable dimensions such as x-height. X-height describes the relationship between the height of a lower case x and a capital X and affects how big the font looks to the reader.

A typical mistake is specifying Verdana and Arial in the same font stack. As body text, Verdana appears significantly bigger than Arial due to the shape of its letters (Verdana has a large x-height). So if the user doesn’t have Verdana installed and Arial is shown instead, the type will often seem way too small. Far better to suggest a more fitting alternative such as Tahoma (from which Verdana was developed) and leave out Arial altogether:

font-family: Verdana, Tahoma, sans-serif

Clagnut uses three variations of typeface – serif for body copy, page title and supplementary titles (sidebars and forms); sans-serif for all sub-titles and supplementary text and fixed-width for code samples.

When specifying fonts on Clagnut, I’ve stuck to related groups of typefaces. Primarily, I specify Bigelow & Holmes’s Lucida family (Lucida Bright, Lucida Grande/Lucida Sans, Lucida Console). I back these up with Microsoft’s Web fonts (Georgia, Verdana, Andale Mono) and more recently with Bitstream’s new Vera family (Vera Serif, Vera Sans, Vera Sans Mono) which is propagating through Linux systems. These three families are similar in their proportions, as you can see from this type sheet. I’ve have shown Arial and Times New Roman on the type sheet to illustrate why I’ve not included them in the font stack – they appear far too small relative to the other faces.

To make font stacks quicker to edit across the board and to enable the Typeface Switcher, I’ve isolated the font-family specifications into a separate stylesheet. Here’s an extract:

/* page heading, main body text and side-col subheadings */
font-family: "Lucida Bright", Lucidabright, Georgia,
 "Bitstream Vera Serif", serif;

/* main area subheadings */
font-family: "Lucida Grande", "Lucida Sans",
 "Lucida Sans Unicode", "Lucida", Verdana,
 "Bitstream Vera Sans", sans-serif; 

/* code samples */
font-family: "Lucida Console", "Andale Mono",
 "monotype.com", "Bitstream Vera Sans Mono", monospace;

You’ll notice quite a few repetitions of the Lucida family within individual font stacks. This brought about by results of the VisiBone automated font survey – a list of those typefaces actually installed on users’ systems. The survey highlighted variations in Lucida naming conventions: on Windows & Mac the serif is called Lucida Bright whereas on Linux the serif is called Lucidabright (the missing space makes a difference). Similarly the sans-serif on OS X is Lucida Grande; more common on Windows and older Macs are Lucida Sans and Lucida Sans Unicode. The sans on Linux is more often called simply Lucida.

Discrepancies will be apparent in other font families. For example, the Microsoft monospaced font Andale Mono used to be called Monotype.com. Both names are equally prevalent according to the Visibone survey†.

Go on, push the boat out

Ultimately if we couple research with a little understanding & knowledge of typefaces, we can safely make full use of the font-family cascade and be more adventurous in which fonts we specify.

† The Visibone survey is still collecting data so please run your own system through the test – I recommend you use IE as the test runs much quicker than on Mozilla. The more data, the better the results of this is an invaluable resource for type selection.