-
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.
- 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.
-
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.
-
Wrong font choices1, 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.
- 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:
- 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.”
- 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?