Better CSS Font Stacks

by Nathan on 6.26.08 | Comments (79)

One aspect of designing for the web that almost immediately offends designers is the lack of fonts that are considered safe to use. While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack.

Font stacks give you freedom.

You want to use Gill Sans? Go right ahead. Nothing should stop you. Font stacks are prioritized lists of fonts, defined in the CSS font-family attribute, that the browser will cycle through until it finds a font that is installed on the user’s system. This means that you can use Gill Sans, and if your users don’t have it, you can give them an adequate substitute that will not diminish their experience. As Mr. Richard Rutter has already illustrated, there are quite an array of typefaces that may be sitting on your user’s machine ready to serve your design needs.

Unfortunately, common web practices and/or technologies are not fully utilizing this functionality. There seems to be a lack of consideration for the process of creating these stacks. For example, Dreamweaver’s defaults look like so:

  • Arial, Helvetica, sans-serif

  • Courier New, Courier, monospace

  • Times New Roman, Times, serif

  • Georgia, Times New Roman, Times, serif

  • Verdana, Arial, Helvetica, sans-serif

  • Geneva, Arial, Helvetica, sans-serif

As you can see, there are not a whole lot of options, and the substitutes are often not appropriate. This is an example of how lax typographic standards on the web are leading to poor design decision making. I am not going to speculate, here, as to whose fault it is that typography on the web leaves much to be desired… there are probably as many culprits as there are offenses. I will say, though, that font stack are ultimately design factors, and should be scrutinized as such.

All in the Family

When creating a stack, first consider the context of the text. Is it going to be a headline, sub-head, or body copy? This can determine the appropriate order of a stack, considering certain fonts work well for setting blocks of copy, while others work better at larger sizes. For example, Helvetica’s nuances work well on screen, when the text is large enough, while Helvetica Neue’s slightly wider letter forms read better at smaller sizes on screen. Arial reads slightly better than Helvetica at smaller sizes on the screen, as well. Therefore, your font stack for Helvetica may need to be different depending on whether it is used for body copy or a page title.

Once context is considered, there are few more things to consider when building a stack. First, select your ideal candidate (more on that later). From there, the path of your choices may fork depending on the context:

Titles [ greater than 12px ]:

font-family: Ideal, Alternative, Common, Generic;

  1. Ideal - Your selection need not be bound by what is considered universally “web safe”. There are many more fonts that have a fairly high market penetration that you can choose from. Just don’t pick anything too obscure, or you will be the only one seeing it.

  2. Alternative - When selecting headline and title fonts, remember that the nuances will be more noticeable, and therefore you need to select an alternative that is closer in spirit than size or relative value. To find a spiritual cousin, you may want to look within the same type classification, or look for something created by the same type designer. Mainly, look for similarities in the letter forms.

  3. Common - At this point, you just need something similar that is not going to break your layout.

  4. Generic - Cap it off with the generic classification, for those zealots that don’t believe in installing fonts.

Paragraphs [ less than or equal to 12px ]:

font-family: Ideal, Fit, Common, Generic;

  1. Ideal - Even if you intend this copy to match the titles, you may want to consider the readability of the typeface over the span of a few paragraphs. For example: Helvetica Neue and Arial are better suited to be read small and on screen than Helvetica.

  2. Fit - Find something that is well represented, cross-platform that will not wreck your layout. For example: There is about 2 pts difference between the width of Times New Roman and Georgia. Multiply that by the number of characters in your copy blocks, and you could spell disaster for your otherwise-nicely-considered design.

  3. Common - Something similar in flavor and well-represented.

  4. Generic - Again, finish with the generic classification.

Keep in mind that if your ideal font is only well represented on Macs, for example, you may want use an alternative that is more prevalent on Windows machines. For more information on the prevalence of certain typeface on certain operating systems, take a look at codestyle.org/css/font-family/.

Stack Your Deck

