Online Readability

Freshness Warning
This blog post is over 18 years old. It's possible that the information you read below isn't current and the links no longer work.

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.

This discussion has been closed.

Recently Written

The Trap of The Sales-Led Product (Dec 10)
It’s not a winning way to build a product company.
The Hidden Cost of Custom Customer Features (Dec 7)
One-off features will cost you more than you think and make your customers unhappy.
Domain expertise in Product Management (Nov 16)
When you're hiring software product managers, hire for product management skills. Looking for domain experts will reduce the pool of people you can hire and might just be worse for your product.
Strategy Means Saying No (Oct 27)
An oft-overlooked aspect of strategy is to define what you are not doing. There are lots of adjacent problems you can attack. Strategy means defining which ones you will ignore.
Understanding vision, strategy, and execution (Oct 24)
Vision is what you're trying to do. Strategy is broad strokes on how you'll get there. Execution is the tasks you complete to complete the strategy.
How to advance your Product Market Fit KPI (Oct 21)
Finding the gaps in your product that will unlock the next round of growth.
Developer Relations as Developer Success (Oct 19)
Outreach, marketing, and developer evangelism are a part of Developer Relations. But the companies that are most successful with developers spend most of their time on something else.
Developer Experience Principle 6: Easy to Maintain (Oct 17)
Keeping your product Easy to Maintain will improve the lives of your team and your customers. It will help keep your docs up to date. Your SDKs and APIs will be released in sync. Your tooling and overall experience will shine.

Older...

What I'm Reading

Contact

Adam Kalsey

+1 916 600 2497

Resume

Public Key

© 1999-2021 Adam Kalsey.