What column width should you be making for your website content? Do people think bigger is better? Or do they like it short and sweet? Well, you’re in for a treat, because someone actually spent the time to research this topic and the answer will amaze you.
How Physical Text Layout Affects Reading From Screen is a research paper written by Mary Dyson (source). In that paper, she looks at how column width affects reading.
Her findings? People read wider columns faster, but have better comprehension with narrower columns. Columns that are too wide reduce reading comprehension because of the long line breaks, while columns that are too narrow are difficult to read because of too-frequent line breaks. Because of the way we read words in clumps, a line with 55 characters was shown to be easiest to read.
So how short should your columns be? 450 to 550 pixels seems to be the best range. So unless you’re a challenging your website visitors to a speed-reading contest, you should definitely make your columns in this range.
Movie theater analogy
Here’s an analogy, because I love ’em:
Have you ever noticed that nobody likes to sit in the front section of movie theaters? Why is that? Why do the front row seats always fill in last?
No one sits in the front of the movie theater because of limited vision. If you’re walking into a movie late and sit in the front, to ensure that you see everything on the screen, you need to constantly rotate your head left and right. This is an absolute pain when you’re watching a scary movie, because there’s always stuff popping out of every side of the screen!
Reading content online is the same: you can read the best when your focus remains in one narrow area of your computer monitor. When the column width is too wide, you start rotating your head or your eyes left and right. Don’t you hate it when you have to do that?
Big companies already know what the best column width is.
In web design, one thing that you can usually trust is that big companies will always have efficient methods (Bing, for example, spent a lot of money researching to find a shade of blue that was worth $80 million). Big companies spend a lot of money to research and develop their websites to ensure maximum sales, conversions, and reader legibility. Take a look at some of these examples:
CNN.com is hands-down, one of the most legible news sites out there. They force their column width to be small and then fill in the space on the left of the column with an article summary, links to photos, and links to videos.
Column width : 440 pixels.
SBnation.com is the prettiest sports website out there. Although I still use Yahoo Sports for news during football season, SBnation.com still has the best layout. Although the width is a bit wider than CNN.com’s width, they make up for it by using 16pt font.
Column width : 611 pixels.
Heck, even Google.com‘s search results have short columns! And you trust that Google know what they’re doing, right?