CSS font-stacks

15,868 views

Published on

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.

Published in: Technology
6 Comments
30 Likes
Statistics
Notes
No Downloads
Views
Total views
15,868
On SlideShare
0
From Embeds
0
Number of Embeds
6,184
Actions
Shares
0
Downloads
327
Comments
6
Likes
30
Embeds 0
No embeds

No notes for slide

CSS font-stacks

  1. 1. CSS FONT STACKS
  2. 2. What are font stacks?
  3. 3. Font stacks are about creating a relevant and comprehensive list of fall-back fonts - based on aspect ratio, platforms, operating systems etc.
  4. 4. A bad example
  5. 5. What’s wrong here? body { font-family: Verdana, Arial, sans-serif; }
  6. 6. Problem 1: There are a limited number of fallback fonts.
  7. 7. Problem 2: The fonts used may not be available for all operating systems (eg. Windows, Mac, Linux).
  8. 8. Problem 3: The fonts used have different “aspect ratios”
  9. 9. What is aspect ratio?
  10. 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. 11. This means that these fonts have a larger aspect ratio.
  12. 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. 13. Ideally, your font stacks should include a range of fonts that have a similar aspect ratio.
  14. 14. The basic font stacks based on aspect ratio
  15. 15. Wide sans-serif stack eg: Verdana Geneva
  16. 16. Narrow sans-serif stack eg: Tahoma Arial Hevetica
  17. 17. Wide serif stack eg: Georgia Utopia
  18. 18. Narrow serif stack eg: Times Times New Roman
  19. 19. Monospace stack eg: Courier Courier New
  20. 20. Some steps to creating a good font stack
  21. 21. 1. Pick the font you like eg. Helvetica Neue
  22. 22. 2. Determine which basic font-stack it belongs in eg. Narrow sans-serif
  23. 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. 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. 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. 26. 6. Include the generic font family eg. sans-serif
  27. 27. 7. Make sure fonts with white-space in names are wrapped in single or double quotes. (eg. “Microsoft Sans-serif”)
  28. 28. A better font stack? body { font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue”, Helvetica, Arial, "Microsoft Sans Serif", sans-serif; }
  29. 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. 30. A great font-stack builder Font stack http://www.codestyle.org/servlets/FontStack

×