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

  • 12,662 views
Published

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

Views

Total Views
12,662
On SlideShare
0
From Embeds
0
Number of Embeds
10

Actions

Shares
Downloads
309
Comments
6
Likes
26

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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