Guide to CSS Font Stacks: Techniques and Resources


CSS Font stacks are one of those things that elude a lot of designers. Many stick to the basic stacks Dreamweaver auto-recommends or go even more basic by just specifying a single web-safe font.

But doing either of those things means you’re missing out on some great typography options. Font stacks can make it possible to show at least some of your visitors your site’s typography exactly the way you intend without showing everyone else a default font. Read on for more information on using and creating effective font stacks with CSS.

Creating Your Own Font Stacks

There are a huge variety of font stacks recommended. It seems every designer has their own favorites, what they consider to be the “ultimate” font stack. While there is no definitive font stack out there, there are a few things to keep in mind when using or creating your own stacks.

First of all, make sure you always include a generic font family at the end of your font stacks. This way, if for some strange reason the person visiting your site has virtually no fonts installed, at least they won’t end up looking at everything in Courier New. Second, there’s a basic formula to creating a good font stack: ‘Preferred Font’, ‘Next best thing’, ‘Something common and sorta close’, ‘Similar Web-safe’, ‘Generic font’. There’s nothing wrong with having more than one font for any of those, but try to keep your font stack reasonably short (six to ten fonts is a pretty good maximum number).

Third, make sure you pay attention to the scale of the fonts in your stack. One common thing I see in font stacks is the inclusion of Verdana and Arial or Helvetica in the same stack. Verdana is a very wide font; Arial is relatively narrow. In effect, this can make your site’s typography appear very differently to different visitors. The same goes for Times New Roman (narrow) and Georgia (wide). Considering both Arial/Helvetica and Verdana are considered web-safe (same goes for Times/Times New Roman and Georgia), it doesn’t make much sense to include both.

Common Font Stacks

A lot of designers out there have taken a crack at creating ideal font stacks. While I have yet to see an “ultimate” font stack, there are plenty of really great ones out there to choose from if you don’t want to take the time create your own custom stacks. Here are some of the good ones we’ve seen.

Better CSS Font Stacks

Unit Interactive published an article last summer with a collection of “better” CSS font stacks1. The list is extensive, with font stacks that should satisfy just about anyone. Fonts are listed out according to whether they’re appropriate for headlines or body content.

Here are some listed for body text:

  • Baskerville, ‘Times New Roman’, Times, serif
  • Garamond, ‘Hoefler Text’, ‘Times New Roman’, Times, serif
  • Geneva, ‘Lucida Sans’, ‘Lucida Grande’, ‘Lucida Sans Unicode’, Verdana, sans-serif
  • GillSans, Calibri, Trebuchet, sans-serif


For headlines:

  • Georgia, Times, ‘Times New Roman’, serif
  • Palatino, ‘Palatino Linotype’, ‘Hoefler Text’, Times, ‘Times New Roman’, serif
  • Tahoma, Verdana, Geneva
  • Trebuchet, Tahoma, Arial, sans-serif


And a few that are balanced for either body or headline text:

  • Impact, Haettenschweiler, ‘Arial Narrow Bold’, sans-serif
  • Cambria, Georgia, Times, ‘Times New Roman’, serif
  • ‘Copperplate Light’, ‘Copperplate Gothic Light’, serif
  • Futura, ‘Century Gothic’, AppleGothic, sans-serif


8 Definitive Web Font Stacks

This article from Sitepoint5 written by Michael Tuck lists eight font stacks that are supposed to be the ultimate stacks for any application. It’s based on a basic formula of: ‘exact font’, ‘nearest alternative’, ‘platform-wide alternative(s)’, ‘universal (cross-platform) choice(s)’, generic. My biggest issues with some of these font stacks is their length; is it really necessary to include 17 different fonts in a single font stack? I don’t think so…


