Your SlideShare is downloading. ×
  • Like

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

CSS font-stacks


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.

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
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 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