Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
CSS
FONT STACKS
What are font
  stacks?
Font stacks are about creating a
  relevant and comprehensive
list of fall-back fonts - based on
aspect ratio, platforms, ...
A bad example
What’s wrong here?



body
{
    font-family: Verdana, Arial,
    sans-serif;
}
Problem 1:
There are a limited number of
       fallback fonts.
Problem 2:
   The fonts used may not be
available for all operating systems
   (eg. Windows, Mac, Linux).
Problem 3:
The fonts used have different
       “aspect ratios”
What is
aspect ratio?
Some fonts, especially those
specifically designed for screen,
 may appear wider and/or taller
        than other fonts.

...
This means that these fonts have
     a larger aspect ratio.
If you use font’s with different
    aspect ratio, some people may
      see your pages with a much
    smaller font size ...
Ideally, your font stacks should
include a range of fonts that have
      a similar aspect ratio.
The basic font
stacks based on
  aspect ratio
Wide sans-serif stack

         eg:
    Verdana
    Geneva
Narrow sans-serif stack

          eg:
     Tahoma
      Arial
     Hevetica
Wide serif stack

      eg:
  Georgia
  Utopia
Narrow serif stack

        eg:
      Times
Times New Roman
Monospace stack

      eg:
  Courier
Courier New
Some steps to
creating a good
   font stack
1. Pick the font you like
     eg. Helvetica Neue
2. Determine which
basic font-stack it belongs in
       eg. Narrow sans-serif
3. Choose a preferred Linux
 variation and a highly available
             variation
eg. DejaVu Sans - 90.76% availability...
4. Choose a preferred Macintosh
   variation and highly available
              variation
eg. Helvetica Neue - 95.11% avai...
5. Choose a preferred Windows
  variation and a highly available
              variation
     eg. Arial - 99.32% availabil...
6. Include the generic font family
           eg. sans-serif
7. Make sure fonts with
white-space in names are
wrapped in single or double
         quotes.
    (eg. “Microsoft Sans-ser...
A better font stack?

body
{
    font-family:
    "DejaVu Sans", "URW Gothic L",
    "Helvetica Neue”, Helvetica,
    Aria...
Results
Font name              Windows     Mac     Linux
DejaVu Sans              0.00%   0.00%    90.76%
URW Gothic L    ...
A great font-stack builder

               Font stack
http://www.codestyle.org/servlets/FontStack
Upcoming SlideShare
Loading in …5
×

CSS font-stacks

18,609 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

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

×