8 Definitive Web Font Stacks

Get Started
1

Notice: This is a discussion thread for comments about the SitePoint article, 8 Definitive Web Font Stacks.

I’m not sure important this is, but I believe it’s worth noting that fonts can render differently cross-browser, even on the same OS. Cornerstone, for instance, looks quite different in IE7 than it does in Firefox. Opera seems to play by its own rules more often than the others, as well.

I’d say it’s a good idea to check your typeface choices in multiple browsers when developing your own stacks, or even create browser-specific ones.

1 Like
2

‘8 Definitive Font Stacks’ ignores x-height – as a result, this article is not terribly helpful for web developers concerned about readability and using CSS for typesetting.

Sorry for posting about an old article, but nobody else mentioned this that I could see, and the reader rating seemed too high considering this omission.

3

I believe I mentioned in the article that x-height wasn’t specifically considered. Few of the fonts in even the most frequently encountered stacks have identical x-heights. I did note repeatedly that the Vista fonts were often “too small” for their comparative fonts, and that is partly due to x-height disparity. You’re welcome to downrate the article to reflect your concerns.

4

What about complimentary fonts for use within different parts of a page? Typography is something I haven’t had a lot of time to research so I usually just stick to one font declaration for the whole site. What combination of stacks might work well for headers, body, etc.?

5

Your screenshots should have been a gif or png because they render graphics much better and at a smaller size than jpg’s which pixelate and distort the fine details in typography.

6

I agree! for such graphics PNGs or GIFs are better!
Anyway the point of the article is clear even with JPG graphics :slight_smile:

7

question … I’m on a Mac, do i need to test the Linux and PC fonts as well ? I’m one of those designers who like to use arial, Verdana, and Trebuchet !

8

Hi guys. Thanks for the feedback. A few points and responses:

The article was originally entitled “Eight ‘Definitive’ Font Stacks.” The quotes highlight the innate impossibility of making “definitive” stacks. And, looking at the stacks, I can already see some changes I’d make now, particularly in cutting back on a couple of them.

Speaking of cuts, this article was cut back drastically from its original form. If it seems a bit truncated, it is. On the other hand, Matt and Andrew were correct in cutting it down – the original version was rambling, repetitive, and verbose.

Fonts absolutely do render differently on different browsers. Good point.

The argument about “fonts for headers,” “fonts for body,” etc rages on all around this article. I won’t settle anything with this one piece of verbiage. It used to be the convention to use sans-serif fonts as headers and serif fonts as text, but that seems to have reversed itself lately. Ultimately, it’s a decision you have to make based on your design, the needs of your client and the site’s audience, and so forth. My suggestion is to start looking at Web sites that feature good or unusual typography, and take notes.

The screenshots WERE originally PNG files. They got converted. I can send you the originals if you like.

Mac users definitely need to test the PC and Linux fonts as much as they possibly can, and vice versa (and vice versa – there are three main platforms, after all), keeping in mind 12sharks’s comment that different fonts translate differently on different browsers. They also translate differently on different platforms.

One of the things cut from this article was the huge source listing, probably fifty or so links. I’m going to post that presently in this thread, along with the “thank you” section that got cut for lack of space.

Thanks to Matt and Andrew for consenting to publish this, and thanks to the readers for giving it their time and commentary. I hope this starts a much more widespread argument…I mean, appreciation and understanding of typography’s impact on Web design.

9

This is the original “thank you” section of the site. These people deserve recognition.

Special Thanks

