Dougal Campbell's geek ramblings

When I’m putting a new web site together, one thing that sometimes bugs me is choosing which fonts to use. I’ll typically throw together a list of fonts that I like, decide to use this set of serif fonts for these page elements, and that set of sans-serif fonts for those other elements, select some fallback choices for my stylesheet, and let it go at that. Obviously, I’m no designer — or I’d be saying ‘typeface’ instead of ‘font’ — but I’d like to be able to make ‘better’ choices for my fonts.

I’ve done a little bit of searching, but I haven’t found what I’m looking for. I’ve found plenty of font surveys of which fonts are commonly found on Windows vs Mac vs Linux. I’ve found lots of discussions about things that affect readability, like font size, line length and line height. But it’s all very general, I’m looking for something more practical.

What I’m looking for is a resource that has pre-made sets of font-family definitions. But not just font lists in isolation — a set of font choices for various page elements. These fonts for headers, those fonts for body text, these other fonts for sidebar items, etc. A sort of “font palette” for the web, not unlike many of the color palette utilities that are available. I’m looking for typography design patterns for the web.

Does anything close to that exist? Even if it’s not full sets of font palettes as I envision, if I just had a good set of pre-made, cross-platform font-family definitions, it would be a start. Sure, I could just find well-made web sites that I like and see what fonts they use, but I wouldn’t know if they planned out their font use, or if they picked them as haphazardly as I normally do. I want to find a resource that has documented some lists of font-family selections, with good, cross-platform fallback choices.

I think this is a darned good idea for a web site. If I had the time to work on it, I’d make it myself. It would have a mockup web page skeleton, with some headers, body text, lists, strong and emphasized text, blockquotes, etc., and a selection of font palettes that could be applied, to see how they look. You’d be able to download these palettes as CSS stylesheet rules.

You’d also be able to see how things look if the visitor doesn’t have this or that font installed. The font-family definitions would try to be very complete, with good choices made for Windows, Macintosh, and Linux browsers. Users would be able to add new palettes to the site, and everyone would vote on them. And it would be all Ajaxy and stuff, with glossy buttons, reflected graphics, round corners, and a “beta” label.

There, I’ve laid out the basic project plan. Now, somebody go build it! 🙂