How to Make Your Web Pages Easier To Read

So you know some HTML, or you're a big faker who uses Dreamweaver, and you want to make your Web pages easier to read. An admirable goal. Well, you can wade through all the 9,000,000 tips offered by Jakob Nielsen, or you can take a crash course from me. Here are some quick and easy tips that will improve the usability and legibility of your pages immensely.

Limit your content width

You know how newspapers and magazines don't print lines of text going all the way across the page? Instead, they split the content up into columns. Well, there's a reason for this: the human eye has trouble following long lines of text; the eye tends to wander up and down to neighboring lines. Shorter lines are easier to read.

Left untouched, Web content will fill all the available width. Instead, constrain the width of your content, like I've done on this page. Better still, use a width of 600 pixels or less (CNN and the BBC use about 450.)

This can be as simple as

<div style="width:600px">
My page content
</div>

Pick a legible font

Use a sans-serif font, ideally Verdana. Verdana was specifically designed for maximum legibility on a monitor. (For paper, a serif font like Times is preferable, but with pixelated displays you don't want all those serifs.)

However, note that the default font size is 12pt, and 12pt Verdana might be bigger than you want. (12pt Verdana looks a lot bigger than 12pt Times does.) So consider setting the font to 11pt or even to 10pt instead.

However, don't go smaller than 10pt, except maybe for things like footer links or other ancillary elements. Main content should not be in the tiny little fonts that so many bloggers seem to prefer. We are not a nation of squinters. Stop it already. Teeny little fonts do not make you cool. Even an 8pt font is too small. Stick with 10pt.

And you should never use Comic Sans MS. It's not "cute". It's stupid, and it's hard to read, because it has lots of diagonal lines that create jagged edges on a monitor. Also, it's a Windows-only font.

Use high-contrast colors

Color is a fine thing; it helps make the Web more interesting than just generic black-text-on-white. However, pay attention to contrast. You should use a very bright color on a very dark background, or vice versa. White text on black is fine, but see how much harder this is to read?

Use the goddamn Shift and comma keys

lazily writing long passages in all-lowercase ala e.e.cummings is tiring. capital letters help inform the eye of the beginning of a new sentence. when it's all in lowercase it's harder to tell where one sentence ends and another begins. the eye often skips past the period before it realizes it's reached a new sentence.

also you should use the comma okay? listen the comma helps break up the sentence into smaller chunks so that the eye can process it which makes it easier to read and keeps you from writing big long run-ons which are a real tiring grind.

Yes, I know, "it's not a school paper or a business proposal. It's just my little homepage/blog!" But listen to that English teacher in your head, and use proper punctuation and grammar. It's not just the King's English; it's also easier to read.