CSS font-stacks
-
Upload
russ-weakley -
Category
Technology
-
view
131 -
download
0
description
Transcript of CSS font-stacks
CSSFONT STACKS
What are fontstacks?
Font stacks are about creating arelevant and comprehensive
list of fall-back fonts - based onaspect ratio, platforms, operating
systems etc.
A bad example
body{
font-family: Verdana, Arial,sans-serif;
}
What’s wrong here?
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 isaspect ratio?
Some fonts, especially thosespecifically designed for screen,may appear wider and/or taller
than other fonts.
ax axVerdana @200pt Helvetica @200pt
This means that these fonts havea larger aspect ratio.
If you use font’s with differentaspect ratio, some people maysee your pages with a much
smaller font size than others.
body{
font-family: Verdana, Arial,sans-serif;
}
Larger aspect ratio
Smaller aspect ratio
Ideally, your font stacks shouldinclude a range of fonts that have
a similar aspect ratio.
The basic fontstacks based on
aspect ratio
Wide sans-serif stack
eg:
VerdanaGeneva
Narrow sans-serif stack
eg:
TahomaArial
Hevetica
Wide serif stack
eg:
GeorgiaUtopia
Narrow serif stack
eg:Times
Times New Roman
Monospace stack
eg:Courier
Courier New
Some steps tocreating a good
font stack
1. Pick the font you like
eg. Helvetica Neue
2. Determine whichbasic font-stack it belongs in
eg. Narrow sans-serif
3. Choose a preferred Linuxvariation and a highly available
variation
eg. DejaVu Sans - 90.76% availability on LinuxURW Gothic L - 97.14% availability on Linux
4. Choose a preferred Macintoshvariation and highly available
variation
eg. Helvetica Neue - 95.11% availability on Mac,Helvetica - 100.00% availability on Mac
5. Choose a preferred Windowsvariation and a highly available
variation
eg. Arial - 99.32% availability on Win,Microsoft Sans-serif - 99.71% availability on Win
6. Include the generic font family
eg. sans-serif
7. Make sure fonts withwhite-space in names arewrapped in single or double
quotes.
(eg. “Microsoft Sans-serif”)
body{
font-family:"DejaVu Sans", "URW Gothic L","Helvetica Neue”, Helvetica,Arial, "Microsoft Sans Serif",sans-serif;
}
A better font stack?
ResultsFont name
DejaVu Sans
URW Gothic L
Helvetica Neue
Helvetica
Arial
Microsoft Sans Serif
sans-serif
Windows
0.00%
0.00%
1.51%
7.08%
90.79%
0.62%
0.00%
Mac
0.00%
0.00%
95.11%
4.89%
0.00%
0.00%
0.00%
Linux
90.76%
8.98%
0.00%
0.07%
0.13%
0.00%
0.06%
A great font-stack builder
Font stackhttp://www.codestyle.org/servlets/FontStack