Displaying Text on the Web: Are Narrow Columns Better?

We recently conducted a study to address these questions by measuring the readability of text presented in different column widths.  (See Figure 1.)  Most of the previous research in this area was done using printed material, and it’s not clear how it applies to the online presentation of text. 

 
200 pixels. Click the image above to open a full-size sample of this column width. 

 
400 pixels. Click the image above to open a full-size sample of this column width. 

 
640 pixels. Click the image above to open a full-size sample of this column width. 

 
1280 pixels. Click the image above to open a full-size sample of this column width. 

Figure 1.  Samples of the different text widths used in the study, including the smallest (200 pixels) and the largest (1280 pixels).  Here, text is displayed in Times New Roman. 

We also examined the performance of Microsoft’s new Verdana font.  (See Figure 2.)  This large, sans serif font was designed specifically for use on the web. We wanted to compare it to the current default font used on the web, Times New Roman.  Since we had previously studied the effects on readability of various font sizes, we kept size constant in this study.  (See “All About Fonts” in the Q1, 1997 issue of Usable Bits.)

  
Figure 2.  Samples of Times New Roman (12 pt) on the left and Verdana (10 pt) on the right.  Note that even at 10 pt, Verdana is wider than 12 pt Times New Roman.  (See sidebar.) 

Methodology

A 21” monitor running in 1280 x 1024 resolution was used to displaytext passages in varying widths: 200, 400, 640, 800, 1024, and 1280 pixels.

Note: The numbers are the width of the windows used to display the text; the actual text width was a bit smaller.

One to six randomly selected typographical errors were inserted throughout the text.  The text was shown in either Times New Roman (12 pt) or Verdana (10 pt) and was presented in each width in a random order so that each condition was tested twice over a total of 48 trials.  Since the Verdana font is significantly larger by design, it was necessary to use a smaller point size of Verdana so that both fonts occupied similar amounts of space.  (See sidebar.)

Two text passages were used for the study:  a long passage which required some vertical scrolling for every screen width, and a short passage which required no scrolling in any of the conditions. The participants were asked to use the arrow keys for scrolling instead of using the mouse.

Fifteen Fidelity employees participated in the study for about 1 hour each.  Participants were first given a paper version of both text passages and were instructed to read through it in order to familiarize themselves with the words and their correct spelling.  As the participants then read the text online, they indicated each typographical error they saw by striking the Esc key on the keyboard.

The amount of time it took the participant to read the passage was recorded, along with whether or not the participant accurately identified the number of errors in the passage.  After the participants finished reading all of the passages, they were asked to give subjective preference ratings to each window width, for each font.  They rated each presentation on a scale of 1 to 4, with 1 meaning “Poor” and 4 meaning “Excellent.”

When analyzing the data, three measures were used:  reading speed (words per minute), accuracy, and subjective preference rating.  In order to combine the different measures, z-score transformations were done and equal weight was given to each factor.  (Z-score transformations are a statistical method of converting different units of measurement so they can be analyzed on the same scale.)

Results

Only the subjective preferences showed a significant effect of text width, as shown in Figure 3.  There were no significant differences between the Times and Verdana fonts. The most preferred screen width was 640 pixels, with 400 being the second most preferred.   The 1024 and 1280 widths were rated the poorest.

 
Figure 3.  Subjective preference ratings of the readability of text passages presented in either Times or Verdana font and at various window/text widths.  Higher ratings are better.  Window/text widths of 400 and 640 pixels were preferred.

The window/text width or font (Times vs. Verdana) had no effect on either the speed or accuracy data.  Figure 4 shows the z-score transformations of all three measures (preference, speed, and accuracy) as a function of window/text width.  You can see that the speed and accuracy lines are practically flat, indicating no real effect.

  
Figure 4.  Z-score transformations of the preference, speed, and accuracy data.  Higher values are better.  The window/text width or font (Times vs. Verdana) had no effect on speed or accuracy. 

Conclusions

• Text width appears to have no effect on reading speed or accuracy for the range of widths we studied (200 to 1280 pixels).
• Users expressed clear preferences for reading text in widths of 400 and 640 pixels.
• For the sizes we studied, there was no significant advantage of Microsoft’s new Verdana font over the default font on the web, Times New Roman.  However, note that Verdana is a larger font.  (See sidebar.)  At the same point sizes, Verdana may have a readability advantage over Times since Verdana is significantly larger.

Why are fonts not necessarily the same size, even though they have the same point size?

Even though two fonts may be of the same point size, one font may take up more space than another font.  For example, look at the following close-up of the word “Test.”   The word

You can see that the widths of the individual letters can differ.  Therefore, the same word may require more space in one font than in another.