Search Usability Counts

UX Starter Guide

Follow Usability Counts

Subscribe Via Email -- Enter Email

Archive for September 2009

Silly Saturdays

Silly Saturdays: Cheese or Font?

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

cheeseorfont

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?

Similar Posts You Might Like


Usability

Typographic Design Patterns and Best Practices from the Best Blogs of Today

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.)

Similar Posts You Might Like


About Usability Counts

Patrick NeemanPatrick Neeman is a User Experience Strategist in San Francisco, CA. He has worked with MySpace, Realtor.com, Orbitz, eBay, and Stamps.com, but is most proud that the first site he designed professionally was a top 100 site: the Oliver North Home Page. He is a featured speaker about User Experience and Social Media, and is an instructor for the Online Marketing Institute. More about the site...