10 Definitive Web Font Stacks for Designers

typestack

Fonts were not designed to mix and match. Sure, we can con­sult the Font Matrix and find an avail­able font. But, tai­lored web safe typog­ra­phy has always been seen as a luxury. With the pro­lif­er­a­tion of desk­top pub­lish­ing soft­ware, com­put­ers are now pre­loaded with more sys­tem fonts than ever before. With greater choice comes greater control.

Where are we now?

There have been some great arti­cles writ­ten about CSS font stacks. Designer’s know Gill Sans, Myr­iad, Tahoma, and Frutiger are not “Arial-based”. But, we live with it. We think that’s the best we can get. After doing some research, I’ve found there’s more than enough sys­tem fonts to have font styling the way you want it, with­out com­pro­mise. Below you’ll find a list of font stacks orga­nized by the most pop­u­lar type­face classifications.

Head­line Font Stacks

displayheadline

1   Dis­play Ser­ifs (Del­i­cate details. Best seen at large sizes)

font-family: Perpetua, Baskerville, "Big Caslon", "Palatino Linotype", Palatino, "URW Palladio L", "Nimbus Roman No9 L", serif;

geometricheadlines

2   Geo­met­ric (Low read­abil­ity. Best seen large in short lines)

CAUTION: At best, 90–95% cov­er­age over all systems. Drop back to Arial to pre­vent generics.

font-family: "Century Gothic", "Tw Cen MT", Futura, "URW Gothic L", Arial, sans-serif;

modernheadline

3   Mod­ern (High con­trast. Thins may dis­ap­pear at smaller sizes)

WARNING: At best, 70–80% cov­er­age over all sys­tems. Drop back to Tran­si­tion­als (Geor­gia, Times, Times New Roman) to pre­vent generics.

font-family: Didot,"Bodoni MT", "Century Schoolbook", "Niagara Solid", Utopia, Georgia, Times, "Times New Roman", serif;

noslabYou may ask, “Where’s the slab serif stack?”. Besides Rock­well (50% on win­dows), there’s very lit­tle cov­er­age. If you’d like to use them one, try one of the many font replace­ment tech­niques.

All stacks below guar­an­tee best pos­si­ble cov­er­age (99%). This is an attempt to retain the same font styling on the most systems.

Sans– Serif Para­graph Font Stacks

4   Neo-Grotesque  (The grand­daddy of sans serif. Even strokes, well balanced)

font-family: Corbel, Arial, Helvetica, "Nimbus Sans L", "Liberation Sans", sans-serif;

neogrotesqueparagraph

5   Human­ist (Slightly more var­ied strokes. Some serif features)

font-family: Verdana, Tahoma, "Trebuchet MS", "DejuVu Sans", "Bitstream Vera Sans", sans-serif;

humanistparagraph
6   Set Small (Crys­tal clear at x-small. Looks great less than 11 pts)

font-family: Corbel, "Lucida Sans Unicode", "Lucida Grade", "Bitstream Vera Sans", "Luxi Serif", Verdana, sans-serif;

smallparagraph

Serif Para­graph Font Stacks

7   Old Style (Unique his­toric char­ac­ter, often overlooked)

font-family: "Calisto MT", "Bookman Old Style", Bookman, "Goudy Old Style", Garamond, "Hoefler Text", "Bitstream Charter", Georgia, serif;

oldstyleparagraph
8   Tran­si­tional (The work­horses of the serif. Easy on the eyes. )

font-family: Cambria, Georgia, "New Century Schoolbook", "Century Schoolbook L", "Times New Roman", serif;

transitionalparagraph

Mono­space Font Stacks

9    Clear Code (The best mono­spaced fonts. Easy on a developer’s weary eyes)

font-family: Consolas, "Bitstream Vera Sans Mono", "Andale Mono", Monaco, "DejaVu Sans Mono", "Lucida Console", monospace;

codemono

10   I ♥ type­writ­ers (Need I say more?)

font-family: "Courier New", Courier, "Lucida Sans Typewriter", "Lucida Typewriter", monospace;

typewritermono

