1.
CSS
FONT STACKS

2.
What are font
stacks?

3.
Font stacks are about creating a
relevant and comprehensive
list of fall-back fonts - based on
aspect ratio, platforms, operating
systems etc.

4.
A bad example

5.
What’s wrong here?
body
{
font-family: Verdana, Arial,
sans-serif;
}

6.
Problem 1:
There are a limited number of
fallback fonts.

7.
Problem 2:
The fonts used may not be
available for all operating systems
(eg. Windows, Mac, Linux).

8.
Problem 3:
The fonts used have different
“aspect ratios”

9.
What is
aspect ratio?

10.
Some fonts, especially those
specifically designed for screen,
may appear wider and/or taller
than other fonts.
ax ax
Verdana @200pt Helvetica @200pt

11.
This means that these fonts have
a larger aspect ratio.

12.
If you use font’s with different
aspect ratio, some people may
see your pages with a much
smaller font size than others.
body Larger aspect ratio
{
font-family: Verdana, Arial,
sans-serif;
Smaller aspect ratio
}

13.
Ideally, your font stacks should
include a range of fonts that have
a similar aspect ratio.

14.
The basic font
stacks based on
aspect ratio

15.
Wide sans-serif stack
eg:
Verdana
Geneva

16.
Narrow sans-serif stack
eg:
Tahoma
Arial
Hevetica

17.
Wide serif stack
eg:
Georgia
Utopia

18.
Narrow serif stack
eg:
Times
Times New Roman

19.
Monospace stack
eg:
Courier
Courier New

20.
Some steps to
creating a good
font stack

21.
1. Pick the font you like
eg. Helvetica Neue

22.
2. Determine which
basic font-stack it belongs in
eg. Narrow sans-serif

23.
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

24.
4. Choose a preferred Macintosh
variation and highly available
variation
eg. Helvetica Neue - 95.11% availability on Mac,
Helvetica - 100.00% availability on Mac

25.
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

26.
6. Include the generic font family
eg. sans-serif

27.
7. Make sure fonts with
white-space in names are
wrapped in single or double
quotes.
(eg. “Microsoft Sans-serif”)

28.
A better font stack?
body
{
font-family:
"DejaVu Sans", "URW Gothic L",
"Helvetica Neue”, Helvetica,
Arial, "Microsoft Sans Serif",
sans-serif;
}

29.
Results
Font name Windows Mac Linux
DejaVu Sans 0.00% 0.00% 90.76%
URW Gothic L 0.00% 0.00% 8.98%
Helvetica Neue 1.51% 95.11% 0.00%
Helvetica 7.08% 4.89% 0.07%
Arial 90.79% 0.00% 0.13%
Microsoft Sans Serif 0.62% 0.00% 0.00%
sans-serif 0.00% 0.00% 0.06%

30.
A great font-stack builder
Font stack
http://www.codestyle.org/servlets/FontStack