As a follow up to my previous post about typography, I’d like to share a fun game called “Cheese or Font?”

The concept is pretty simple: the site presents you with a word and you have to decide if it’s a cheese or a font. Pretty brilliant and hilarious, if you ask me.

See the less PC, but just as fun(ny): Steakhouse or Gay Bar?

One of my favorite topics is typography and even though there’s a somewhat limited set of options in CSS, typography can still vary tremendously using pure CSS syntax.

Smashing Magazine conducted a detailed survey of 50 popular websites to see answer questions like Serif or sans-serif? Large or small font? Light or dark background? and more.

Though the findings aren’t scientific, the study shows a clear set of common practices and guidelines for setting type in Web design. Granted, these points should serve only as rough guidelines (not hard and fast rules):

1. Either serif or sans-serif fonts are fine for body copy and headings, but sans-serif fonts are still more popular for both.
2. Common choices for headlines are Georgia, Arial and Helvetica.
3. Common choices for body copy are Georgia, Arial, Verdana and Lucida Grande.
4. The most popular font size for headings is a range between 18 and 29 pixels.
5. The most popular font size for body copy is a range between 12 and 14 pixels.
6. Header font size ÷ Body copy font size = 1.96.
7. Line height (pixels) ÷ body copy font size (pixels) = 1.48.
8. Line length (pixels) ÷ line height (pixels) = 27.8.
9. Space between paragraphs (pixels) ÷ line height (pixels) = 0.754.
10. The optimal number of characters per line is between 55 and 75, but between 75 and 85 characters per line is more popular,
11. Body text is left-aligned, image replacement is rarely used and links are either underlined or highlighted with bold or color.

Of course, every website is unique, and few people want their sites to look like everyone else’s sites. But it’s always great to keep in mind that following these guidelines could make your website feel more familiar to your readers. (If you are a data and spreadsheet nerd like I am, check out the spreadsheet of the study and export its data for further analysis.)

I’m kind of conflicted about Open Source, but at least for fonts The League Of Movable Type has a cool website. Maybe for true typography on the web, they can advance the cause.

Their manifesto:

We are Caroline and Micah, the founders of The League. As designers on the web, we have a calling to raise the standards of the web-design world. We’re not the only ones who value good design, and it’s time for the web world to catch up with it. We understand the challenges that comes with the internet, but with our recent discovery of @font-face, we started getting excited. For those who aren’t up to speed, @font-face is a fairly new addition to web styling, letting a designer specify the location of their own font files. Instead of having to design with just a handful of web-friendly fonts, we’ll be able to use any typeface we desire. Well, that’s our vision, anyway.

I have this love affair with Helvetica (note, I said Helvetica, not that bastard child, Arial) and other really clean type styles. It’s one of the reason I’m kind of futzing with this site on a semi-regular basis — I’m trying to get that perfect look typographically, and it will always be a work in progress.

Along those same lines, Samantha Warren has a great blog post where she talks about the shift of the web to clean, international typographic style, which basically emphasizes simple geometrics and focuses on minimalism. They point to iA Japan as an example of gorgeous design. I agree. iA Japan has another great read about typography, how the web is 95 percent tyopgraphy. Agreed there too.

I’m a print guy, and I’ve always felt that typography, because of the limited nature of what you could use, was actually harder and more valuable on the web. One of the favorite blogs, i love typography, agrees, and they published a great entry of some examples of effective web typography and design.