Online Readability

You would think that a newspaper would know something about readability, but the Boston Globe is proving otherwise with their Web site. Their articles are set with long lines of text and very little space between each line. This makes the lines blur together as you try to read them. When you reach the end of one line, there are no visual cues to help your eye find the beginning of the next line.

Large amounts of text like articles need special attention to be made readable. This is especially true on a computer screen. Line length is an important factor. The more words on a line, the farther your eye has to travel back to the beginning, and the easier it is for your eye to end up on the wrong line.

Leading, the spacing between each line, is another important factor. When lines of text are close together, it appears as a single block of words, rather than lines. Adding blank space between each line can help break up the block and help your eye distinguish between the different lines. This makes it easier to read a line and will help guide the eye back to the beginning of the next line.

Short line lengths can be difficult to achieve on the Web unless you design your site specifically to keep your text in a narrow column. Constraining the width of your text on a site not designed to have short line lengths can make the page look awkward and break layouts.

But leading is easy to achieve on any site. All it needs is a small addition to your stylesheet. Adding line-height: 130%; to your paragraph styles will add 30% more space between each line. You’ll want to adjust the height percentage to meet your needs, but 130% is a good starting point.