No line of text should be more than about 650 pixels wide.
The reason that newspapers and magazines are printed in columns is to make the lines short, so after you read one line, it’s easy to find the start of next one. The page you’re reading now shows one approach to making line length manageable: put the text in a fixed-width table in the center of the page. Here’s an example of a bad page with no limits on line length, which makes the text hard to read.
You don’t have to make your pages fixed-width, though. You can make them fluid (they get bigger or smaller as the window is resized), but limit the width by using the CSS “max-width” property.
Don’t make your page too narrow or too wide.
As of 2011, 99% of users have screens that are at least 1024×768 pixels. Many designers make their pages work at sizes as small as 770 pixels wide so that they don’t offend the less than 1% of users with 800×600 screens, but that means thy’re giving 99% of their users a bad experience, because those 99% see tons of whitespace rather than actual page content.
On the other side, pages that go edge-to-edge are way too wide on big monitors like most people have these days. I suggest limiting the page content to 1200 pixels or less.
Use contrasting colors or simple backgrounds to make your text easy to read.
It’s hard to read light text on a light background, or dark text on a dark background. There are also some color combinations that don’t work. And if this tip is so obvious, then why did I run across this page today?
Also, it’s hard to read text on background images that have a wide mixture of light and dark; any background images should be simple and mostly dark or mostly light. You can improve readability of text on a background image by increasing the text size and/or making it bold.
You should almost never put text on an image or textured background. Unless you really know what you’re doing, such text is usually difficult or annoying to read — if not impossible.
Make the text large enough to read.
Don’t yell at me for stating the obvious, because it’s not obvious to everyone: Just today a webmaster referred me to his site which I had to squint to read. Don’t punish your visitors if you want them to actually read your content. With CSS rules, go for 12 or 13px Arial, and 11 or 12px Verdana.
Increase the line spacing (leading) to improve readability.
Putting some space after each line gives it some breathing room and makes it a lot easier to read. If you don’t specify the leading, you don’t get any — you get the default of cramped lines. I set this article to 160%, which you can see adds some attractive space between the lines and makes the text appear less daunting. But I kept this particular paragraph at the default, so you can see how it’s much less attractive and harder to read. Add spacing by using CSS commands. To set the leading for a table cell, use something like