Now, using these guidelines, and building on the experience of much more knowledgeable type gurus, I have compiled a list of font stacks that will both open up more font possibilities for web designers, and hopefully offer more appropriate substitutes:

  • p - balanced for paragraphs or body copy

    t - balanced for headlines or titles

  • Arial, Helvetica Neue, Helvetica, sans-serif - p, t

  • Baskerville, Times New Roman, Times, serif - p

    Baskerville, Times, Times New Roman, serif - t

  • Cambria, Georgia, Times, Times New Roman, serif - p, t

  • Century Gothic, Apple Gothic, sans-serif - p, t

  • Consolas, Lucida Console, Monaco, monospace - p, t

  • Copperplate Light, Copperplate Gothic Light, serif - p, t

  • Courier New, Courier, monospace - p, t

  • Franklin Gothic Medium, Arial Narrow Bold, Arial, sans-serif - p, t

  • Futura, Century Gothic, AppleGothic, sans-serif - p, t

  • Garamond, Hoefler Text, Times New Roman, Times, serif - p

    Garamond, Hoefler Text, Palatino, Palatino Linotype, serif - t

  • Geneva, Lucida Sans, Lucida Grande, Lucida Sans Unicode, Verdana, sans-serif - p

    Geneva, Verdana, Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - t

  • Georgia, Palatino, Palatino Linotype, Times, Times New Roman, serif - p

    Georgia, Times, Times New Roman, serif - t

  • GillSans, Calibri, Trebuchet, sans-serif - p

    GillSans, Trebuchet, Calibri, sans-serif - t

  • Helvetica Neue, Arial, Helvetica, sans-serif - p

    Helvetica, Helvetica Neue, Arial, sans-serif - t

  • Impact, Haettenschweiler, Arial Narrow Bold, sans-serif - p, t

  • Lucida Sans, Lucida Grande, Lucida Sans Unicode, sans-serif - p, t

  • Palatino, Palatino Linotype, Georgia, Times, Times New Roman, serif - p

    Palatino, Palatino Linotype, Hoefler Text, Times, Times New Roman, serif - t

  • Tahoma, Geneva, Verdana - p

    Tahoma, Verdana, Geneva - t

  • Times, Times New Roman, Georgia, serif - p, t

  • Trebuchet, Lucida Sans Unicode, Lucida Grande, Lucida Sans, Arial, sans-serif - p

    Trebuchet, Tahoma, Arial, sans-serif - t

  • Verdana, Geneva, Tahoma, sans-serif - p

    Verdana, Tahoma, Geneva, sans-serif - t

I did deliberately leave out some fonts, *cough* Comic Sans *cough*, because I do not particularly see the use in them, and I don’t believe that these examples will solve every typographic purpose, but hopefully it’s a start. Feel free to apply the above rules and create some stacks of your own.

If you’re interested in a more comprehensive comparison, download the pdf [13.1 mb]. In it, you will find examples of both titles and copy, set in the different font stacks.

Now, font stacks help us open up a few more typographic options to create a more engaging online communication, but how do we choose which specific face to use? And which of these web safe fonts will work as a good compliment? More on that in my next post.

Categories: Design, Typography

Permalink | Comments (79)

Nathan’s Font Stacks | aboutCREATION :: Thursday, June 26, 2008 11:24 am

[...] at Unit Interactive, has written a wonderful article on Web font use, entitled “Better Font Stacks.” In his article, Nathan tackles the issues of advisable font usage and CSS cascade in the [...]

Dave Rutledge :: Thursday, June 26, 2008 12:16 pm

I’d love to see stats on font installations. It seems likely to me that 90+% of web users haven’t ever purposefully installed a new font, so we’d very likely be left checking % of people who have installed the applications (potentially that’s exclusively MS Word for any portion above 10% of your audience) that auto-install new fonts.

Nathan Rutman :: Thursday, June 26, 2008 12:32 pm

Dave, came across this site a while back with some very basic font installation stats for Windows & Mac — it doesn’t look like sources are cited, so I don’t know exactly where the numbers came from.

Nathan :: Thursday, June 26, 2008 12:32 pm

@ Dave
Check out codestyle.org/css/font-family/ to get more on the percentages. As for auto-installs, you hit the nail on the head. A lot of fonts with high market penetration come from MS Office and other ubiquitous software.

Arpan :: Thursday, June 26, 2008 1:02 pm

Great article. Web typography isn’t easy to get right, and this article is really helpful.

Amy :: Thursday, June 26, 2008 1:40 pm

