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.
The Study
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?
Column width: 500 pixels.
23 comments on “What’s the Best Column Width for Websites?”
just visitied cnn, they have much wider widths.
Thank you so much for sharing your knowledge with everyone.
Fantastic! I’ve always been a bit concerned when designing my websites about the width of my columns.
HI,
So, I’m wondering about the ‘column’ width for a typical site with a ‘sales letter’ on it (a mini-site)
More and more today I’m seeing column widths in web designs going away from the typical ‘mini-site’ of 650 pixels, to 1000 pixels and larger type.
Any testing been done there?
No idea. That style could be based on calculative testing. Or it could simply be that one influential site starting making things a certain way, so then everyone else played copycat, thinking that the influential site knew what they were doing.
Whatever the case is, those sites you’re talking about generally aren’t great to look at because they look like Word documents. And because their styles are so identical, it makes it easy for people who have seen enough of them to recognize a sales page, and just immediately leave.
I will say one thing though: those sales pages (landing page, squeeze, whatever) are on the right track: if you have a clear goal, you don’t want to send people to your homepage where you might lose them or they might get distracted by your menu — you send them straight to the selling page, which is designed 100% to sell, no distractions.
Shouldn’t something be said about while having an included picture slider at the leader of your column? I’m playing with section sizes and experiencing issues.Thanks for sharing such wonderful article with us
Good stuff!
Thank you for the well laid out article. I’m currently running 650 and it seems to be a bit too wide. The examples you used illustrated your point well. I’ll probably tone it down to about 600 or slightly less.
Ryan,
Well, no need to be too nit-picky with pixels. This is why: pixels on a computer screen are always relative to the screen resolution. For example, a legally blind person who has 300% zoom on their computers might find 600 pixels to fill up their entire screen width. The main thing to take away from this would be to consider your user’s experience, whether it has to do with column width, fonts faces, font sizes, line spacing, or whatever. Thanks for commenting!
Great article!
I cherished your analogy with theater movie. The case study of giant sites like Google, CNN is as well fantastic and makes your point undisputable and factual. No wonder most business websites and blogs optimize their content with this column width.
Thanks for sharing
Thanks Ace. I wish that it would be more obvious for everyone that regularly publishes content on their website. I also wish the designers of movie theaters would remove those first several rows… or at least make the seats recline. Sigh…
-RON
I remember reading the same discussion at socialtriggers a couple of months back.. Narrow enough to be easy to read. It really is straining to read an article on a wide column.
Most of the sites I’m working now has 550px content column and 14 or 16px font.
Thanks Ron for this helpful info. Do I need to be writing my content with this in mind or is it just a matter of instructing my website person to follow this recommendation when he posts my content?
p.s. I tried to enter my website URL but I kept getting a pop asking for it even though it was there.
Hey Angelina,
If you write a lot of articles, you might want to ask your web person to modify your content template file so that your paragraphs don’t span the entire width of your website. Or they could try and increase the font size. Or a mix of both.
I didn’t I mention this in my article, but there’s another study out there that suggested that people read faster with wider columns, but it was at the expense of reading comprehension. And of course, with narrower columns, reading speed went down, but people understood it better.
Oh, and thanks for the heads up about that URL blunder. It’s some url-verifier-logic… I posted a hint on that field just now. Thanks.
-RON
The idea was that column widths above 400 and below 600 are optimal for reading speed. Column widths below 400 make the reader read each word more carefully.
Some bloggers put this in application by adding a small image next to the first few lines of text. This way these are more carefully read and compell the reader to read everything.
That’s the theory behind it.
really useful information thank you
Thanks for sharing, I’m a novice learning to create art on computor. thanks again
This is EXACTLY what I needed to read.
I’m still seeing so many print-media designers who hop over to the web do this. They get the text size too small. (not realising your screen is mostly three times further away from you than a voucher) And the width of the text span is oh-so-horrendously wide.
960px is just a murder to the eye. Having to do research on such a site would leave you with sore eye muscles the next morning. No doubt about it.
One more point I would like to adress, in line with this post. More so in line with print-media designers hopping over to the web.
Contrast! Come on people, don’t put grey text on a grey background.
I liked the post. Also like the website, it’s minimalistic and simple.
Fancy graphics are nice, user experience is awesome!
Cya,
Ori.
Thanks for sharing your thoughts, Ori. I would assume most folks dealing with print media would already know this stuff, but I guess it just isn’t as obvious for some people. Sigh :-\.
I like your movie theater analogy. Makes total sense when applied to reading websites and blogs.I will share this information with my readers — thanks.
Laura, I like the analogy too. I thought of it because I watched Titanic sitting in the VERY FRONT ROW of the movie theater. That experience made me nauseous and ruined a great movie for me. Thanks for commenting!
Thanks for that. Great info! You answered exactly the questions I had.
You’re very welcome. I wish all web designers could read my article; I’m so tired of reading sites with 12px font and lines that span 960px!!!