Font (typeface) selection for the Web?

Question

I got to thinking about font (typeface) selection today. A site I did for work came with this professsionally done style guide that detailed colour selection, font selection, spacing, etc. It's the first time I'd seen anything like that but I have to admit, what they'd chosen did look good.

Now I've previously read about colour theory so I know about complementary colours and choosing colours schemes with say 1, 2 or 3 different colours. So I'm fine with that side of things for my pet project anyway.

But I haven't really seen anything about typeface selection in the Web context. I found some discussions on fonts for printing where you had the option of downloading and including custom fonts. That's not an option on the Web. You're limited to what browsers (or, rather, operating systems) support. I'd be interested in reading something about what IE and Firefox support on Windows and Mac (sorry, Linux is too marginal to be a consideration for anything other than CSS font-family fallback) and what those fonts convey: whether they're serious, formal, casual, inviting, etc.

Anyone know anything like this?

Answer 1

This link seems to have the chart you are looking for:

http://www.upsdell.com/BrowserNews/res_fonts.htm#a01

Answer 2

This is an excellent reference on web typography I keep coming back to. Covers the basics of typography and how they apply to the web.

Answer 3

http://www.typetester.org/ is really useful.

Answer 4

You really do NOT have a lot of variety for fonts on the web if you intend to be cross-OS compatible .. You are basically limited to really a handful of uninspiring choices.

If you want to get some "serious, formal, casual, inviting" fonts then you're going to need to create bitmap images in a graphics editor - which of course doesn't help too much if your content isn't static.

For dynamic content with an "unlimited" range of font treatments, what I would probably try is some PHP + GD or ImageMagick goodness to generate bitmaps on-the-fly.