Web Design and Font Stacks

I was reading my daily round up of design and tutorial blogs today and came across this great article on web typography. With so many fonts out there to use, why use the same "safe" ones all the time in your design? There are countless others that come standard on both the PC and the Mac.

Here is a run down from author Amrinder Sandhu from his article Revised Font Stack. The font stacks and stats for both serif and sans serif are after the more jump.

Revised Font Stacks

* Some of the fonts, like: Garamond, Baskerville and Didot are not as readable on screen as Georgia. Feel free to make your own selection.
* Due to smaller x-height; Caslon, Didot, Garamond, Baskerville and Hoefler Text should be set at minimum of 14 pixels or above.
* Lucida Grande, Futura and Tahoma are mechanically obliqued to fake an italic.
* Geneva, Baskerville Old Face and Big Caslon has no bold and italic. They are faked to bold and italic.
* Avoid using Helvetica or Helvetica Neue for body text, especially below 14px.
* Futura, Gill Sans and Franklin Gothic Medium should be carefully stacked and used because of their unusual weight.

Serif font-stack

1. Garamond (23.84% on Mac, 86.24% on Windows)
Garamond, Baskerville, "Baskerville Old Face", Hoefler Text", "Times New Roman", serif;

2. Lucida Bright (64.90% on Mac, 33.84% on Windows)
Huge x-height "Lucida Bright", Georgia, serif;

3. Palatino (79.71% on Mac, 98.04% on Windows)
Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;

4. Big Caslon (85.10% on Mac)
"Big Caslon", "Book Antiqua", "Palatino Linotype", Georgia, serif;

5. Didot (87.72% on Mac)
Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

6. Baskerville (88.60% on Mac, 49.10% on Windows)
Baskerville, "Baskerville old face", "Hoefler Text", Garamond, "Times New Roman", serif;

7. Hoefler Text (88.70% on Mac, 1.16% on Windows)
"Hoefler Text", "Baskerville old face", Garamond, "Times New Roman", serif;

8. Bodoni (47.89% on Windows)
"Bodoni MT", Didot, "Didot LT STD", "Hoefler Text", Garamond, "Times New Roman", serif;

9. Goudy Old Style (51.30% on Windows)
"Goudy Old Style", Garamond, "Big Caslon", "Times New Roman", serif;

10.Constantia (53.81% on Windows)
Constantia, Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

11. Cambria (54.51% on Windows)
Cambria, Georgia, serif;

12. Book Antiqua (86.09% on Mac)
"Book Antiqua", Palatino, "Palatino Linotype", "Palatino LT STD", Georgia, serif;

Sans-serif font-stack

1. Optima (90.14% on Mac)
Optima, Segoe, "Segoe UI", Candara, Calibri, Arial, sans-serif;

2. Futura (91.01% on Mac)
Futura, "Trebuchet MS", Arial, sans-serif;

3. Gill Sans (91.52% on Mac, 51.74% on Windows)
"Gill Sans", "Gill Sans MT", Calibri, sans-serif;

4. Trebuchet (94.20% on Mac, 99% on Windows)
"Trebuchet MS", "Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Tahoma, sans-serif;

5. Helvetica Neue (94.74% on Mac)
"Helvetica Neue", Helvetica, Arial, sans-serif;

6. Verdana (96.81% on Mac, 99.40% on Windows)
Verdana, Geneva, sans-serif;

7. Lucida Grande (99.13% on Mac, 98.25% on Windows)
"Lucida Grande", "Lucida Sans Unicode", "Lucida Sans", Geneva, Verdana, sans-serif;

8. Geneva (98.84% on Mac)
Geneva, Tahoma, Verdana, sans-serif;

9. Segoe (45.04% on Windows)
Segoe, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

10. Candara (54.31% on Windows)
Candara, Calibri, Segoe, "Segoe UI", Optima, Arial, sans-serif;

11. Calibri (54.76% on Windows)
Calibri, Candara, Segoe, "Segoe UI", Optima, Arial, sans-serif;

12. Franklin Gothic Medium (97.89% on Mac)
"Franklin Gothic Medium", Arial, sans-serif;

13. Tahoma (99.30% on Windows)
Tahoma, Geneva, Verdana, sans-serif;


Leave a Reply