the comic sans comment made me laugh. I have had clients that wanted their entire site in comic sans. (I put my foot down of course and told them no). Good article. Something a few of my coworkers should take a look at

Matt Radel :: Thursday, June 26, 2008 1:49 pm

Nice write-up! It’s very easy to fall into an almost habitual pattern with typography on the web - it’s nice to be reminded that there are more options available.

Richard Davies :: Thursday, June 26, 2008 3:07 pm

Great article! It was very helpful and I’ll be sure to use it as a starting reference for when choosing typefaces in the future.

sunny beach :: Thursday, June 26, 2008 3:36 pm

(Disclosure: I’m ignorant of default font stacks on *NIX) If you put Arial before Helvetica, you might as well not include Helvetica at all; Arial is installed by default on any recent OS X and your font stack will never make it that far.

Colin Williams :: Thursday, June 26, 2008 4:06 pm

I like the approach you lined up differently based on headings and longer passages. I think I usually just go from most-likely-and-least-evil to absolutely-and-most-evil when constructing font stacks, but your approach seems much more sound.

It is, however, a bit disappointing this trend of sticking up for the status-quo of type setting in the browser. This has got to be the 10th post I’ve read to this effect in the past two weeks. When you really step back and get honest about it, typesetting with CSS lacks any features you’d expect in this modern age.

The model up to the WaSP-era was: Every browser vendor implements great features in their own special way, then we get together and standardize it. Now it’s: Let’s build and agree on a standard first, then implement. I find myself thinking the former is a better route. Think about this: Would you rather embed fonts in 3, 4, 5 different ways today to accommodate all browsers that implement it, or do it 1 standard way 10, 15, 20 years from now? I know webkit is taking the more rapid approach, and I hope the others can turn a cheek to WaSP and get things done.

Magnetbox - links for 2008-06-27 :: Thursday, June 26, 2008 8:31 pm

[...] Better CSS Font Stacks (tags: web design css font typography) [...]

links for 2008-06-27 — Kingdom Geek :: Thursday, June 26, 2008 11:40 pm

[...] Better CSS Font Stacks I’m still learning a great deal about Web design, particularly through working on NeoBox; font-family choices is not one of the things I have worked on as of yet. I’m gonna have to try some of the stacks suggested in this article! (tags: typography fonts webdesign css design) [...]

Eddie Welker :: Friday, June 27, 2008 12:13 am

Funny, this is perfect timing. I caught myself writing font names on the back of an envelope this morning, and realized then that it’s high time I investigated coming up with a new set of “stacks” (didn’t know there was a term) for myself. Now I can cross off Trebuchet and leave the other comments on the envelope!

Web Crawler :: Friday, June 27, 2008 4:06 am

Great article! It was very helpful for me and I’m sure will be for other as well.

Tom H :: Friday, June 27, 2008 4:22 am

http://www.visibone.com/font/tests.html

David Owens :: Friday, June 27, 2008 4:39 am

Great article - I’ll be sharing it with my colleagues. One quick point though. Helvetica looks lousy on a windows machine.

Wolf :: Friday, June 27, 2008 5:00 am

Dear author, please realize that the possibility of a person having Helvetica but not Arial is close to zero.

Helvetica Neue for body copy is not a good idea, neither is Helvetica. These fonts were optimized for print, not for screen. The are usable for headings.

The correct way of calling out Gill Sans is “Gill Sans”, not GillSans.

xxx :: Friday, June 27, 2008 9:20 am

Dear Wolf, you don’t know what you’re talking about. The situation that you believe to be nearly impossible is actually very common on UNIX clients.

Seleccionar tipografías con CSS — Tablosign :: Friday, June 27, 2008 11:14 am

[...] artículo donde se explica como seleccionar de la mejor manera las fuentes para nuestra web con CSS. 0 [...]

Johan :: Friday, June 27, 2008 1:37 pm

Well anonymous, what do you mean by Unix clients - that’s a pretty broad spectrum. My stats show me that 1% of my visitors are on Linux and 49% are on Macs - Macs have Arial by default (but also Helvetica).

links for 2008-06-27 « toonz :: Friday, June 27, 2008 6:31 pm

[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: css font) [...]

Evolution of Web Fonts :: Friday, June 27, 2008 6:59 pm