The font stacks:

  • The Times New Roman-based serif stack: Cambria, ‘Hoefler Text’, Utopia, ‘Liberation Serif’, ‘Nimbus Roman No9 L Regular’, Times, ‘Times New Roman’, serif
  • A Modern Georgia-based serif stack: Constantia, ‘Lucida Bright’, Lucidabright, ‘Lucida Serif’, Lucida, ‘DejaVu Serif’, ‘Bitstream Vera Serif’, ‘Liberation Serif’, Georgia, serif
  • A more traditional Garamond-based serif stack: ‘Palatino Linotype’, Palatino, Palladio, ‘URW Palladio L’, ‘Book Antiqua’, Baskerville, ‘Bookman Old Style’, ‘Bitstream Charter’, ‘Nimbus Roman No9 L’, Garamond, ‘Apple Garamond’, ‘ITC Garamond Narrow’, ‘New Century Schoolbook’, ‘Century Schoolbook’, ‘Century Schoolbook L’, Georgia, serif
  • The Helvetica/Arial-based sans serif stack: Frutiger, ‘Frutiger Linotype’, Univers, Calibri, ‘Gill Sans’, ‘Gill Sans MT’, ‘Myriad Pro’, Myriad, ‘DejaVu Sans Condensed’, ‘Liberation Sans’, ‘Nimbus Sans L’, Tahoma, Geneva, ‘Helvetica Neue’, Helvetica, Arial, sans-serif
  • The Verdana-based sans serif stack: Corbel, ‘Lucida Grande’, ‘Lucida Sans Unicode’, ‘DejaVu Sans’, ‘Bitstream Vera Sans’, ‘Liberation Sans’, Verdana, ‘Verdana Ref’, sans-serif
  • The Trebuchet-based sans serif stack: ‘Segoe UI’, Candara, ‘Bitstream Vera Sans’, ‘DejaVu Sans’, ‘Bitsream Vera Sans’, ‘Trebuchet MS’, Verdana, ‘Verdana Ref’, sans-serif
  • The heavier “Impact” sans serif stack: Impact, Haettenschweiler, ‘Franklin Gothic Bold’, Charcoal, ‘Helvetica Inserat’, ‘Bitstream Vera Sans Bold’, ‘Arial Black’, sans-serif
  • The Monospace stack: Consolas, ‘Andale Mono WT’, ‘Andale Mono’, ‘Lucida Console’, ‘Lucida Sans Typewriter’, ‘DejaVu Sans Mono’, ‘Bitstream Vera Sans Mono’, ‘Liberation Mono’, ‘Nimbus Mono L’, Monaco, ‘Courier New’, Courier, monospace

The Myth of ‘Web-Safe’ Fonts

The Myth of ‘Web-Safe’ Fonts7 from offers up five simple, straightforward font stacks for web typography. These stacks are pretty bare-bones as far as most recommended font stacks go, but they’re perfectly adequate for many applications, as well as being a good starting point for building your own stacks.

  • The ‘wide’ sans serif stack: Verdana, Geneva, sans-serif
  • The ‘narrow’ sans serif stack: Tahoma, Arial, Helvetica, sans-serif
  • The ‘wide” serif stack: Georgia, Utopia, Palatino, ‘Palatino Linotype’, serif
  • The ‘narrow’ serif stack: ‘Times New Roman’, Times, serif
  • The monospace stack: ‘Courier New’, Courier, monospace



Font Matrix

Font Matrix9 is a font comparison tool that lists fonts bundled with Windows XP, Windows Vista, Mac OS X Tiger, Mac OS X Leopard, Microsoft Office (2003, 2007 and 2004 for Mac) and the Adobe Creative Suite. The chart shows which software bundles and operating systems come with which fonts, so you can get a good idea of how common a particular font might be. This is an incredibly valuable tool for those looking to create their own custom font stacks.


Complete Guide to Pre-Installed Fonts in Linux, Mac and Windows

Here’s another chart11 that shows the fonts commonly installed on Linux, Mac and Windows machines, grouped together by family and similarity. It’s another really valuable tool for font stack creators.



Typechart13 shows you web-safe and common fonts and suggests different sizes and styles for headings, paragraphs, and other typographic elements. There are a ton of different browsing options, and you can preview the way fonts will look on both Windows and Mac machines before downloading the CSS. The only drawback to Typechart is that it only includes a handful of fonts: Arial/Helvetica, Cambria, Georgia, Lucida Grande, Lucida Sans Unicode, Trebuchet MS, and Verdana.



