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! 
Related posts:
- Patterns in Web Design
" 37signals has yet another excellent article out. This one is called An Introduction to Using Patterns in Web Design. Some of it might seem..." - FontLeech: The Free Font Blog
" Since I occassionally dabble with graphics and web design, I tend to collect fonts. But I’m just a hobbiest, not a professional designer, so..." - Zen of CSS Design
" The Zen of CSS Design Congrats to Dave Shea, whose CSS Zen Garden web site has demonstrated the benefits of CSS-based design so much..." - design.Principles redesigns
" design.Principles is sporting a new look. The front page has a three-column layout, while individual articles are two-column. The category and archive listings are..." - New Gunters Design
"I’ve recently done a redesign of the Gunters website. It doesn’t degrade as well as I’d like for older browsers (i.e. Netscape 4) — but..."
4 Comments
I’m interested in it, too. I’m also too lazy/incompetent to do it myself.
This sounds like an excellent project for CB! She’s very detail-oriented, has a great deal of experience in cross-browser compatibility and probably already just *knows* by heart which fonts go well together and in which respective sections of a web page. Unfortunately, she has about as much copious spare time as the rest of us, so I don’t think she could get to it anytime soon.
However, if you’re out there Cyncha, keep this in mind for future reference – I know you could make this work!
Very good idea, it could be a web2.0 project with all the designers that can help adding their ideas about fonts.
Hmm.. I think it is good idea. Basic fonts was allways a hughe problem for me. So.. who will do this ? I’m not lazy but a have my own work and a lot of stuff to do
One Trackback
[...] arcanecode My brother in law, Dougal has an interesting post about typefaces for webpages. ( http://dougal.gunters.org/blog/2007/07/05/typography-design-patterns-for-the-web ). You may have seen color charts for web page design, where it lists a primary color and other [...]