That Darned Content pg 2: Production Graphics with Wendy Peck at webreference.com

That Darned Content: Line Length is Critical to Legibility

I can't talk about text and design without bringing search engine optimization into the discussion. The way you present the text on your page can have a great effect on your search engine placements.

Shirley Kaiser, of WebsiteTips.com, has compiled an exceptional reference section about site design for search engine optimization.

Text is up first, of course. Although graphics probably take us more time to create than any other element on the page, when it comes to why the page exists in the first place, text is almost always the reason. Unless you are producing an art site, visitors will not be arriving unless they expect to read something.

In fact, do you remember why the Internet began? It was developed as a way to exchange information, and there are many who wish it was still as it was in the early days. I think many of the people who think the Internet is heading to ... well you know where in a handbasket, would not feel as strongly if information had more respect on the Web.

Even commerce sites are dependent on text. How can visitors decide whether to purchase an item if they do not know what they are buying? How can they decide to buy from a particular business if they cannot find the information about the company that is important to their purchasing decision? The answer is a simple one. They can't.

Providing information is important for products, for educating potential customers and for providing the extra value surfers demand (information and education is still expected). Although it is important to keep content crisp, to the point and concise, text is necessary, and will determine the success of your site. Let's look at a few of the most common errors found on the Web.

When you have too few words on a line it makes it very difficult to read. Your eye has a hard time getting into the rhythm of the text. In fact, if you must read long passages of text with short lines, it can feel like you are getting seasick.

Line Length Too Long or Short
We old print people tend to be a little bossy about this subject. There is an optimum line length for perfect legibility in print, approximately 10-12 words per line (font shape and size differences can require this rule to be adjusted). That will seem very restrictive, but pick up a few books and magazines and count. Special layouts with extra white space, or some fonts do allow the rules to be broken occasionally, but as a rule, you will not see much variation on this standard.

I haven't seen much on the Web that convinces me to break that pattern on the Web. Or try for it. OK, I see you counting. If you are using an 800 pixel wide display, and there is no ad at the right, the count will be pretty close to ideal. But, above that resolution, you have too many words (unless there is an ad at the right). If you are using 640 wide display and there is an ad, you are probably having a terrible time reading this.

That's the trouble with the Web. I still try to have between 10-15 words per line no matter what the resolution, but if you are working with varied page elements, it is impossible to control.

When you have too many words on a line it makes it very difficult to read. Your eye has a hard time focussing on the content for long enough to get to the end of the line, and it is really hard to find your way back to the beginning of the next line. The longer the passage of text without a break the harder it is to read.

Of course, you also end up with short paragraphs all on one line.

Short paragraphs look terrible. Not only is the line length hard to follow, the changing white space makes it hard to keep the reading rhythm.

The center and left columns are both set to percentage values, which allows both columns to share the change as resolution is increased or decreased.

Mobyz.com.

Keeping Lines at the Right Length
Those of you who know my work and/or writing, know that I am an avid supporter of liquid design, or pages that stretch and contract with page size. Now, I am telling you to keep line length under control, yet the most common way to keep pages liquid is to let the content columns stretch and contract, because text is much more malleable on a Web page than any other element.

The ugly truth is that there is not a one-size-fits-all answer to the line length problem when you can have your work displayed on so many resolutions. However, if you are aware that there is a potential problem, you can compensate as much as possible.

In the sample on the left, you can see the compromise I used for this site. The first sample is a screen shot of a 1024 pixel-wide display. Although you cannot count the words in this sample, you can see that the line length is certainly longer than the lower sample, taken of an 800 pixel-wide display. However, neither version wanders far from the ideal (about 9 for the 800 pixel sample and 12 for the 1024 pixel sample. For this site, the left column is fixed, but the center and right columns are both set to percentage values. As the page increases, both columns increase, which helps to make the display a little more consistent.

The next section looks at text size. The focus may surprise you.

Next page

That Darned Content: Tutorial Index

Hey, Wait! That's What It's all About
Line Length is Critical to Legibility
Bigger is Not Better for Text
Break Up Your Text
Creating Logical Areas for Text