This is a great write-up, but I agree with the general consensus that Helvetica is a terrible fall-back for Arial (IE smudges the font). It’s also best to stick with the fonts that are entirely cross-platform and cross-browser compatible.

Tom Most :: Friday, June 27, 2008 10:42 pm

Speaking of UNIX clients, it might be wise to include “URW Palladio L” in stacks favoring Palatino. We Linux users are often left out of the typography party, but that needn’t be the case.

Aaron Mills :: Friday, June 27, 2008 11:27 pm

This was like being hit in the head with a hammer.. I can’t believe I don’t consider creating better font stacks more often… computers are getting a lot better as time continues to pass.. and as a community as a whole we use really terrible fonts all the time. If we don’t start using better fonts we will have an entirely ugly internet of our own creation!

Thanks for the wake up call

johno :: Saturday, June 28, 2008 2:08 am

It’s about time someone wrote this article. I do believe that many of the present stacks are relics from those—shudder—WYSIWYG app’s.

You’ve also done everyone a favour by highlighting how those stacks should be constructed. I’d like to see more on this (e.g. if you’re referencing an Old Style type like Garamond, then follow it up with an alternate Old Style type like Palatino [just an example]); I’d also like to see more data on what users actually have sitting on their machines.

The only thing that’s a little confusing is,
“There is about 2 pts difference between the width of Times New Roman and Georgia.”
At which point size? Perhaps a percentage would be more useful.

Am also baffled by Evolution of Web Font’s comment,
“’s also best to stick with the fonts that are entirely cross-platform and cross-browser compatible.”
which appears to miss the whole point of this article, which surely is about broadening the possibilities and expanding choice.

Another thing of interest is that not all fonts are of equal size even when they share the same point size. In addition, it’s probably worth giving (if one is using px), an extra pixel or two to those fonts with lesser x-heights.

An excellent article. Looking forward to part two.

links for 2008-06-28 | iKeif :: Saturday, June 28, 2008 12:30 pm

[...] Unit Interactive :: Blog :: Better CSS Font Stacks 23 hours agoI dont’ like when people start interjecting "personal opinion" into [...]

Big Contrarian → Your stack sucks. :: Saturday, June 28, 2008 6:06 pm

[...] Crafting better CSS font stacks, which has already found it’s way into my style sheet. [...]

Stack That Shat! | command line idiot :: Saturday, June 28, 2008 7:30 pm

[...] Better CSS Font Stacks [...]

CLIdiot :: Saturday, June 28, 2008 7:32 pm

Nathan, I hope you don’t mind, but I took all of this and dropped it down into a handy little css file, so that I could easily call up the different fonts mid-project. You can grab it here:

http://www.commandlineidiot.com/blog/2008/stack-that/

ben :: Saturday, June 28, 2008 9:27 pm

awesome font list, just what we need for css

Rawkes Weekly – 29 June 2008 » Captain's Blog » Rawkes :: Sunday, June 29, 2008 7:48 am

[...] Better CSS Font Stacks – Theory and explanation behind organising font stacks in CSS [...]

jody :: Sunday, June 29, 2008 3:08 pm

Have you considered site demographics? Apple.com’s lucida grande at 11px looks fabulous on Mac, but its Arial backup at that size is horrendous. Your stacks are risky, especially without sufficient client-specific research up front. Throwing them out there as a solution for everyone is a tad misleading, dont’cha think?

Moving forward with CSS | Wisdump :: Monday, June 30, 2008 1:35 am

[...] Stacks: The Unit Interactive blog lists various scenarios in which you should order your CSS font stacks. A PDF file is available for [...]

Max Black :: Monday, June 30, 2008 1:45 am

Excellent, excellent article. One note: I agree with you 100% on the Comic Sans font, but I have to tell you, I work in the public schools, and that is a VERY popular font on educational, school, and classroom sites. Tragic, I know, but true. What “stack” would you recommend for someone who is being forced by ignorant administrators with the power to enforce their will to use Comic Sans as the primary font?

Nathan :: Monday, June 30, 2008 12:36 pm

@ Jody:
I did actually take demographics (albeit on a global scale, not site specific) in to serious consideration. The resource I used was sited in the article:

http://www.codestyle.org/css/font-family/

