Table of line lengths for web fonts
How wide should a line of text be, if it's important to you for people to read your document?
The accompanying spreadsheet calculates ideal line widths for all the commonly useful web typefaces at all the commonly useful font sizes.
The spreadsheet shows – for each typeface and size – the width in pixels that gives you 54, 60, and 66 characters per line. It then shows how many characters per line you would get for lines of specified widths, ranging from 200 pixels to 550 pixels.
It's possible to be quite definitive because type choices are so restricted on the web. We usually choose one of these typefaces: Verdana, Arial, Georgia, Times New Roman, Trebuchet MS. The choice for size comes down to 10 to 17 pixels.
Download the spreadsheet (measure.xls).
The metrics
The two key metrics for choosing line lengths (known professionally as "measure"):
54-60 letters and spaces per line;
Somewhat more than two eye-spans wide.
The rule of thumb is that when holding a book, one eyespan is about twelve picas (two inches), and so an ideal length is 27 picas (four and a half inches).
An eyespan is typically somewhat wider for computer monitors than for printed material – the distance from our eyes to the monitor is typically greater than the distance to a page we hold in our hands. For reading on a monitor, it may be reasonable to aim for 30 picas (five inches), or 480 pixels.
Combining the two rules, we want to choose a typeface/size combination that gives us about sixty characters for a line that is about 432 pixels wide. (Of course you must adjust the line-height to suit the size, length, and typeface....)
Typographers have a long tradition for choosing type size and line length. Johannes Gutenberg made excellent choices more than five hundred years ago.
The basic rules of thumb give us an excellent starting point. From there you can adjust the specifications to suit your specific project.
For example, though 54-60 characters per line is ideal for reading in general, justified text came out better with slightly longer lines. A few extra characters made it easier to keep the spaces between words even. (This is less relevant in print now, because modern software can adjust the spaces between letters, and keep the word spaces quite even.)
It's also quite common that text on the web is not meant to be read. It's relatively awkward to read on a computer monitor, after all. Often, we write in a style that is targeted toward people who are scanning, not reading. We may use a lot of headlines, lists, blockquotes, short paragraphs, and bold emphasis to give people the gist of the article without forcing them to read many of our sentences and paragraphs.
Methodology
The methodology used for the spreadsheet is based on standard formulas that typographers have used for decades. They measure the width of a lower case alphabet – all the letters from a to z – and multiply that by about 2.05 to get the length for 60 character lines. The spreadsheet calculates the other values based on that result.
Note that there's a rather wide variation in the width of fonts on different operating systems and monitor settings. Certain fonts at certain sizes may vary by several characters per line across the different platforms.
Copyright © 1998-2008 J. R. Boynton