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-serifIn 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-serifCare 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-serifClagnut 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†.
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.
Design thinking · Typography · CSS techniques
David Clain wrote:
That’s an excellent post with some great and logical thinking – I must admit, I myself am often an offender; I almost inately put “font-family: Verdana, Tahoma, Helvetica, Arial, sans-serif” whenever declaring rules for body text. I’ve never thought much about x-height.
It’s good to read about (what I would assume is) a factor in why the CSS specification was designed as it was – to allow much more freedom in specifying fonts; it’s something that most don’t take advantage of by specifying “Times New Roman” as the first choice of fonts.
I’m a little upset by this entry as well, though – I’m dangerously close to purchasing Frutiger. ;-)
(PS – You’ll get a link from my blog. ;-))
Vinnie wrote:
Nice post. I try to specify as many fonts as possible, though I haven’t really thought about x-height before. A stylesheet I’m currently working on goes like this though:
font-family: “Gill Sans MT”, “Trebuchet MS”, Geneva, Verdana, Tahoma, sans-serif;
It’s a lot of fonts to specify but I think I can get just about everybody with that listing.
Krystle wrote:
typography kicks it
david wrote:
great blog!
i can tell you some funny font and the font tools at http://www.yaodownload.com/desktop-enhancements/fonts/