This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
This is the blog of Adam Kalsey. Unusual depth and complexity. Rich, full body with a hint of nutty earthiness.
6 Oct 2003
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.
Excerpt: Thoughts on Adam Kalsey's online readibility article, with links.
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.
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/thedawnofanewwirelessexperience/
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…
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.
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?
The min-width CSS property can be used, but it isn’t well-supported by browsers. The property doesn’t work in IE.
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.
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.
You may want to address the large empty margin at the right end of your screen prior to criticizing some elses work!
Adam Kalsey
Mobile: 916.600.2497
Email: adam AT kalsey.com
AIM or Skype: akalsey
©1999-2008 Adam Kalsey.
Content management by Movable Type.
Adam Kalsey
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.