Font Sets -- Get the most out of your fonts

We all know the best way to create a search engine friendly site is to use HTML text wherever possible (if you didn't, then read our SEO article). The trouble is, this means you're limited to only using the fonts available on all platforms, right? Wrong.

Introducing font sets

Font sets (or font stacks) are simply lists of fonts. Using the font-family CSS attribute they provide the browser with a list of fonts to use - if the first font in the font set isn't available then the second will be used, and then the third and so on.

For example, if you wanted a heading in Helvetica then that would be the first font in the list. Since most Windows users won't have Helvetica installed you would need to provide an alternative, such as Arial, as your second choice. There are also Linux users to think about too, most of which won't have Helvetica or Arial installed by default, so "Nimbus Sans L" would become your third choice. Finally, you would end up with sans-serif, which is a generic fall-back font that is defined by the browser.

The following CSS statement is equivalent to the details entered into the Edit Font Set dialog in figure 1.

font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif
The Edit Font Set dialog containing a new font stack
Figure 1. The Edit Font Set dialog containing a new font stack

To a certain degree, Freeway already manages this for you. When you select some HTML text and open the Font pulldown you will see a list of seven default fonts. These are actually font stacks that we've provided for you, but it's by no means a definitive list. You can have a huge amount of typographical fun in your sites by creating your own.

In this post we've mostly listed font stacks defined by Nathan Ford of Unit Interactive, along with some extras that we've thrown in to make sure your font stacks are going to work well across all platforms and browsers. One of the things we love about Nathan's article is that he splits his font stacks into title and paragraph categories. He does this because certain fonts work better at smaller sizes, while others work better at larger sizes. You'll see that the Helvetica body font stack will actually use "Helvetica Neue" since it's a little wider and works better at smaller sizes. A lot of the fall-back fonts will be ordered differently for the same reason.

We've also listed some fonts that look great on the Mac, and show you a way to work around the small nuances needed for them to work across all browsers, plus suitable replacements for them on Windows and Linux.

We've taken screen-shots of each font stack in Safari on Snow Leopard and IE8 on Windows XP so you can compare them yourselves and decide which ones you want to use in your designs. Where possible, we've also provided a Linux alternative for each font stack too.

Adding new font stacks in Freeway

To add font stacks that will be used across all new documents (old documents won't pick these up but you can add them to the document in the same way):
  1. Open Freeway by clicking on the Dock icon or double clicking the application icon
  2. Go to the Edit menu and choose Font Sets...
  3. Click New… to open the New Font Set dialog
  4. In the Name field type the name of your font stack
  5. Select the font you want Freeway to use when you choose the font stack from the Screen font pulldown
  6. Type or paste the list of fonts you want to use in the Alternative fonts field. Each font in the list should be separated by a comma, any fonts containing spaces should be quoted.

Stack them up

Below is a list of stacks. To add them to Freeway, follow the steps above. If you are already working on a document then add them while the document is open, just remember to click the Make Default button if you want to use the stacks in new documents.

You may notice that some of the font stacks have a font-weight added to the end. We've done this because weight variants of fonts (such as Light or UlraLight) aren't recognized in Firefox. Adding the original version of the font later on in the stack and a specific font-weight after the stack will force Firefox to use the original but with a lighter weight. In addition to this, Opera only recognizes font variants in a certain way which we have also added for you.

Safari 4.0.4
Mac OS X 10.6

IE8
Windows XP

Font stack

Name: Arial p/t
Screen font: Arial
Alternative fonts: Arial, "Helvetica Neue", Helvetica, "Nimbus Sans L", FreeSans, sans-serif
Name: Baskerville p
Screen font: Baskerville
Alternative fonts: Baskerville, "Baskerville Old Face", "Bitstream Charter", "Times New Roman", Times, serif

Name: Baskerville t
Screen font: Baskerville
Alternative fonts: Baskerville, "Baskerville Old Face", "Bitstream Charter", Times, "Times New Roman", serif
Name: Bookman Old Style p/t
Screen font: Bookman Old Style
Alternative fonts: "Bookman Old Style", "URW Bookman L", Georgia, Times, "Times New Roman", serif
Name: Century Gothic p/t
Screen font: Century Gothic (if you don't have this font available then choose Apple Gothic
Alternative fonts: "Century Gothic", AppleGothic, "URW Gothic L", Arial, sans-serif
Name: Copperplate Light p/t
Screen font: Copperplate Light
Alternative fonts: Copperplate-Light, "Copperplate Light", Copperplate, "Copperplate Gothic Light", serif; font-weight:300

At the time of writing we were unable to find a Linux alternative for this stack.

Safari 4.0.4
Mac OS X 10.6

IE8
Windows XP

Font stack

Name: Futura p/t
Screen font: Futura
Alternative fonts: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, AppleGothic, "URW Gothic L", sans-serif
Name: Garamond p
Screen font: Garamond
Alternative fonts: Garamond, "Hoefler Text", Gentium, Times New Roman, Times, serif

Name: Garamond t
Screen font: Garamond
Alternative fonts: Garamond, "Hoefler Text", Palatino, "Palatino Linotype", Gentium, serif
Name: Geneva p
Screen font: Geneva
Alternative fonts: Geneva, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", Verdana, FreeSans, sans-serif

Name: Geneva t
Screen font: Geneva
Alternative fonts: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", FreeSans, sans-serif
Name: Georgia p
Screen font: Georgia
Alternative fonts: Georgia, Palatino, "Palatino Linotype", "DejaVu Serif", Times, "Times New Roman", serif

Name: Georgia t
Screen font: Georgia
Alternative fonts: Georgia, "DejaVu Serif", Times, "Times New Roman", serif
Name: Gill Sans p
Screen font: Gill Sans
Alternative fonts: "Gill Sans", GillSans, "Gill Sans MT", Calibri, "Trebuchet MS", "Nimbus Sans L", sans-serif

Name: Gill Sans t
Screen font: Gill Sans
Alternative fonts: "Gill Sans", GillSans, "Gill Sans MT", "Trebuchet MS", Calibri, "Nimbus Sans L", sans-serif

Safari 4.0.4
Mac OS X 10.6

IE8
Windows XP

Font stack

Name: Helvetica p
Screen font: Helvetica
Alternative fonts: "Helvetica Neue", Arial, Helvetica, "Nimbus Sans L", FreeSans, sans-serif

Name: Helvetica t
Screen font: Helvetica
Alternative fonts: Helvetica, "Helvetica Neue", Arial, "Nimbus Sans L", FreeSans, sans-serif
Name: Impact p/t
Screen font: Impact
Alternative fonts: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif

At the time of writing we were unable to find a Linux alternative for this stack.
Name: Lucida Sans p/t
Screen font: Lucida
Alternative fonts: "Lucida Sans", "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", sans-serif
Name: Lucida Grande p/t
Screen font: Lucida
Alternative fonts: "Lucida Grande", "Lucida Sans Unicode", "DejaVu Sans", sans-serif
Name: Monaco p/t
Screen font: Monaco
Alternative fonts: Monaco, "Lucida Console", "DejaVu Sans Mono", monospace

Safari 4.0.4
Mac OS X 10.6

IE8
Windows XP

Font stack

Name: Palatino p
Screen font: Palatino
Alternative fonts: Palatino, "Palatino Linotype", Georgia, Gentium, Times, "Times New Roman", serif

Name: Palatino t
Screen font: Palatino
Alternative fonts: Palatino, "Palatino Linotype", "Hoefler Text", Gentium, Times, "Times New Roman", serif
Name: Tahoma p
Screen font: Tahoma
Alternative fonts: Tahoma, Geneva, Verdana, "DejaVu Sans", sans-serif

Name: Tahoma t
Screen font: Tahoma
Alternative fonts: Tahoma, Verdana, Geneva, "DejaVu Sans", sans-serif
Name: Times p/t
Screen font: Times
Alternative fonts: Times, "Times New Roman", Georgia, FreeSerif, serif
Name: Trebuchet MS p
Screen font: Trebuchet MS
Alternative fonts: "Trebuchet MS", "Lucida Sans Unicode", "Lucida Grande"," Lucida Sans", "DejaVu Sans", Arial, sans-serif

Name: Trebuchet MS t
Screen font: Trebuchet MS
Alternative fonts: "Trebuchet MS", Tahoma, "DejaVu Sans", Arial, sans-serif
Name: Verdana p
Screen font: Verdana
Alternative fonts: Verdana, Geneva, Tahoma, "DejaVu Sans", sans-serif

Name: Verdana t
Screen font: Verdana
Alternative fonts: Verdana, Tahoma, Geneva, "DejaVu Sans", sans-serif

The following font stacks are ones that we think look great but, unfortunately, don't have great Windows or Linux alternatives. The UltraLight stack isn't great as paragraph text since it's a little hard to read at that weight. Notice that we add font-weight again so they work as expected in Firefox on systems with the fonts installed.

Safari 4.0.4
Mac OS X 10.6

IE8
Windows XP

Font stack

Name: Gill Sans Light t
Screen font: Gill Sans Light
GillSans-Light, "Gill Sans Light", "Gill Sans", GillSans, "Gill Sans MT", "Nimbus Sans L", "Trebuchet MS", Calibri, sans-serif; font-weight:300

Name: Gill Sans Light p
Screen font: Gill Sans Light
Alternative fonts: GillSans-Light, "Gill Sans Light", "Gill Sans", GillSans, "Nimbus Sans L", Calibri, "Verdana", sans-serif; font-weight:300
Name: Helvetica Neue Light p/t
Screen font: Helvetica Neue Light
Alternative fonts: HelveticaNeue-Light, "Helvetica Neue Light", "DejaVu Sans Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight:300
Name: Helvetica Neue UltraLight p/t
Screen font: Helvetica Neue UltraLight
Alternative fonts: HelveticaNeue-UltraLight, "Helvetica Neue UltraLight", "DejaVu Sans Light", "Helvetica Neue", "Helvetica", "Arial", sans-serif; font-weight:100