The Top 5 web typography mistakes

1. Tiny Text – Easily the most ubiquitous and painful problem. Fortunately good browsers let you resize text with shortcuts like "CTRL+". Firefox has an excellent extension called NoSquint that will remember your text zoom settings per website.

   

2. Too much or too little text/background contrast – Even a beautifully designed site can snatch defeat from the jaws of victory with gray text on white, and white on dark is just painful.

3. Not enough margins or leading – There's a reason words don't touch the edge of the page in books. Let your paragraphs, headings, and sidebars breathe. If you think you're using a bit too much whitespace, it's probably just right.

   Leading is another term for "line spacing". Again, for the web, just a tad too much (~140% line-height) is probably perfect.

4. Wrong font choices¹, or too many fonts at once – Don't use more than two typefaces (one for headlines and one for everything else). Also, don't use too many font sizes, colors, or treatments per page. I usually use a big headline font, a smaller subhead font, the same size for all body copy, then a smaller "footnote" treatment. It doesn't really matter if you use serif or san-serif faces, just stay away from fixed-width faces like Courier or fonts that are hard to read onscreen.

   Since you never know what fonts a user has installed, specify fonts with CSS like so:
   font-family: "Lucida Grande", "Corbel", "Lucida Sans Unicode", sans-serif;

   In other words: 1) Mac OSX, 2) Windows Vista, 3) Older Windows, 4) Catch-all.

5. Super wide content – Your body copy should be ~60 characters wide including spaces.

For many more tips see Clagnut's wonderful guide The Elements of Typographic Style Applied to the Web.

Footnotes:

1. Font selection is a topic for another day, but rather than let another site go live with Arial (or God forbid, Comic Sans), let me say right now: "Don't use Arial for body copy, and if you unironically use Comic Sans the ghost of Johannes Gutenberg will be all up in your shizzle."
2. Yes, this blog template doesn't quite measure up. It feels weird living in someone else's template so I've decided to build a free legibility focused Wordpress template. There are several other developers doing this too, but what fun would software be if we didn't reinvent the wheel from time to time?