You are right, though, Arial is not a good substitute. Apple would be better served with the Lucida Sans stack from above, and not even serving up any Arial.

@Max
It is unfortunate that Comic Sans is so prevalent. My own personal taste aside, copy blocks would be quite tedious when set in Comic Sans, especially for younger readers. You would be better served by something with more regular shapes (less handwritten) and a larger x-height (which makes it easier for early readers to digest). Bookman Old Style is well represented on Windows systems, so you could do:

Bookman Old Style, Georgia, Times, Times New Roman, serif

Now for my soapbox statement: They should be learning the proper shape of their letter forms, and what better way than by example?

David :: Monday, June 30, 2008 1:45 pm

I would urge great caution about using Helvetica: Hewlett-Parckard’s printers (often? sometimes? always?) ship with a horribly hinted version of Helvetica that is unusable onscreen at text size.

Bookmarks for June 30th from 21:04 to 21:09 :: What else is new? :: Monday, June 30, 2008 3:08 pm

[...] Unit Interactive :: Blog :: Better CSS Font Stacks - [...]

Diseño web: recomendaciones para el uso de tipografía en CSS | Tipos del Sur - Diseño desde el sur de Chile. :: Monday, June 30, 2008 11:09 pm

[...] es una traducción, a ratos literal, de un excelente post de Nathan Ford de Unit Interactive acerca de la correcta elección y creación de Cascadas de [...]

CSS Font Stacks » Undress Me Robot :: Tuesday, July 1, 2008 10:29 pm

[...] but then list alternatives that, at best, look ugly or, at worst, completely break the design. Better CSS font stacks is a collection of complementary fonts, appropriately categorized by paragraph or [...]

Notional Slurry » links for 2008-07-02 :: Wednesday, July 2, 2008 1:33 am

[...] Unit Interactive :: Blog :: Better CSS Font Stacks (tags: design graphic-design fonts typeface typography HTML) [...]

Megan :: Wednesday, July 2, 2008 8:17 am

I wrote an article last November that lists all of the pre-installed fonts for the 3 major operating systems plus MS Office. What I prefer to do is to choose one that’s available on each OS and maybe throw in an MS Office font if it’s the “ideal”. It looks like you’ve more or less done that with your stacks here. Thanks for posting them - I’ll throw in a link from my article.

One thing to keep in mind with that font surve site is that the results are cumulative since January 2004. Default font offerings have changed since then and some OS versions have probably been phased out. I don’t entirely trust those results but I suppose it’s better than an outright guess.

being (no)body » m3talink for July 2nd :: Wednesday, July 2, 2008 7:49 pm

[...] Unit Interactive :: Blog :: Better CSS Font Stacks is While it is true that there are only a handful of web safe fonts, the ones we do have at our disposal can be quite powerful and diversely useful. On top of that, CSS gives us a nice little thing called a font stack. [...]

crawlspace|media » Blog Archive » Daily Ma.gnolia Links for July 02 :: Thursday, July 3, 2008 2:00 am

[...] Unit Interactive :: Blog :: Better CSS Font Stacks Unit Interactive is an interactive design consultancy. Website design, standards compliant code and css development by Andy Rutledge and Angela Conlon. [...]

Paul Sanderson » Blog Archive » Better CSS Font Stacks :: Thursday, July 3, 2008 6:12 am

[...] better use of your fonts……. One aspect of designing for the web that almost immediately offends designers is the [...]

Bernhard :: Thursday, July 3, 2008 10:35 am

IE seems to ship with these factory settings:
sans-serif Arial
serif Times New Roman
monospace Courier
and the whole bunch served up at a default size of 16pt assuming the highly speculative resolution of 96dpi. Operative word “seems”.
Since your average Joe User rarely tampers with those settings, thats what they most probably see when your CSS uses generic font-families at size 1em. It is also what they will see when they have none of the fonts in your stack and the browser falls through to the defaults.
In the end this boils down to: test your site on as many “out of the box” systems as possible and don’t rely on speculation or statistics.

Susan :: Friday, July 4, 2008 8:55 am

great writeup, the comparison pdf is especially handy, however i would like to see a mention about how win/os x display particular fonts, and how that would influence the stacks.

Usando correctamente “Font Stacks” | Isopixel :: Friday, July 4, 2008 11:33 am

