A presentation on CSS font stacks - covering how to choose fonts that have similar aspect ratio and include a good range of fall-back fonts.

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