CSS font-stacks

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, operating systems etc.

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. ax ax Verdana @200pt Helvetica @200pt

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 than others. body Larger aspect ratio { font-family: Verdana, Arial, sans-serif; Smaller aspect ratio }

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 on Linux URW Gothic L - 97.14% availability on Linux

4. Choose a preferred Macintosh variation and highly available variation eg. Helvetica Neue - 95.11% availability on Mac, Helvetica - 100.00% availability on Mac

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

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-serif”)

A better font stack? body { font-family: "DejaVu Sans", "URW Gothic L", "Helvetica Neue”, Helvetica, Arial, "Microsoft Sans Serif", sans-serif; }

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%

A great font-stack builder Font stack http://www.codestyle.org/servlets/FontStack

http://www.vanseodesign.com	2712
http://csshead.com	128
http://www.mahigrafix.com	72
http://www.slideshare.net	61
http://meito.22web.net	17
http://www.liens.jcdardart.net	14
http://ia-notebook.blogspot.com	12
http://www.maxdesign.com.au	11
http://mahigrafix.mahitips.com	8
http://www.cs.ubbcluj.ro	6
http://blog.gabrieleromanato.com	5
http://www.99css.com	5
http://translate.googleusercontent.com	4
http://localhost	3
http://static.slidesharecdn.com	2
http://onwebdev.blogspot.com	2
http://fangge-sun.blog.163.com	1
http://www.hanrss.com	1
http://webcache.googleusercontent.com	1
http://mahigrafix.com	1

CSS font-stacks

by Russ Weakley on Apr 22, 2010

Accessibility

Categories

Upload Details

Usage Rights

20 Embeds 3,066

Statistics

CSS font-stacks Presentation Transcript