[...] estos temas que rodean a la propiedad Font Stacks son los que tratan en el artículo publicado por unit interactive, donde nos explican que es y también los malos usos que se hacen de ella, como los grupos de [...]

Usando bien “Font Stacks” » Cosas sencillas :: Saturday, July 5, 2008 5:04 am

[...] estos temas que rodean a la propiedad Font Stacks son los que tratan en el artículo Better CSS Font Stacks, publicado por unit interactive, donde nos explican que es y también los malos usos que se [...]

nortypig » Blog Archive » Better Font Stacks :: Saturday, July 5, 2008 7:31 pm

[...] on Unit Interactive has an excellent article on improving your CSS font stacks to lift your design [...]

Ramblings of a Web Developer » Blog Archive » Better ways to use fonts in web design :: Sunday, July 6, 2008 12:36 pm

[...] as per Paul Boag’s suggestion, I had a good look at Better CSS Font Stacks by Nathan Ford at Unit Interactive.  This article is a really great starting point for people who think that font selection for [...]

Sunday Weekly Roundup #25 - 07/06/2008 » Blog at veanndesign.com :: Sunday, July 6, 2008 2:46 pm

[...] Better CSS Font Stacks [...]

Reading List, 7July08 » Karl Katzke | PHP, Puppies, and other Geekery :: Sunday, July 6, 2008 7:51 pm

[...] Better CSS font stacks. Bookmarked so I can find this later. [...]

Philip (flip) Kromer :: Sunday, July 6, 2008 10:05 pm

I’d urge you to consider adding ‘Bitstream Vera Sans Mono’ to the monospaced font stacks. This font is standard in Gnome (and so most Gnu/Linux|BSD), and is a beautiful typeface. It’s free for anyone to download: http://www.gnome.org/fonts; follow the download link and choose the .zip file.

Incidentally, Bitstream Vera Sans Mono is widely regarded as the best programming font: http://www.lowing.org/fonts/

Alderete :: Thursday, July 10, 2008 1:19 am

@flip: Heh. I would suggest that no font would be considered “widely regarded” as the best for any purpose, but _especially_ for programming. If you do a Google search on the topic, you’ll find quite a range of options and opinions. The only thing that’s clear is that there’s no consensus, not even close.

(Note that I write this having tried a bunch, even paid for a few, and with Bitstream Vera Sans Mono 13 point set in my editor. So I like it, but I’ve liked others, too, and I know the issue is anything but settled.)

Bookmarks for July 11th | Quality Peoples :: Friday, July 11, 2008 1:39 am

[...] Unit Interactive :: Blog :: Better CSS Font Stackswhy reinvent the wheel, here are some great css font stacks, organized by text kinds: paragraph/bodycopy and title/headlines. super smart stuff! [via Big Contrarian] [...]

Great Resources Elsewhere: June 30 to July 07 - CSSnewbie :: Friday, July 11, 2008 2:01 am

[...] Unit Interactive :: Blog :: Better CSS Font Stacks [...]

Heather :: Friday, July 11, 2008 12:22 pm

Wow, this is a great eye-opener. I’ve definitely been shorting myself on fonts.

Tim Einfeldt » Neue CSS font stacks :: Friday, July 11, 2008 1:06 pm

[...] durch diesen Artikel über bessere font stacks (die Angabe von Fonts in CSS, zb. Helvetica -> Arial -> sans-serif) habe ich mal die beiden [...]

You want fonts with that? « CyberText Newsletter :: Saturday, July 12, 2008 6:36 pm

[...] You want fonts with that? July 13, 2008 Nathan Ford, over at unit interactive, has written a great blog post on moving a little outside the square when it comes to defining ‘font stacks’ in CSS [...]

Strumenti e articoli interessanti sui CSS: qualche spunto per iniziare la settimana : cssblog.it :: Monday, July 14, 2008 12:17 am

[...] Font Stacks [...]

links for 2008-07-21 | Anidan Design : eco-friendly web & graphic design :: Sunday, July 20, 2008 9:31 pm

[...] Better CSS Font Stacks (tags: css fonts font stacks design typography) [...]

Blank Canvas | Pat Dryburgh :: Thursday, July 24, 2008 11:47 pm

