TextPrefs Survey Report Part 4
Written by Jamie Freeman
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.
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.
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?
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.