Typaahgrphy

by Tomas Caspers — Feb 1, 2000
Typaahgrrphy

On-screen typography is far from being an exact science, but just like its counterpart in meatspace it is intended to get someone with a limited attention span to grasp your message.

As with any medium, some fundamental cognitive rules still apply, since basically the message is still rendered in the reader's mind, the medium is just a means of transportation. And there are certain factors that can either improve or worsen the reader's experience or success - factors that have been known for centuries and which are so basic that they apply to any medium, be it dead trees or CRTs.

There is one significant difference though: The attention span of Web users is even shorter than that of someone reading printed material. If you take into account that users generally read 10-20% slower from screen than from paper, it becomes obvious that text has to be set very carefully when your paycheck depends on the user's understanding of this text.

What makes a typeface good or bad for on screen reading?

Unfortunately the number of typefaces we can now choose from is still somewhat limited to the most basic set that comes preinstalled with the client's OS or browser and from that limited number of fonts you have to choose those that will hurt the least.

Times, still the most popular option (though one could argue out of ignorance), is an excellent typeface for printing newspapers, but it is a pain for reading on-screen. Its original version was designed to squeeze as many letters as possible on a printed page and still remain legible. Therefore its print version has a medium x-height while being fairly narrow, with sharp and small serifs. Its small ascenders and descenders make it very economical, because they reduce the need for leading, enabling the typesetter to set more lines per page.

The major problem with the bitmapped version of Times (the one that appears on the screen) is that it doesn't translate those subtleties. A pixel is a pixel - the smallest possible unit - there is no such thing as half a pixel and even anti aliasing doesn't help at copy sizes. So a formerly tiny serif is now as big as a stem and adds a lot of unnecessary visual noise, especially within 'small' and narrow fonts like Times. Most screen fonts were never designed to be legible, they were only designed to resemble their printer fonts as closely as possible at 72 ppi in PageMaker or XPress.

What makes it even worse is the fact that all screen fonts are displayed with close to no leading in all pre-CSS browsers. If a designer would choose a font with a large x-height for printed pages, he would have to use extra linefeed so that the reader's eye easily finds the beginning of the next line, something that's not possible on the web without the use of Style Sheets, but something that is badly needed for most older fonts.

To keep text set in Times still readable without CSS, one would have to reduce the width of the column below the optimum 50-55 letters, something that's impossible to consistently accomplish across platforms.

Fortunately this is changing. More and more fonts are optimised for on-screen reading and become widely available, in some cases they are even bundled with other products or free to download, like Microsoft's Fontpack.

Other Type foundries try to sell optimised versions of their fonts, like Adobe's Webtype, but I don't think that a lot of end-users will fork out over 50 US$ for a concept they are not likely to understand, even if it would prevent headaches or eye strain.

What most of those typefaces have in common is that they have a more open face, wider letters, increased x-height, and a more generous letterspacing. They fit nicely into the square pixel grid without looking distorted and don't have the letterspacing problems that standard screen fonts like Geneva or MS Sans Serif have. With the limitations of low resolution display in mind (there is only a finite number of pixels you can use to display 12 pt on a 72 ppi display) those fonts were designed for maximum on-screen legibility.

Some of those fonts could be classified as 'serifs without serifs'. Here the use of serifs is not a historical remnant, but is limited to letters' functionality. They are only used to distinguish letters that could otherwise be easily confused. Take for example the lowercase j i l in Helvetica/Mac as compared to Verdana/Mac on the left. In Helvetica those three letters are hardly distinguishable and thus almost impossible to read. What makes it even worse is that the letterspacing is too tight. Set in Verdana on the other hand, this text would still be legible at 8 points, a pain royale with most other fonts.

How to make a good font even better

try increasing leading to 15 or 16 pt (or 130%) for the web and you'll see some dramatic improvement in readability

Learn how to use Cascading Style Sheets! Since we're dealing with a fast-paced medium, reading is equally hectic, so typography has to adjust to this speed.

Lines have to be shorter and leading has to be increased. Like in print, leading is a function of line length, but whereas in print 12/14 is perfectly acceptable for a line 50 letters wide, you better try increasing leading to 15 or 16 pt (or 130%) for the web and you'll see some dramatic improvement in readability.

When you use sans serif fonts, you should increase this value even more. These fonts lack the horizontal guidance that those little serifs provide and thus help the eye follow the textflow.

Individual letters have to be clearly distinguishable, so make sure you choose a font with the needed characteristics. Unfortunately one out of two Web browsers doesn't support letterspacing, but it doesn't hurt to provide those who do interpret CSS correctly with a looser spacing. Or, if you don't use CSS in your pages, at least specify fonts like Georgia for serifs or Verdana for sans first and only then Times or Arial. Compare how evenly spaced Georgia and Verdana are in contrast to Times New Roman/Windows or Helvetica/Mac. The individual letters don't stick to each other and there are no unwanted gaps. The human eye has to work much harder at deciphering text when e.g. the pixels of the letters a, o, and e cling together or when serifs from adjacent letters run into one another. Besides being tiring this lacking distinctiveness also interrupts the reading flow.

Tomas Caspers is a freelance graphic designer based near Cologne, Germany. He is currently mourning over the relegation of his favourite football club, 1. FC Köln, from the Bundesliga after 35 years.

Del.icio.us Digg Technorati Blinklist Furl reddit Design Float