1. CSS FONT STACKS

2. What are font stacks?

3. Font stacks are about creating a relevant and comprehensive list of fall-back fonts.

4. Font stacks should take into account aspect ratio, platforms, operating systems etc.

5. A bad example

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

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

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

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

10. What is aspect ratio?

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

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

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

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

15. The basic font stacks based on aspect ratio

16. Wide sans-serif stack eg: Verdana Geneva

17. Narrow sans-serif stack eg: Tahoma Arial Helvetica

18. Wide serif stack eg: Georgia Utopia

19. Narrow serif stack eg: Times Times New Roman

20. Monospace stack eg: Courier Courier New

21. Some steps to creating a good font stack

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

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

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

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

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

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

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

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

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

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

32. Russ Weakley Max Design Site: maxdesign.com.au Twitter: twitter.com/russmaxdesign Slideshare: slideshare.net/maxdesign Linkedin: linkedin.com/in/russweakley