21 Responses to 10 Definitive Web Font Stacks for Designers

  1. Inter­est­ing info…found your blog on google and i’ll come back for sure

  2. George, really impressed with this easy to use, straght-forward, yet ver­sa­tile font stack col­lec­tion. Many thanks I will use them often.

    Just a heads up, there is a typo in the Set Small group. I’m pretty sure you meant “Lucida Grande” not “Lucida Grade”.

    Again, many thanks for this great resource.

    P.S. Nice to meet a fel­low Cana­dian online. I’m in North­ern Ontario. Never been to NS, but would love to go some day. Keep up the good work and keep on blogging!

  3. Wow. Great resource. I’m pretty sure that for the serif fonts you can just use


    font-family: Cambria, Georgia, sans-serif;

  4. Thanks for the great post. I par­tic­u­larly like the ‘I ♥ type­writ­ers’ stack. Also, awe­some Word­Press theme you are using!

  5. found this site in google. thanks for the ideas!

  6. Uh, “Cen­tury School­book” in a “Mod­ern” Stack? Are you kid­ding me? Go back to type class, do not pass Go, do not col­lect $200.

  7. TheRogueSkolar

    Bril­liant!

    Thanks for putting this together.

    @amateur6, uuhh okay… cool out dude sheesh!

  8. An out­stand­ing share! I have just for­warded this onto
    a coworker who was doing a lit­tle home­work on this. And he
    in fact bought me lunch sim­ply because I dis­cov­ered it for him.
    .. lol. So let me reword this.… Thanks for the meal!
    ! But yeah, thanks for spend­ing some time to talk about this mat­ter here on your site.

  9. Excel­lent, what a web site it is! This weblog pro­vides help­ful
    infor­ma­tion to us, keep it up.

  10. Bril­liant resource thanks for going to the trouble!

  11. I just could not go away your web­site prior to sug­gest­ing that I actu­ally loved the stan­dard infor­ma­tion an indi­vid­ual pro­vide on your vis­i­tors?
    Is going to be again often to check up on new posts

  12. Fan­tas­tic goods from you, man. I have bear in mind your
    stuff pre­vi­ous to and you’re sim­ply extremely fan­tas­tic. I actu­ally like what you have got right here, cer­tainly like what you are say­ing and the way in which wherein you say it. You make it enjoy­able and you still take care of to keep it sen­si­ble. I can’t wait
    to read much more from you. This is actu­ally a great website.

  13. I think this is among the most impor­tant infor­ma­tion
    for me. And i’m glad read­ing your arti­cle. But should remark on few gen­eral things, The web­site style is won­der­ful, the arti­cles is
    really excel­lent : D. Good job, cheers

  14. Silenced,mignon milieu à par­tir de aug­menter off personnalit

  15. 10 Defin­i­tive Web Font Stacks for Design­ers | George But­ler Web Design — Halifax Dru­pal Web Design

  16. Hi there just wanted to give you a brief heads up and let you know
    a few of the images aren’t load­ing prop­erly. I’m not sure why but I think its a link­ing issue.
    I’ve tried it in two dif­fer­ent browsers and both show the
    same results.

  17. コメント:クリスチャン?ルブタン Chris­t­ian Louboutin ウェッジソール サンダル 靴,大変綺麗な未使用品に近い状態です。キズや汚れの詳しい状態が気になる方は、お気軽に当店までお問い合わせ下さい。また、当サイトに掲載されている商品は、全て店頭でも同時に販売しています。その為、ご注文のタイミングによっては商品をご用意できない場合がございます。

  18. 999 “And evi­dently it absolutely was noth­ing at all per­son­al­ized from their work­force,” Love reported. Dove is absolutely not into man­ner.
    cheap authen­tic jer­seys
    [url=http://www.printsolutionseast.com/jerseys/]cheap authen­tic jerseys[/url]

  19. I used to bе able tօ find good infor­ma­tion from your artiϲles.

  20. No mat­ter if some one searches for his vital thing, thus he/she wants to be avail­able that in detail, thus
    that thing is main­tained over here.

Trackbacks/Pingbacks

  1. Font Stack Mania – Alex Chang

Leave a Reply

Web Design Ideas and Resources