Measure for web fonts
"Meaure" is the typographic term for line length. The primary constraints are that we want a certain number of characters per line (54-60), and we want the lines to be something like two and a half "eye-spans" wide. The best measures in print are a bit less than four inches. Since monitors are typically farther from our eyes than we would hold a book, the lines should be slightly longer, and the characters slightly larger.
The Exercise
What font size and other specs would you choose for verdana, arial, and georgia to get roughly 60 characters on a 435 pixel line?
Specs
| font size | line height | white space | x height | grid gutter | word spacing | |
| verdana | 14 | 19 | 11 | 8 | 24 | |
| arial | 16 | 20 | 11 | 9 | 25 | |
| georgia | 15 | 20 | 12 | 8 | 26 | |
| times | 17 | 20 | 12 | 8 | 25 | |
| arial | 17 | 21 | 12 | 9 | 27 | -.075em |
"White space" above refers to the distance from the baseline of one line to the top of the x-height of the next. "Grid gutter" is the distance from the bottom of the descender on the first line to the top of the upper-case letter on the third line.
Samples
My screen shot and testing used Firefox on a linux computer. There's wide variation in the rendering of fonts across platforms.
Comments
Quality typography is typically in details that few people can identify directly, but that create an overal impression and affect readability.
This exercise makes clear that verdana should not be compared to other fonts at the same font-size specification. Verdana is more legible both because the x-height is extremely large, and because the letters are quite wide. Example: in height and width, 14 pixel verdana is close to 16 pixel arial. Verdana's advantage in legibility largely disappears when you account for these more relevant metrics. (Verdana has other problems that should be considered carefully before using it.)
Our ability to control web fonts is still quite primitive, compared to print, but there are more possibilities than are generally in use. At large enough font sizes, for example, we may be able reduce the word-spacing and improve readability and attractiveness. This worked well for 17 pixel arial in Firefox, but smaller type sizes had terrible problems with it. (This is because of the low resolutions we work with on the screen.)
On characters per line
In matters of type, I look first to Geoffrey Dowding's "Finer points in the spacing& arrangement of type", and then to Bringhurst's "Elements of typographic style", among others. Dowding champions the 54-60 character line, but then uses 66 for the book. I presume the utility of the extra ten percent is for more even word-spacing in justified text. Since we don't hyphenate words on the web, we must not justify, so we should stick to 60 character lines. In print, modern technology can achieve even word-spacing without extending the measure.
In fact, a few characters shorter or longer won't make that much difference, but we do know from long experience (hundreds of years) and careful study that the ideal ranges are quite narrow.
Copyright © 1998-2008 J. R. Boynton