I owe a debt of gratitude and appreciation to Vivien, the host of the aforementioned Inspiration Bit, for hosting a lively and informative conversation about Web typography between herself, some very knowledgeable community members (particularly [URL=“klepas.org/”]Simon Pascal Klein and [URL=“http://leonpaternoster.com/”]Leon Paternoster), and my amateur self. I found her site relatively late in the process of rewriting this article, but the discussion helped reshape much of the detail and bring the article into focus. She is a gracious and well-informed host who has designed a lovely, welcoming, and informative haven on the Net.

Pascal, who is quoted extensively in this article, spent a great deal of time commenting on the article, suggesting inclusions and caveats. His knowledge of typography and Web design are formidable, and his generosity in sharing that knowledge was critical to keeping this article at least somewhat honest. (It need not be said that any errors or missteps in the article are mine, not his or Vivien’s or anyone else’s. Send all disagreements and bad vibes my way.)

And of course, I owe Tommy Olsson a strong thank-you and yet another debt of gratitude for his support in crafting the early version of this article. Now if he’d just quit flirting with my wife, all would be well. (Kidding, kidding!)

These three sites are excellent places to start in exploring the realm of Web typography, as are the Web homes of designers Cameron Moll and Jon Tan, both linked in the article.

10

This is a great article, which I instantly bookmarked. Very well done, my friend!

(And can you really blame me for flirting with your wife…? :p)

11

Baby, do people really notice than - the font!

12

@BlackMax: Should I say “welcome back to your origins”?

Great article :smiley:

@AutisticCuckoo: I don’t think Mike is blaming you for flirting with his wife… I bet he does it himself :stuck_out_tongue:

13

Great article! I’m going to investigate this a bit more, but I really like the concept. It would be nice to make usage of more beautiful fonts on the web when one is able!

One question I have is about Calibri. You mention in the little samples of each that Calibri is significantly smaller than its counterparts and to see the article for more information. I scanned the article a few times, but didn’t see any discussion of that potential issue. What can one do with Calibri to make it work, even when its sizing is so different?

14

Bookmarked and dugg!

Certainly you opened my eyes to a few things Max, now I have no excuse not to make better stack decisions, when you’ve done the hard part for me! :smiley:

15

Surely including a font in every list that is “significantly smaller” will result in unacceptable differences in layout? Thanks for the heads up, I will definitely NOT include any Vista fonts in my stacks.

16

Terrific work, folks. I’m using some haphazard font stacks of my own making, but having all these alternatives laid before me is going to make a big improvement. I’ll be putting these to work right away!

17

Interesting article, Michael, and I know a lot of work went into it.

I think I agree with Klein: you really have to take care when using some of these fonts. For example, I’d use helvetica/arial/verdana for sans-serif body copy because these fonts look good on a screen compared to, say, Tahoma.

Having said that, there’s some room for creativity when it comes to other page elements, such as headings, straplines etc.

And it’s good to see us Linux users catered for, even if most do end up downloading the MS core fonts (and the OS X fonts). It was interesting to read which non-Linux fonts they match up with.

18

Great article! I’ve been hoping someone would do this ever since I started using CSS, and never seemed to have the time (or ambition) to do it myself.

19

Thanks, Tommy. I appreciate your help with the article.

Don’t make me come over there. :slight_smile:

Molona, thank you.

Never. We live a life of monastic denial. :stuck_out_tongue:

Aaron, thanks. It’s such a no-brainer to me – the fonts are out there, the technology to use them, and provide more widespread alternatives, is out there…why not?

There was an extensive section about this in the original that did not make it past the final edit. (Really, about 70% or more of the article didn’t make it. !!) Almost all of the Vista fonts, with the exception of Segoe UI, have this problem. There is the @font-face property, but it only works in Safari (and IE5+, kinda sorta, as Tommy pointed out); until CSS3 is in widespread use, that won’t help much. Same caveat applies to the @font-size-adjust property, which as far as I’m aware is only supported in Firefox 3. Because of the sizing issue, you may want to either design around Calibri’s smaller size or not use it at all. Frann made the decision not to go with Vista fonts, and I can respect that. I wouldn’t necessarily throw them out from consideration entirely, but you have to be aware of the size differential.

Andy, you are so the man :slight_smile: but I didn’t do the hard work for you – I merely gave you a starting point for your own exploration. I wouldn’t recommend that anyone just grab and insert those font stacks without doing some experimenting with each font in the stack to see how it would impact the particular design. Jim, thanks, but the same caveat applies – don’t just cut, paste, and go (although that was kinda the idea when I first conceived of the article).

Another reader sent some interesting criticisms of the stacks themselves through the feedback form, as well as noting some other things that were in the original article but did not make it through the final editing process. I’m going to ask him (her?) to either post on the forum or give me permission to address his questions in the forum. If you have your own questions or caveats about the stacks, post them. I don’t promise to have any answers, but it will be fun to kick them around a bit.

20

Thanks, Leon. The discussions with you, Pascal, and Vivien were very helpful in my own learning process for the article.

Verdana doesn’t go so well with these other three fonts because it’s considerably wider than the others. Tahoma is a bit narrower, but to my (admittedly blurry) eyesight, it’s not as narrow as Verdana is wide…if that makes any sense at all. If I were going to match up Verdana with other widely used sans-serif fonts, it would be with Trebuchet and Segoe UI, though that isn’t quite what I did in the stacks.

Absolutely. Those more “decorative” (as in less heavily used) text elements are just begging to be spiffed up with some nicely chosen fonts.

Linux users are shamefully ignored in typographical choices, and with the increasing trend among Linux users to shun Microsoft and even Mac fonts for their own fonts, designers need to take them into account. I’d like to see more fonts become available for Linux users.