[...] is a font I’ve really grown to love over the last 6 months or so. I’ve also test out some more in depth font stacks, using Futura as the blog info font. I’ll likely do more of this as we go, but I’m not 100% sure [...]

Charles Cooke :: Monday, July 28, 2008 3:43 am

I also found this an excellent resource. The pdf is also a useful for those of us who don’t have the myriad of fonts involved however I wonder if it contains errors or do I misunderstand it. For instance page 4 lists four fonts other than the generic but both sets of examples show only three. Similarly on page 11, 12, 13 and probably others. It makes it difficult to understand which fonts are depicted.

‘Design Thoughts’ : rjslade » Mostly about Fonts… :: Monday, August 4, 2008 5:15 am

[...] Any of you who have designed a web site and want the end user to see what you are seeing , know of the problem of the end user not having your fonts. In CSS you use a device called a font stack. A useful resource is: http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ [...]

Jason King :: Monday, August 11, 2008 6:29 pm

Interesting. I never go with Dreamweaver’s default fonts but neither do I give as many alternatives as you suggest. I’ll give it a try.

Web fonts can be nice (honest) • Peter George Coles Makes Websites & Other Cool Stuff :: Friday, August 15, 2008 5:34 am

[...] wrote a nice article here on font-stacks which is a really good read. Taking his ideas on board here are my suggestions for [...]

Bookmarks about Fonts :: Sunday, August 24, 2008 10:15 am

[...] - bookmarked by 4 members originally found by wallerstein on 2008-08-01 Better CSS Font Stacks http://unitinteractive.com/blog/2008/06/26/better-css-font-stacks/ - bookmarked by 1 members [...]

giotas.eu - Συλλογή από σκέψεις, ιδέες και προτάσεις γύρω από τον σχεδιασμό ιστοσελίδων » Blog Archive » Επιστροφή στην ρουτίνα :: Tuesday, August 26, 2008 2:27 am

[...] Better CSS Font Stacks [...]

21 Css Font Stacks with Examples | Frozr dot com* :: Sunday, August 31, 2008 2:57 am

[...] to unitinteractive.com for the font [...]

jordan :: Thursday, September 4, 2008 3:14 pm

Thank you, this is absolutely perfect!

ToyChicken :: Tuesday, September 9, 2008 8:26 am

Just FYI - Comic Sans is often used because it’s the only default font that has a lowercase ‘a’ that is formed in the same way as children are commonly taught to hand-write them.

Not saying this is wrong or right - but there is a rationale!

CSS3: tutoriales, herramientas y compatibilidad con browsers - elWebmaster.com :: Tuesday, September 16, 2008 2:23 pm

[...] Font Stacks >> El blog Unit Interactive nos da varios ejemplos de situaciones en las que se deben ordenar las font stacks de CSS. También se puede descargar un PDF. [...]

CSS3: tutoriales, herramientas y compatibilidad con browsers :: Wednesday, September 17, 2008 1:58 pm

[...] Font Stacks >> El blog Unit Interactive nos da varios ejemplos de situaciones en las que se deben ordenar las font stacks de CSS. También se puede descargar un PDF. [...]

Elliot Jay Stocks » Starkers for WordPress 2.6.2 :: Thursday, September 18, 2008 7:07 am

[...] ‘Typography.css’ contains a commented-out guide to better font stacks, recommended by Nathan Ford [...]

VefeUsets :: Tuesday, October 7, 2008 4:42 am

favorited this one, dude

Rob Schumann :: Tuesday, October 21, 2008 7:39 am

Good article. The idea that the web-safe fonts are the last but one in the stack is important to the improvement of typography on the web: the existance of font-family allows for greater variability (originality) in font selection than is commonly seen. Points similarly explored in “Font Families & Web-safe Fonts: The Point of Penultimate Resort“, and supported with “Aspect values and x-widths for fonts“.

Looking forward to the next article on the subject.

CSSKarma.com » This Week in Links 10/27 :: Monday, October 27, 2008 11:05 am

[...] Better CSS Font Stacks [...]

Dave :: Tuesday, October 28, 2008 7:37 am

Where did this word ’stack’ come from?
Correct me if I am wrong, but the correct term is ‘font-family’ is it not?