So I went to Apple’s support site to search the knowledge base, and couldn’t read a damn thing. My eyes were a bit tired, and the search results were displayed in 9.5pt Arial. Of the many preferences you can set when you log in with your Apple ID, legibility isn’t one of them. Gosh, I wonder what would happen if I searched for “Universal Access?”
Next I tried to read the release notes for Mozilla 1.2.1, and counted 135 characters per line. Set solid, no less. Fortunately, this was due to the too-small default font size in Mozilla, and raising it to a more reasonable 18 pixels (yes, the sound you hear is my teeth grinding; pixels!) lowered the line length to a slightly less absurd 105 characters.
Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size… But even with generous leading, a line that averages more than 75 or 80 characters is likely to be too long for continuous reading.
— Robert Bringhurst, The Elements of Typographic Style
[You should buy that book, by the way. I need to go out and buy the new edition myself. Now back to the rant.]
Then I went to Aint It Cool News for advance word on The Two Towers movie. Small text, long lines set solid (95 characters), and the whole damn thing was in bold. This is the sort of page that should be flagged by your browser with a special error message: “666 Moron Writing HTML.”
Next stop, an article at Apache Week. Small fonts, really long lines set solid (125 characters), and for extra credit, a colored background to reduce the contrast.
These sites may look completely different on your screen (except for the bold problem). You might even be wondering what alternate universe I’m finding some of those really long lines in. The key to the mystery: my browser window isn’t the same size as yours. Worse, my browser might be using a different definition of “point,” producing truly fascinating results on sites that mix units.
The ability of web browsers to adjust HTML pages to fit in windows of different size is allegedly one of the great strengths of the web, and in 1994, it probably was. But as with Spiderman, so with web design: with great power comes great responsibility. Once you add a single font tag or CSS style to your site, you have assumed responsibility for keeping the pages readable.
A simple way to start is to use CSS to set the width for any non-trivial text in em units. Not all browsers scale pixels, inches, points, or pica correctly, but if they support styles at all, they seem to know what to do with a paragraph that’s 25-35em wide. What does that look like? You’re soaking in it.