Online Readability

Freshness Warning
This article is over 15 years old. It's possible that the information you read below isn't current.

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.

Scrivs
October 6, 2003 2:23 PM

Not trying to be a smartass or anything, but I use 1600x1200 on my comp and your line-lengths are almost twice as long as the Boston Globes. There lack of a decent line-height does make reading their content a pain in the ass and it definitely helps your long content. There is a fine line to tow between which is better liquid or fixed and I am not trying to get into it because to me it's all relative to the user anyways.

Trackback from andlife's Plog
October 6, 2003 9:07 PM

Optimal line lengths?

Excerpt: Thoughts on Adam Kalsey's online readibility article, with links.

Adam Kalsey
October 6, 2003 9:16 PM

Scrivs -- Sure, my line lengths aren't constrained. But they are set in such a way that under the last majority of Web browsers, they are an acceptable 10-15 word length. And those with larger browser windows are likely to know how to change their browser size. It comes down to knowing your audience. My audience is familiar with computers and will know how to change things if the page is hard to read. My chief complaint about the Globe is that their combination of long lines and narrow spacing makes it particularly difficult to read. And the fact that they use a static layout means that I can't shorten line length if I want to.

Dunstan
October 7, 2003 1:38 AM

I just opened multiple tabs in Firebird and was going through each one seeing what was what. The site before yours was this article: http://www.boston.com/business/technology/articles/2003/10/06/the_dawn_of_a_new_wireless_experience/ I took one look at it and wrote an email to the chap to say "Too much text. Lines too long. More subheads please." Then closed the window and read this post. Coincidence...

Scrivs
October 7, 2003 11:45 AM

You are right in the fact that your audience should know how to handle long line-lengths, but do you have a solution for people with large resolutions (16x12 and up) who do not want to change the browser window size. I only ask this because I myself am looking for the holy grail of liquid readability and on my site the best I could do was use percentages for everything from divs to font-size.

Jason Mevius
October 7, 2003 3:13 PM

Personally, whenever I'm reading weblogs, I like to resize the text window so that only the content shows. This is easily accomplished if the site I'm reading has set a static width for the column of text -- not a standard. I'm trying to create a two-column css layout with headers and footers. I've defined a pixel-width value for the width of the sidebar. I would like the main column to fill the rest of the area, but never shrink below 500px in width. Is this possible? I've put up a test page showing the desired effect at: http://the.jasonmevius.com/test.html Any ideas?

Adam Kalsey
October 7, 2003 3:32 PM

The min-width CSS property can be used, but it isn't well-supported by browsers. The property doesn't work in IE.

Chris Vance
October 7, 2003 8:44 PM

A hack to make the minimum width for the main column never fall below 500px would be to use a 500px-wide spacer image in that column. That's a kludgy hack, to be sure, but if everything else (ie. more elegant solutions) fails, it may do the trick.

Jason Mevius
October 8, 2003 7:46 AM

Adding a 500px spacer image will hold the column width, but doesn't do anything to keep the text readable. The text column background stays as desired, but the sidebar eventually overlaps all of the content, eventually forcing it to one word per line.

none of your business
December 12, 2003 6:11 PM

You may want to address the large empty margin at the right end of your screen prior to criticizing some elses work!

Adam Kalsey
December 12, 2003 6:15 PM

Uhhh.... Which one would that be?

Susan
June 3, 2009 10:11 AM

Readability can also be significantly improved with the use of double spaces between sentances. This technique makes it easier for the reader because it more clearly provides a pause between thoughts. That is why it used to be a standard taught to typists. It's disappointing that this is the 3rd website I've visited on readability and none of them have used or espouse this technique.

Adam Kalsey
June 3, 2009 10:26 AM

You mean like the line where I say, "Adding blank space between each line can help break up the block and help your eye distinguish between the different lines." And then I give a specific technique to accomplish this. Increased [leading](http://en.wikipedia.org/wiki/Leading) is the way to handle this. Double spacing (100% leading) is generally not desirable for typography -- it can make it hard for the eye to find the next line when you travel back to the beginning.

Barbara
September 5, 2009 8:56 PM

I believe that Susan is talking about the difference between one space following a period. And two spaces following a period. See the difference? A double space at the end of each sentence. It makes it clearer that "this complete thought is done, and now I'm moving on to another one."

Adam Kalsey
September 5, 2009 9:19 PM

Ah, yes, you're probably right. Now that I re-read it, that's exactly what she was suggesting. Two spaces after a period was taught to typists because it made the monospaced typeface that a typewriter creates easier to read. When wide characters like "W" and narrow ones like "l" take up the same amount of space, text doesn't flow well. So a double space was taught in order to break up the cadence. Typeset text, which is proportionally spaced, has always been set with a single space following a sentence. proportionate typefaces simply don't benefit from double spacing. On the web and in just about any other digital document, proportional fonts are used, making every doc look like it was typeset. Double spacing was taught to people specifically to overcome the limitations of the tools they were using. Now that we don't use those tools any longer, the technique isn't needed either.

Your comments:

Text only, no HTML. URLs will automatically be converted to links. Your email address is required, but it will not be displayed on the site.

Name:

Not your company or your SEO link. Comments without a real name will be deleted as spam.

Email: (not displayed)

If you don't feel comfortable giving me your real email address, don't expect me to feel comfortable publishing your comment.

Website (optional):

Follow me on Twitter

Best Of

  • How not to apply for a job Applying for a job isn't that hard, but it does take some minimal effort and common sense.
  • Movie marketing on a budget Mark Cuban's looking for more cost effective ways to market movies.
  • California State Fair The California State Fair lets you buy tickets in advance from their Web site. That's good. But the site is a horror house of usability problems.
  • Customer reference questions. Sample questions to ask customer references when choosing a software vendor.
  • Comment Spam Manifesto Spammers are hereby put on notice. Your comments are not welcome. If the purpose behind your comment is to advertise yourself, your Web site, or a product that you are affiliated with, that comment is spam and will not be tolerated. We will hit you where it hurts by attacking your source of income.
  • More of the best »

Recently Read

Get More

Subscribe | Archives

Recently

Assumptions and project planning (Feb 18)
When your assumptions change, it's reasonable that your project plans and needs change as well. But too many managers are afraid to go back and re-work a plan that they've already agreed to.
Feature voting is harmful to your product (Feb 7)
There's a lot of problems with using feature voting to drive your product.
Encouraging 1:1s from other managers in your organization (Jan 4)
If you’re managing other managers, encourage them to hold their own 1:1s. It’s such an important tool for managing and leading that everyone needs to be holding them.
One on One Meetings - a collection of posts about 1:1s (Jan 2)
A collection of all my writing on 1:1s
Are 1:1s confidential? (Jan 2)
Is the discussion that occurs in a 1:1 confidential, even if no agreed in the meeting to keep it so?
Skip-level 1:1s are your hidden superpower (Jan 1)
Holding 1:1s with peers and with people far below you on the reporting chain will open your eyes up to what’s really going on in your business.
Do you need a 1:1 if you’re regularly communicating with your team? (Dec 28)
You’re simply not having deep meaningful conversation about the process of work in hallway conversations or in your chat apps.
What agenda items should a manager bring to a 1:1? (Dec 23)
At least 80% of a 1:1 agenda should be driven by your report, but if you also to use this time to work on things with them, then you’ll have better meetings.

Subscribe to this site's feed.

Contact

Adam Kalsey

Mobile: 916.600.2497

Email: adam AT kalsey.com

Twitter, etc: akalsey

Resume

PGP Key

©1999-2019 Adam Kalsey.