Dougal Campbell's geek ramblings

WordPress, web development, and world domination.

Typography design patterns for the web

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! 🙂

About Dougal Campbell

Dougal is a web developer, and a "Developer Emeritus" for the WordPress platform. When he's not coding PHP, Perl, CSS, JavaScript, or whatnot, he spends time with his wife, three children, a dog, and a cat in their Atlanta area home.
This entry was posted in CSS, Design, Ideas, Web Design and tagged , , , , . Bookmark the permalink.

7 Responses to Typography design patterns for the web

  1. I’m interested in it, too. I’m also too lazy/incompetent to do it myself. 😉

  2. Pingback: Arcane Code The Great Font Hunt «

  3. Suze says:

    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!

  4. Libri says:

    Very good idea, it could be a web2.0 project with all the designers that can help adding their ideas about fonts.

  5. Motoryzacja says:

    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 🙂

  6. Superstar says:

    I too would enjoy like a simple set of font rules that I could implement as an over- all style guide for a page. I believe one could set this up in an external style sheet just reuse it over and over again. It would be nice however it there was some sort of GUI to it to see the styles and change on the fly.

  7. This is a wonderful idea. As a designer choosing a suitable font for a website is quite time consuming so this proposed pattern would be the key to generalize the fonts to use on websites.

Leave a Reply

%d bloggers like this: