10. Some fonts, especially those
specifically designed for screen,
may appear wider and/or taller
than other fonts.
ax ax
Verdana @200pt Helvetica @200pt
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.
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
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