sign in sign up
<<
Home , Arial, Baskerville, Bookman (typeface), Calibri, Copperplate Gothic, Futura (typeface)

Softpress KnowledgeBase

Font Sets -- Get the most out of your

-1. 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 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 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 , as your second choice. There are also users to think about too, most of which won't have Helvetica or Arial installed by default, so " L" would become your third choice. Finally, you would end up with sans-, 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 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 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 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 FreewayTo 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): Open Freeway by clicking on the Dock icon or double clicking the application icon Go to the Edit

1/7 menu and choose Font Sets... Click New& to open the New Font Set dialog In the Name field type the name of your font stack Select the font you want Freeway to use when you choose the font stack from the Screen font pulldown 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.

Safari 4.0.4 IE8 Font stack Mac OS X 10.6 Windows XP

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

Name: p Screen font: Baskerville Alternative fonts: Baskerville, "Baskerville Old Face", "", "", Times, serif

Name: Baskerville t Screen font: Baskerville Alternative fonts: Baskerville, "Baskerville Old Face", "Bitstream Charter", Times, "Times New Roman", serif

Name: Old Style p/t Screen font: Bookman Old Style Alternative fonts: "Bookman Old Style", "URW Bookman L", , Times, "Times New Roman", serif

Name: 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

2/7 Name: Copperplate Light p/t Screen font: Copperplate Light Alternative fonts: Copperplate-Light, "Copperplate Light", Copperplate, " 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 IE8 Font stack Mac OS X 10.6 Windows XP

Name: p/t Screen font: Futura Alternative fonts: Futura, Futura-Medium, "Futura Medium", "Century Gothic", CenturyGothic, AppleGothic, "URW Gothic L", sans-serif

Name: p Screen font: Garamond Alternative fonts: Garamond, "", , Times New Roman, Times, serif

Name: Garamond t Screen font: Garamond Alternative fonts: Garamond, "Hoefler Text", , "Palatino Linotype", Gentium, serif

Name: p Screen font: Geneva Alternative fonts: Geneva, " Sans", "", "Lucida Sans ", , FreeSans, sans-serif

Name: Geneva t Screen font: Geneva Alternative fonts: Geneva, Verdana, "Lucida Sans", "Lucida Grande", "", FreeSans, sans-serif

3/7 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: p Screen font: Gill Sans Alternative fonts: "Gill Sans", GillSans, "Gill Sans MT", , "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 IE8 Font stack Mac OS X 10.6 Windows XP 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: p/t Screen font: Impact Alternative fonts: Impact, , "Arial Narrow Bold", sans-serif At the time of writing we were unable to find a Linux alternative for this stack.

4/7 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: p/t Screen font: Monaco Alternative fonts: Monaco, "Lucida Console", "DejaVu Sans Mono",

Safari 4.0.4 IE8 Font stack Mac OS X 10.6 Windows XP 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

5/7 Name: 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

Stack them upBelow 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.

6/7

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 IE8 Font stack Mac OS X 10.6 Windows XP 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

//www.softpress.com/kb/questions/221/

7/7