css font stacks. what are font stacks? font stacks are about creating a relevant and comprehensive...
DESCRIPTION
Font stacks are about creating a relevant and comprehensive list of fall-back fonts.TRANSCRIPT
![Page 1: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/1.jpg)
CSSFONT STACKS
![Page 2: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/2.jpg)
What are font stacks?
![Page 3: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/3.jpg)
Font stacks are about creating a relevant and comprehensive
list of fall-back fonts.
![Page 4: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/4.jpg)
Font stacks should take into account aspect ratio, platforms,
operating systems etc.
![Page 5: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/5.jpg)
A bad example
![Page 6: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/6.jpg)
body{
font-family: Verdana, Arial,sans-serif;
}
What’s wrong here?
![Page 7: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/7.jpg)
Problem 1:There are a limited number of
fallback fonts.
![Page 8: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/8.jpg)
Problem 2:The fonts used may not be
available for all operating systems (eg. Windows, Mac, Linux).
![Page 9: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/9.jpg)
Problem 3:The fonts used have different
“aspect ratios”
![Page 10: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/10.jpg)
What is aspect ratio?
![Page 11: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/11.jpg)
Some fonts, especially those specifically designed for screen, may appear wider and/or taller
than other fonts.
ax axVerdana @200pt Helvetica @200pt
![Page 12: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/12.jpg)
This means that these fonts have a larger aspect ratio.
![Page 13: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/13.jpg)
If you use fonts with different aspect ratio, some people may see your pages with a much
smaller font size than others.
body{
font-family: Verdana, Arial,sans-serif;
}
Larger aspect ratio
Smaller aspect ratio
![Page 14: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/14.jpg)
Ideally, your font stacks should include a range of fonts that have
a similar aspect ratio.
![Page 15: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/15.jpg)
The basic font stacks based on
aspect ratio
![Page 16: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/16.jpg)
Wide sans-serif stack
eg:
VerdanaGeneva
![Page 17: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/17.jpg)
Narrow sans-serif stack
eg:
TahomaArial
Helvetica
![Page 18: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/18.jpg)
Wide serif stack
eg:
GeorgiaUtopia
![Page 19: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/19.jpg)
Narrow serif stack
eg:
TimesTimes New Roman
![Page 20: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/20.jpg)
Monospace stack
eg:
CourierCourier New
![Page 21: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/21.jpg)
Some steps to creating a good
font stack
![Page 22: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/22.jpg)
1. Pick the font you likeeg. Helvetica Neue
![Page 23: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/23.jpg)
2. Determine which basic font-stack it belongs in
eg. Narrow sans-serif
![Page 24: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/24.jpg)
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
![Page 25: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/25.jpg)
4. Choose a preferred Macintosh variation and highly available
variation
eg. Helvetica Neue - 95.11% availability on Mac, Helvetica - 100.00% availability on Mac
![Page 26: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/26.jpg)
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
![Page 27: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/27.jpg)
6. Include the generic font family
eg. sans-serif
![Page 28: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/28.jpg)
7. Make sure fonts with white-space in names are wrapped in single or double
quotes.
(eg. “Microsoft Sans-serif”)
![Page 29: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/29.jpg)
body{
font-family:"DejaVu Sans", "URW Gothic L", "Helvetica Neue”, Helvetica, Arial, "Microsoft Sans Serif", sans-serif;
}
A better font stack?
![Page 30: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/30.jpg)
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%
![Page 31: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/31.jpg)
A great font-stack builder
Font stackhttp://www.codestyle.org/servlets/FontStack
![Page 32: CSS FONT STACKS. What are font stacks? Font stacks are about creating a relevant and comprehensive list of fall-back fonts](https://reader036.vdocuments.site/reader036/viewer/2022062401/5a4d1b3a7f8b9ab05999e5d7/html5/thumbnails/32.jpg)
Russ WeakleyMax Design
Site: maxdesign.com.auTwitter: twitter.com/russmaxdesignSlideshare: slideshare.net/maxdesignLinkedin: linkedin.com/in/russweakley