Typetester15 lets you try out up to three fonts side-by-side. This can be a great way to test font stacks to see what the differences will be as the stacks degrade. You can use any font on your system, though it does categorize fonts by web safe, Windows default, and Mac default, making it easier to create stacks without other reference materials.


Font Stack Builder

Code Style offers the Font Stack Builder17 for creating font stacks based on font family, and whether the fonts are generally installed on Windows, Mac or Linux machines. You can add as many fonts as you want and it will show you a grid with how common those fonts are on different kinds of machines.



There are hundreds of articles out there about font stacks. Some have been mentioned above, but there are plenty of others that deserve some recognition. Here are a few:

Striking Web Sites with Font Stacks that Inspire19
This article covers twenty different websites with excellent font stacks. Basic web-safe and common fonts are covered along with more creative font stacks. It’s a great resource for getting some inspiration before creating your own stacks.


Better Font Families in CSS21
This article from Devlounge gives a very brief overview of the author’s favored font stacks, as well as a few tips for creating your own stacks.


The New Typography23
This article gives a great overview of creating font stacks and good web typography. There are plenty of tips mentioned, including which fonts to avoid using in the same font stacks and why.


Roundup: CSS Font Stacks25
This article is a great introduction to CSS font stacks and how to use them effectively. It includes some tools, tips, and other information about creating your own font stacks or choosing which ones to use.


Excellent Font Stack Examples

Here’s a handful of sites that have excellent font stacks and great typography in general. You can find more examples at Typesites27.


Font stack: “Helvetica Neue”, Helvetica, Arial, sans-serif


Font stack: “Lucida Fax”, Georgia, Helvetica, Arial, sans-serif


Font stack: Baskerville, Palatino, ‘Palatino Linotype’, Georgia, Serif


Font stack: “Lucida Grande”, Geneva, Helvetica, sans-serif (used for some of the headings and meta information)


Font stack: “Adobe Caslon Pro”, “Hoefler Text”, Georgia, Garamond, Times, serif (pretty nice stack for what is primarily a holding page!)


Font stack: “Courier new”, Courier, “Andale Mono”


Font stack: Gotham, “Helvetica Neue”, Helvetica, Arial, sans-serif;


Font stack: Arial, sans-serif


Font stack: “Lucida Grande”, Tahoma, Verdana, sans-serif


Font stack: Helvetica, Arial, sans-serif


Font stack:“Arial black”, arial, sans-serif


Font stack:Arial, Helvetica, sans-serif


Font stack: Arial, “Helvetica Neue”, Helvetica, sans-serif


Font stack:“Myriad Pro”, Helvetica, Arial, sans-serif


Font stack: “Lucida Grande”, Arial, Verdana, Helvetica, sans-serif


Font stack: Georgia, “Times New Roman”, Times, serif


  1. 1
  2. 2
  3. 3
  4. 4
  5. 5
  6. 6
  7. 7
  8. 8
  9. 9
  10. 10
  11. 11
  12. 12
  13. 13
  14. 14
  15. 15
  16. 16
  17. 17
  18. 18
  19. 19
  20. 20
  21. 21
  22. 22
  23. 23
  24. 24
  25. 25
  26. 26
  27. 27
  28. 28
  29. 29
  30. 30
  31. 31
  32. 32
  33. 33
  34. 34
  35. 35
  36. 36
  37. 37
  38. 38
  39. 39
  40. 40
  41. 41
  42. 42
  43. 43

↑ Back to topShare on Twitter

