TextPrefs Survey Report Part 4

User preferences for reading text on the web

Column width

The information a designer is interested in as regards column widths changes depending on the starting point. Say you have specified 14pt Arial for your website text; you now need to know the most readable column width for that type face/font size combination. (It's 450px by the way.)

So, there's not really any such thing as a single 'most readable' column width unless you also know the type face and font size used.

The following data and accompanying graphs show the preferred column widths for each type face and font size.

Arial:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: 600px
  • 10pt: no preferences
  • 11pt: no preferences
  • 12pt: 650px
  • 13pt: 500px
  • 14pt: 450px
  • 15pt: 500px
  • 16pt: 600px
  • 17pt: 450px
  • 18pt: 400px
  • 19pt: 400px
  • 20pt: 350px
  • 21pt: 750px
  • 22pt: 250px

Looks like an anomolous lump at the 21pt mark, which can probably be ignored.

Helvetica:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 500px
  • 11pt: 750px
  • 12pt: 450px
  • 13pt: 500px
  • 14pt: 650px
  • 15pt: 600px
  • 16pt: 750px
  • 17pt: 600px
  • 18pt: 550px
  • 19pt: 750px
  • 20pt: 400px
  • 21pt: 550px
  • 22pt: 600px

Lucida:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: 750px
  • 10pt: 750px
  • 11pt: 600px
  • 12pt: 600px
  • 13pt: 550px
  • 14pt: 600px
  • 15pt: 550px
  • 16pt: 550px
  • 17pt: 600px
  • 18pt: 550px
  • 19pt: no preferences
  • 20pt: no preferences
  • 21pt: no preferences
  • 22pt: 400px

Trebuchet:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: no preferences
  • 11pt: no preferences
  • 12pt: 600px
  • 13pt: 600px
  • 14pt: 650px
  • 15pt: 600px
  • 16pt: no preferences
  • 17pt: 400px
  • 18pt: 450px
  • 19pt: 600px
  • 20pt: 450px
  • 21pt: 600px
  • 22pt: 550px

Verdana:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: 550px
  • 11pt: 700px
  • 12pt: 600px
  • 13pt: 600px
  • 14pt: 550px
  • 15pt: 550px
  • 16pt: 550px
  • 17pt: 550px
  • 18pt: 750px
  • 19pt: 400px
  • 20pt: no preferences
  • 21pt: 600px
  • 22pt: 500px

Times:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: no preferences
  • 11pt: 750px
  • 12pt: 450px
  • 13pt: 600px
  • 14pt: 450px
  • 15pt: 600px
  • 16pt: 600px
  • 17pt: 500px
  • 18pt: 500px
  • 19pt: 750px
  • 20pt: 550px
  • 21pt: 550px
  • 22pt: 600px

Georgia:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: no preferences
  • 11pt: 700px
  • 12pt: 450px
  • 13pt: 550px
  • 14pt: 550px
  • 15pt: 550px
  • 16pt: 600px
  • 17pt: 750px
  • 18pt: no preferences
  • 19pt: 450px
  • 20pt: 450px
  • 21pt: 600px
  • 22pt: no preferences

Courier:

Preferred Column Width per Font Size

  • 8pt: no preferences
  • 9pt: no preferences
  • 10pt: no preferences
  • 11pt: no preferences
  • 12pt: 600px
  • 13pt: no preferences
  • 14pt: no preferences
  • 15pt: no preferences
  • 16pt: no preferences
  • 17pt: 550px
  • 18pt: 650px
  • 19pt: no preferences
  • 20pt: no preferences
  • 21pt: no preferences
  • 22pt: no preferences

(Basically, Courier is not terrifically popular at any column width!)

Summarising the column widths

Reviewing the figures above, when cross-referenced with the 'readable zone' for font sizes, it is possible to draw some overall conclusions regarding column width. As a rule of thumb therefore, you could see the 'readable zone' for column widths as between 450px to 675px, depending on the font and size used.

It certainly feeds nicely into the conversations and techniques regarding flexible layouts; designers can use those figures (the type face-specific figures) to set maximum and minimum column widths beyond which a column of text won't stretch, rather than arbitrary figures based on other design considerations.

Tomorrow, in our final instalment, we talk about line heights and present the easy-to-remember Readable Zone summary.

Photograph of Jamie Freeman

Written by Jamie Freeman

13th May 2010 11:01am

TextPrefs Survey Report:

textprefs.com

Comments

Thanks again for sharing. A few things to point out:

- When doing a semi-flexible layout using min-width and max-width, one option is to use EM units for the widths. For instance, `max-width:40em`. This means that when increasing the page's font size OR zooming, the column's width will grow larger but the number of signs per line will stay the same (or won't change much).

- It's interesting to see that there is no direct correlation between preferred font size and preferred column width. So the technique described above (or the full-page zoom of modern browsers) is not a perfect solution; as users tend to like a given column width, but prefer a wider array of font-sizes, this means that the preferred number of signs (letters) per line tends to vary a lot between users. I had read that there is some kind of “ideal” number of signs per line, but it seems that this parameter (which you did not test directly) might be less important than the column width itself. This could be related to the “comfortable scan angle of the human eye” you referred to in the introduction.

- I suspect language may be a factor here. The preferred number of signs per line may change a lot between English, German and Japanese readers.

Hmm, i have a 300 page book on website readability waiting on my desk right now. Maybe i should just dive in. :)
(For the record, it’s “Lisibilité des sites web” published by Eyrolles; in French.)

By Florent V., 13th May 2010 03:28pm

I think the most interesting part regarding the column width is that it is so little correlated with the font size, as Florent mentioned. I would actually have expected the preferred column width to increase with larger font size, to keep the number of characters per line more steady. This does not seem to be the case, though..

Jamie, could you say something about the sample sizes?

By Mads, 13th May 2010 04:16pm

Wow, long comments… that's almost an article in it's own right!

This report isn't really about which techniques to apply, but I think that it adds grist to the mill for designers. As for characters per line, that is a function of the font size to column width ratio; I agree some work on that could have been useful.

Mads; regarding your expectation for column widths to increase with font size I would have imagined a more obvious correlation too, but I guess that does relate somewhat to the comfortable scan angle issue. Probably deserves further investigation. By someone else ;-)

As for sample sizes, I don't have the figures to hand but from memory there were well over 6,000 respondents.

By Jamie Freeman
14th May 2010 08:20am

Post a comment