|
 |
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
  
|
|
|
|
|
