Watkins Web 3: Blog

James Muspratt
Mar 5

Intro to Webfonts

The font stack

Traditional CSS font stacks work by accessing fonts (by name) that are installed on the user’s computer. If the font at the beginning of the stack isn’t installed, the browser will try to use the next font in the stack that is available. Remember to end your stacks with a generic keyword like serif, sans-serif, or monospace.

body  {
	font-family: georgia, serif;
	}
h1, h2, p {
	font-family: "Helvetica Neue", helvetica, arial, sans-serif;
	}
code {
	font-family: "Courier New", courier, monospace;
}

A quick note: very few fonts common to most computers are optimized for screen display, and you should be particularly careful about the scale at which you set them. For instance, Bodoni and Baskerville have very thin strokes designed for print resolution; even the advanced anti-aliasing used by Mac OS X and Windows 7 won’t produce a good result if you set these fonts at 10px.

Cheat sheet: Verdana and Georgia are probably the best fonts that are both common to most Mac and Windows machines and are designed for screen. Thank you, Matthew Carter. Some would add Lucida Grande (or Lucida Console on Windows) to this list, but it doesn’t have real italics.

Here’s the comparison of commonly-used fonts I showed in class.

Webfonts

In the past two and half years, webfonts — that is, font files served from the server and loaded by the browser for a particular website — have gone from theory to reality. The major reasons have more to do with licensing deals than technological progress, but in any case, all the major browsers now support webfonts, though not all the same format. (All the good browsers use the emerging .woff file format, while IE requires a .eot file.)

Depending on licensing and the font vendor, you may end up hosting the font files on your own server or you may link to a font service’s CSS file or Javascript. (All webfont services/foundries will have instructions on how to do this embedding.) Once this basic embedding is done, you can then use straightforward CSS font stacks to assign elements your font choices. Note that good fonts have separate font files for bold and italic, so you may have to do this kind of thing to access the proper files:

body  {
	font-family: "FranklinGothic", arial, sans-serif;
	}
body strong {
	font-family: "FranklinGothic-Bold", arial, sans-serif;
	font-weight: normal; /* prevent double-bolding */
	}
body em {
	font-family: "FranklinGothic-Italic", arial, sans-serif;
	font-style:normal; /* prevent double-italicization */
	}

Note that this makes fallbacks problematic, since if our webfont fails we can’t specifically fall back to an italic version of Arial.

The precise typographic results you get from a webfont — especially as regards anti-aliasing (blurriness) — can vary greatly depending on the care with which the service has constructed the webfont file. The web is filled with complaints about hastily converted fonts that show poor “hinting,” which is the process by which fonts should be customized to anti-alias well. The upshot: don’t buy a webfont from just anyone — use a respected service or foundry that has shown a commitment to quality.

Here are some of the higher quality places to start if you’re interested in using webfonts on a project:

  • Typekit (some free fonts, but primarily an annual subscription service)
  • Myfonts (primarily one-time-purchase, self-hosted webfonts)
  • Typotheque (small Dutch type foundry and webfont service, available as one-time purchases)
  • Webtype (both subscription and self-hosted)
  • Google Fonts (free fonts of mixed quality)

In related news, Hoefler & Frere-Jones are supposedly launching their own webfont service sometime soon. At the moment they have two beta-testers: Jason Kottke and Barack Obama.

Further Reading