Cameron Chapman is a professional Web and graphic designer with over 6 years of experience. She writes for a number of blogs, including her own, Cameron Chapman On Writing. She’s also the author of The Smashing Idea Book: From Inspiration to Application.


Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    What would be awesome is a tool, maybe a plugin for firebug, that shows you what font you’re seeing *right now* in a selected element on the page. Inspecting the css shows you the font stack but sometimes it’s hard to tell which font is actually being shown. Even harder if you’re working with a stake holder and they’re expressing discontent over a look, very possibly because they don’t have the font from the stack.

  2. 2

    Nice article Cameron, good collection of resources in one place… I know I’ll be referring back to this article again & again :o)

  3. 3

    Great article.

    I must admit that I’ve not been one to try out new fonts. I generally stick with the safe fonts and adjust the size / line height / letter spacing as im designing software for the masses! But after reading this im going to branch out and see what stacks the majority of users can see.


  4. 4

    I am really afraid of using …
    (1) professional fonts for designers that come with Adobe Suites, like Adobe Caslon Pro
    (2) using css3-webfonts
    (3) fonts like Gill or Frutiger that exist in a wide range of qualities and editions

    All of these can look brilliant on the visitor’s screen but even though turn into a disaster. Webfonts are rendered, anti-aliased, clear-typed and hinted completely different on different browsers on one system. If you are keen on using them, you really should check the font on PCs and Macs right at the beginning.

    If you’re on a PC, Safari does not indicate how a font looks like on a Mac. if you are on a Mac, using Adobe Caslon Pro can make PC-users blind when watching your headlines.

    I think that different clear-type technologies are the biggest problem. There is truely a conflict between clear-type and inner-font hinting.

    Using things like Gill: If you have a Gill which comes with the system as a true-type oder open-type, you should consider that many people have a type1-Gill without any screen-hinting.

  5. 5

    Nice article…

    I’m waiting for css3 and the abalitiy to include some different fonts.
    But now, most time I use Helvetica for my Websites… it’s the cleanest one… I think.

  6. 6

    Wonderful and useful, thanks!

  7. 7

    Great article, I tend to use SiFR for headlines but it seems to be breaking a lot in IE8.

    @Andre – I’d be careful when using Helvetica for body copy. The smaller it gets, the harder it is to scan through on a screen. Best practice would be to probably swap it out for Verdana if you’re going under 12px.

  8. 8

    One of my pet peeves is the current fashion of using “Helvetica Neue” and helvetica in font stacks.

    If you have these fonts installed on your pc it will make most text illegible as windows browsers can’t anti-alias these fonts well.

    Admittedly this is a pretty niche case though as you wont find many PC users with these fonts installed…

  9. 9

    gurukarm (@karma_musings)

    September 22, 2009 4:30 am

    Excellent excellent article with lots of great resourses – thanks so much for putting it all together.

  10. 10

    Great Article,

    I’m waiting for CSS 3 for more fonts but I will defiantly be revising some style sheets in the meantime.

  11. 11

    nice css topic, but what all font stack topics are missing are font counterparts for linux systems. I checked my pages on win an linux (ubuntu) and the font rendering turned out to be the biggest problem. Linux standard webbrowser fonts turned out to be larger than win fonts, sometimes destroying the layout.

    if you are interested:

  12. 12

    Is ‘font-stack’ a real term?

  13. 13

    When including more “esoteric” fonts such as Futura, Helvetica Neue and other fonts that aren’t designed for screen use, you should be aware that some windows users have cleartype turned off. Without antialiasing these fonts become a garbled mess.

    So when designing for the general public – stick to websafe fonts.

  14. 14

    Pete I’m with ya but as a font stack I’ve used I would recommend putting Arial ahead of Helvetica as it’s even less likely that Windows users would have Helvetica Neue installed.

  15. 15

    Matthew Nuzum – They do have those plugins for FireFox, try doing a search for CSS in their library.

  16. 16

    Very good post! informative and inspiring. CSS 3 is going to make working with specialty fonts much easier. I’m looking forward to that day but until then, I see some room for improvement in my current stacks. Thanks for the tips.

  17. 17

    Nice stuff! You’re right, I could definitely use better stacks

  18. 18

    The same article warns against Times (New Roman) and Georgia being in the same font stack, and lists a few websites with ‘Excellent’ font stacks that, well, I’ll let you guess.

    Lucida Grande (as in Digital Web Magazine and Newsvine above; also, Twitter) should be followed by Lucida Sans Unicode, which is a far better Windows alternative than Tahoma or Verdana.

    ‘GillSans’ (referenced in the Unit Interactive as GillSans) goes by a number of names on computers: Gill Sans MT, Gill Sans Std, Gill Sans…

    I sound horribly pompous and righteous and stuff. Sorry about that.

  19. 19

    Weird, I was just having a conversation with my designer about font stacks last night. Thanks for reading my mind SM.

  20. 20

    Nice article. It’s such a simple thing to mortify but can be difficult to master.

  21. 21

    not too impressed that you cut down the site point article “My biggest issues with some of these font stacks is their length; is it really necessary to include 17 different fonts in a single font stack? I don’t think so…”
    Like many web design articles, take from it what you want.

    I think your article is just a rip off of that one (among others).

    More stuff that already has been written about.

  22. 22

    You can also read this article/tutorial about web font technics :

  23. 23

    Thanks guys. Great article.

    @chris – its ok to have more than one blog article written on the same topic. With articles coming out almost everyday, there’s gonna be some overlap. And its ok that they disagree with other articles written on the same topic. Should everyone always agree? isnt it nice to hear a different point of view?

  24. 24

    Kartlos Tchavelachvili

    September 22, 2009 11:10 am

    According “Font Matrix” font comparison tool “Andale Mono” is a cross platform font, I think it is not true.

  25. 25

    Tks for the tip!

    Does anybody know where i can find ways to organize text fonts into a css code?

  26. 26

    “Here’s a handful of sites that have excellent font stacks…”
    “Arial, sans-serif”

    That’s overpowering in its excellence.

    Srsly, wtf?

  27. 27

    Fantastic article – great resources – well done ; )

  28. 28

    Great article and useful resources!

  29. 29

    As with many postings on smashing mag; I read them, get all excited and then see all the comments below negating or warning against most of what has been said. I don’t have a mac and linux is awkward for me to test on.

    How many others out there think they have learnt something new or interesting only to see the comments below and get all confused again?


  30. 30

    To all those whining about using “Helvetica Neue”: that’s a little treat for Mac users as that’s a default Mac Font. You DO understand the concept of a “font-stack” do you?
    Nice article, bookmarked for future reference :)

  31. 31


    lucida sans unicode MUST be listed before all other lucida alternatives to render correctly on a windows client.


  32. 32

    How about licence? Where to know if I may use font or not?
    And, how to compensate different size of letters? Cambria is smaller than Times New Roman, And Calibri is smaller than Arial.

  33. 33

    font-stacks, font-stacks…….first understand type, I mean really get to grips with it..Immerse yourself in it, become a fan!
    Having a better understanding of this will help you when creating your fon-stacks…

    Basics first!

  34. 34

    The main question than remains:
    The new, fresh Vista-/Office-Fonts like Calibri, Cambria, Consolas … are much smaller than their websafe equivalent. How can we deal with that case? It’s not only about these Vista-Fonts but also with any other font. Does anyone has a elegant solution for that?

  35. 35

    I never understood why anyone would use Arial, Helvetica, Sans-Serif. Why not put Helvetica first? Clearly if your user has both arial and Helvetica installed, you want the user to see Helvetica.

  36. 36

    It’s confused that “body” text is recomended to be serif font written, in case that so many pages use sans in loger texts.

  37. 37

    Alessandro Mingione

    September 25, 2009 2:10 am

    I understand the need of something else but Georgia, but it was created on screen FOR the screen, why use something else, for body text? Except a few cases, it is the best option.

  38. 38

    I’m Michael Tuck, the author of the Sitepoint article cited above. Cameron, thank you for mentioning the article, I really appreciate it. A few notes:

    1) The original title was “8 ‘Definitive’ Font Stacks,” with the interior quotes surrounding the word “definitive” to show that the idea of a “definitive” stack is not possible. The editors changed the title, and thusly the meaning. In fact, the original version was at least 5 times as long as the final, published form. :(
    2) The font stacks are overly inclusive and sometimes way too long, as you noted. 17 fonts in a single stack is just unnecessary overkill. I proposed some streamlined alternatives in the comments to the article.
    3) The original article went into some depth about the Vista fonts, and noted that because of issues with Microsoft’s ClearType (a requirement for the Vista fonts) and their smaller relative size, some people will choose not to use the Vista fonts. Most of that material was edited out.


    Nice job in citing the Inspiration Bit article. That entire site is excellent.

    @Helen and others: There’s no problem in using “exotic” or less widespread fonts, as long as you “backstop” them with more universal fonts. The issue of font display on different systems and browsers is a persistent one. The only way to address this is to test your font choices on as many different ones as possible.

    @secondred: My article specifically included Linux fonts, and the stacks I created all have Linux fonts in them. Sometimes Linux fonts (specifically DejaVu and Bitstream Vera) are a good bit bigger than their Mac or Windows counterparts. The Liberation fonts seem to be virtually the same size as their counterparts.

    @Matthew Nuzum: Firefox has the FontFinder plugin that does what you’re asking.

    @Darren Taylor: Putting Arial in front of Helvetica/Helvetica Neue defeats the entire purpose of the stack. While most Windows users don’t have both fonts, most Mac users do, and therefore most everyone gets Arial instead of allowing the Helvetica owners to see the site in that font. @Erwin Heiser, LOL at your response.

    @Chris Adams: I don’t think the author “ripped off” my article at all. I will say that almost all of the source sites used are paralleled in my article, but that doesn’t mean she cribbed my work. @Jeff: You got it right in your response.

    @Kartlos Tchavelachvili: Andale Mono is a cross-platform font. It’s a Microsoft core font that is common on many Macs.

    @Simon Day: Don’t get discouraged, just try some of the stacks and techniques, and see what works for you.

    @Ant: Licensing can be ascertained by Googling the font, finding its source, and reading up on it. You’re correct that most Vista fonts, aside from Segoe UI, are quite a bit smaller than their counterparts, as is Han Solo.

    @Alessandro Mingione: Georgia is a gorgeous font, and Web safe, but it isn’t for everyone or every situation. There is no near-universal “best option.”

  39. 39

    Great Post.. one of the most useful I’ve seen on here in fact.. bookmarked!

  40. 40

    Good collection of resources in one place…

  41. 41

    PDF to BMP Converter provides you batch conversion without losing image quality.Using pdf to bmp converter, it is easier to set output formats, you just need check output formats from right panel.

  42. 42

    Whether it’s the low-down on this season’s runway trends or simply wanting to look fabulous, Women’s Fashion has tips and tricks to play up your assets and play down your flaws.

    Fashion Guide

  43. 43

    Putting Arial ahead of anything means that most of the time, nothing else will show up as all computers have Arial, including Macs. Unless you really love Arial, always put it right before sans-serif. Don’t worry that those machines that don’t have Helvetica Nue – you can still put it first; if not there, then Arial will be served. As we all know that’s the way a stack works, computers pick up the first available font in the stack. A side note, I concur with those that say Helvetica is not a great font for body text, especially if the size is smaller. Even the font legend, Erik Spiekermann, decries the use of Helvetica for text. But, without cleartype, Helvetica Nue degrades to a point of complete illegibility. Simply a disaster.

  44. 44

    I just created a visual font stack library that just allows you to click a button to copy a font stack and paste into your css. You can find it at

    Comments and suggestions are more then welcome.

  45. 45

    All the images are gone! I consistently refer back to this article and would love to have the images back.

  46. 46

    It fit perfectly, hiding some curves I didn’t want to reveal.

  47. 47

    Ah! Beautiful. Thank you. Putting this and the 8 Definitive… into effect at stat. =)

  48. 48

    it is may be can help you :

  49. 49

    Tahoma is unsuitable for a general-purpose font stack because it doesn’t have italic glyphs: a faux italic version is synthesized by the browser, usually with far too much slope. Tahoma departs from Helvetica/Arial by having serifs on the capital ‘I’. If you don’t want Arial except as a last resort, you need to put a web font in front of Arial and also in front of “Helvetica”, which is often replaced with Arial by the OS or the browser, in defiance of the font stack. Accordingly, my current Helvetica-like font stack, which incorporates the Google font “Arimo”, is

    “Helvetica Neue”, HelveticaNeue, TeXGyreHeros, FreeSans, “Nimbus Sans L”, “Liberation Sans”, Arimo, Helvetica, Arial, sans-serif;

    — except for large non-italic headings, for which I insert “Microsoft Sans Serif” ahead of “Liberation Sans”. I give further reasons in “A multiplatform Helvetica-like font stack that suppresses Arial”.

↑ Back to top