CSSFONT STACKS

What are font stacks?

Font stacks are about creating a relevant and comprehensive

list of fall-back fonts.

Font stacks should take into account aspect ratio, platforms,

operating systems etc.

A bad example

body{

font-family: Verdana, Arial,sans-serif;

}

What’s wrong here?

Problem 1:There are a limited number of

fallback fonts.

Problem 2:The fonts used may not be

available for all operating systems (eg. Windows, Mac, Linux).

Problem 3:The fonts used have different

“aspect ratios”

What is aspect ratio?

Some fonts, especially those specifically designed for screen, may appear wider and/or taller

than other fonts.

ax axVerdana @200pt Helvetica @200pt

This means that these fonts have a larger aspect ratio.

If you use fonts with different aspect ratio, some people may see your pages with a much

smaller font size than others.

body{

font-family: Verdana, Arial,sans-serif;

}

Larger aspect ratio

Smaller aspect ratio

Ideally, your font stacks should include a range of fonts that have

a similar aspect ratio.

The basic font stacks based on

aspect ratio

Wide sans-serif stack

eg:

VerdanaGeneva

Narrow sans-serif stack

eg:

TahomaArial

Helvetica

Wide serif stack

eg:

GeorgiaUtopia

Narrow serif stack

eg:

TimesTimes New Roman

Monospace stack

eg:

CourierCourier New

Some steps to creating a good

font stack

1. Pick the font you likeeg. Helvetica Neue

2. Determine which basic font-stack it belongs in

eg. Narrow sans-serif

3. Choose a preferred Linux variation and a highly available

variation

eg. DejaVu Sans - 90.76% availability on Linux URW Gothic L - 97.14% availability on Linux

4. Choose a preferred Macintosh variation and highly available

variation

eg. Helvetica Neue - 95.11% availability on Mac, Helvetica - 100.00% availability on Mac

5. Choose a preferred Windows variation and a highly available

variation

eg. Arial - 99.32% availability on Win, Microsoft Sans-serif - 99.71% availability on

Win

6. Include the generic font family

eg. sans-serif

7. Make sure fonts with white-space in names are wrapped in single or double

quotes.

(eg. “Microsoft Sans-serif”)

body{

font-family:"DejaVu Sans", "URW Gothic L", "Helvetica Neue”, Helvetica, Arial, "Microsoft Sans Serif", sans-serif;

}

A better font stack?

ResultsFont name

DejaVu Sans

URW Gothic L

Helvetica Neue

Helvetica

Arial

Microsoft Sans Serif

sans-serif

Windows

0.00%

0.00%

1.51%

7.08%

90.79%

0.62%

0.00%

Mac

0.00%

0.00%

95.11%

4.89%

0.00%

0.00%

0.00%

Linux

90.76%

8.98%

0.00%

0.07%

0.13%

0.00%

0.06%

A great font-stack builder

Font stackhttp://www.codestyle.org/servlets/FontStack

Russ WeakleyMax Design

Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley