Page widths and font sizes in web pages

On this page: Many web designers believe that pages should be limited in width, to around 600 pixels. This is intended to make them easier to read. In this article, Lois Wakeman argues the case for letting the readers choose their own page width.

I wrote this article as a result of some of my site design activities, and also because of a discussion in the now defunct INETPUB forum on CompuServe. The discussion here is based on two commonly-accepted principles for good page design, which I think contradict each other:

  1. Accepted wisdom has it that a comfortable reading length for lines of text is about 60 characters. This is, I believe, based on research into the eye movements of readers. So, we are advised to limit the line length on our pages to approximate to this.
  2. For accessibility reasons, we are advised to design our pages such that readers can adjust the font size in their browsers, to be comfortable for their particular circumstances.

On paper, it is easy to control the line length and font size of a document to accommodate the ideal line length. For example, this can be accomplished by having large margins or columnar text.

But on the web, we have an immediate problem. By default, text in a plain web page wraps to the size of the window, so readers with different size monitors, and different browser window sizes, will all see different line lengths. Add to this the complication that both readers and page authors can alter the size of the fonts used in various ways, and we have an almost impossible situation to manage.

Conventional design wisdom has been to restrict the width of flowing text to somewhere between 550 and 780 pixels wide, using tables or fixed-width divisions to do this. The exact size depends on who you speak to, and what target screen resolution is being designed for. I have created a test page showing the effect of different table widths and font sizes: to see the effects of different screen sizes, you can either change the resolution of your screen, or adjust the browser window to different widths to simulate this. (Even better, if you have a Windows PC, you can download BrowserSizer from link to external site http://www.sharewareplaza.com, and do the job more easily.)

As noted on the test page, the line length varies quite a lot depending on how the author (in this case, me) sets up the page, and how you, the reader, choose to view it.

In my initial design for the pages on this site (back in the 1990s), I chose a 580-pixel table, which just fitted into a browser running at full screen on VGA, taking into account the possible presence of an Office taskbar at the right.

However, talking to some colleagues with large screens made me think again. For a start, most of them tend to run their browsers at less than full screen, and those that used the full screen thought a very narrow column of text was forcing them to scroll unnecessarily - "why buy a big screen and then just see tiny contents?"

I tried a wider table optimised for 800x600 screens (the usual target in those days), but although this looked better, it made the site dramatically less usable for readers with VGA screens.

The end result was that I made the decision not to restrict the line length at all. After all, I have gone to considerable trouble to allow my readers to choose the font size they feel comfortable with, and doing this does require some positive effort on the reader's behalf. If people want shorter line lengths, they could very easily accomplish this by narrowing the browser window, which is hardly an arduous task. And since I cannot predict what font size they will be using, any attempt to optimise the number of characters in the line will probably be doomed to failure, anyway.

Update: More browsers (Firefox, Opera 7 for instance) now support the CSS max-width property for elements, which allows me to say, for example "make the page 65 characters wide on big screens, but let it get narrower for smaller screens". Although this is not supported by Internet Explorer (up to version 6), it is nice to be able to use it if necessary.

So, my own design principle is geenerally to recommend using the full width of the window (subject to a recommended maximum width, and with a margin for readability, of course.) This has the advantage of not wasting valuable screen space on small monitors, or for people who have chosen to use a large font.

Not having a fixed width also means that the page will always print properly in most browsers. But I digress. This might seem an odd aspiration - I try not to print out pages myself, but some people do like to do this, especially for detailed reference material, or to pass information on to colleagues.

Lots of people will see this principle as contrary, but to my mind, it is in keeping with the philosophy of letting the reader tailor his or her own browsing experience. What do you think?

* With thanks to Mark B, John Elftmann, Rita Miller, Kelvyn Sheppard and Richard Waller who contributed to this discussion.