Typography and the user interface

There is a quiet issue that nags at the computer industry. While processing speed and computational flexibility have grown at incredible rates, our displays, the most human-facing elements of our digital lives, lag behind.

Addressing an audience of information designers, Edward Tufte once explained that the fundamental challenge with presenting information is that the world we live in is high-resolution and multi-dimensional, yet all of our displays are most decidedly not. And while Tufte was initially referring to the problems of displaying rich data on paper, he was quick to point out that digital displays suffer the same problem but to an even greater degree. It may be tricky to map multiple axes of information (time, temperature, dollars, color, widgets sold, etc.) onto a two dimensional representation, but your difficulties are only compounded when you add the considerable handicap of reducing the target display resolution to a fraction of that of an equally sized piece of paper1.

History

The vast majority of the fonts in existence were created to exist ultimately as pigment on a printed page. In fact, the letterforms of the most widely used fonts, the ones we see most, were created a century ago; typefaces many consider to be the most beautiful are regularly more than 500 years old2.

The number of fonts created specifically for screen use are very few. When screen fonts were first created, ironically, all fonts that appeared on a computer screen anywhere were by necessity designed for screen use. They were bitmaps, and their goal was legibility on a low-res screen and as output to a dot matrix printer. As computers got more advanced and the desktop publishing revolution allowed for high resolution laser outputs, typefaces shifted priorities—where previously they were screen optimized with printing as a subservient issue, now they were concerned with being true to their printed forms, sacrificing "screen sympathy" in the process.

And what I mean by that is, the scalable outline fonts (PostScript, TrueType) that supplanted the original bitmap fonts, contained screen versions that were themselves bitmaps. These screen fonts were hand tooled to express the forms of their high-res printed forms as best as could be represented on the screen. This is referred to as "hinting." Only certain key point sizes were hand hinted; the rest were interpolated by the rasterizer software.

This is precisely why most fonts fail when asked to perform in the context of a computer interface; either their screen versions were biased towards faithful representation of their true forms, or the screen versions simply don't exist.

Current State of the Art

Okay, when I talk about a contemporary font being a "screen font" I am referring to those faces which are designed specifically for use on-screen, which may or may not have companion printer fonts—and not merely the bitmap companions that accompany every outline font. In a truly pure typeface for the screen, if there are printer fonts included, their forms will be dictated by the hinted screen fonts—rather than the reverse, which is normally true.

The Base-9 and Base-12 families are prime examples of this. Created in 1995 by Zuzana Licko, co-founder of Emigre, their printed character widths were determined by the proportions of the screen font. Reversing the usual process sidesteps the spacing and character shape problems3 that plague even well-designed "screen fonts" and was in fact their raison d'etre.

In 1996 Microsoft released a set of fonts which has become known as the Core Web Fonts, including two families, Verdana and Georgia, designed specifically to address on-screen usability issues. The fonts were created by Bitstream co-founder Matthew Carter and hinted by Tom Rickner of Agfa Monotype.

While supremely competent screen fonts in their own right, their critical importance lies in the strengths of their behemoth publisher, Microsoft—upon their release, they were to be worldwide de facto standards. Along with Tahoma (also designed by Carter and Rickner as an interface/system font), Trebuchet, and several other non-screen specific faces, Microsoft has essentially dictated the type palette available to users and developers. Clearly not all products will be limited to these default fonts, nor should they be; but it is important to keep in mind, essentially so if you are developing for the Web.

What Is Old Is New Again

In addition to what is ultimately a paucity of modern (well-designed4) typefaces for the screen, other sources to tap are those original bitmap fonts from the dot-matrix era, which have themselves experienced a minor revival in print, as part of geek-chic nostalgia.

While originally designed and viewed by many as a transition format, to be rendered obsolete by high-res screen and print technologies, they continue to be relevant, as low-resolution and small screens remain in favor for budget and portability factors.

Anti-aliasing

Both Windows XP and Mac OS X include support for sub-pixel rendering5, which is a type of anti-aliasing that unlike traditional smoothing, theoretically triples the horizontal screen resolution on an LCD when viewing text. While sub-pixel rendering is a definite step up from indiscriminate smoothing, it does still suffer from all the disadvantages of standard anti-asliasing. In practice, it works best above a minimum point size and will at any point size create a rainbow-colored halo at the text edges, which is unnoticeable to some, and very distracting to others. XP ships with this feature off by default.

A word on traditional anti-aliasing: don't. The worst thing you can do to a painstakingly hand-hinted screen font is to remove all the conscious decisions about form and make it all blurry. Fonts that gain from anti-aliasing are typically not well-suited for interface purposes, or would otherwise be of a point size not typically seen in an application environment.

The exception to the above would be a physical device or kiosk with a large-ish reading distance (an operating room device for example). In those cases, large legible type is a must, and anti-aliasing may be appropriate. There are several fonts designed specifically for television that work well in these situations.

Variability and Uncertainty

One of the greatest frustrations of visual interface design can be the lack of control you have over the actual artifact. Much like Web design, you just don't know how or where the user will be looking at the interface. This can be maddening if you come from a print design background, where it is par for the course to obsess over your color swatch book (which you've made sure hasn't expired, age skewing the ink spectrum) in just the right temperature of light in order to get precisely what you had in your mind, onto the computer, onto the press, and finally onto paper.

Contrast that with the software industry, where it's common for a client to say "our user base runs 800x600 through 1280x1024, some of them will still only have 256 colors, and we also need to make sure it works on a washed out projector."

There are issues that can be accounted for, such as native dpi settings across platforms. Point sizes correspond directly to pixel sizes on the Mac OS, because the native dpi is a typographically consistent 72. But Windows considers an inch to be 96 pixels long, which results in a discrepancy:

We can plan for those sorts of problems easily, but there are many variables which cannot be known—what the effective dpi of your user's screen will be, or if the chartreuse will look more like pistachio because the user's CRT is five years old, or which XP theme is installed. In practice, we aim for a best-case target and plan for the spread.

Upshot

When it gets down to brass tacks, choosing the right screen font for your user interface can be summed up in a few words: Verdana, and sometimes Tahoma. Of course I'm being facetious when I say that, but only partially; indeed, when building Web applications, the choice almost always comes down to one of those core Web fonts, sometimes with a corporate brand face in a supporting role. Yet it's important not to draw a priori conclusions and limit your options without reason. Finding the opportunity to employ a unique typeface will change the entire character of a product, in as subtle or dramatic a fashion as you design.

Things that can be done today to improve readability and legibility are by-and-large the existing fundamental principles that govern print design. The optimum eight-to-12 word line doesn't suddenly change just because we're viewing text on-screen. Good typography is good typography, everywhere. This is not to say technological limitations don't have effects; e.g., while justification has its place in print, it's almost never a good idea on the screen—poor control over word spacing and low screen resolution yield some truly awful results.

Be consistent in your use of margins, leading and pixel sizes (always specify type size by pixel, rather than point size). The best way to be consistent is to have a rational system that informs your style choices.

Future

In late 2004, Microsoft unveiled seven new fonts, collectively called the ClearType Font Collection6, at the ATypeI conference in Prague. To be released with the next generation Windows OS, Vista, and other future software packages, they were commissioned with onscreen legibility as their primary concern. As the name suggests, the collection was designed to leverage Microsoft's ClearType technology, and it remains unclear how the fonts will perform without it. But unlike the core Web fonts, which themselves have recently been pulled from general distribution, the ClearType collection will not be freely downloadable. They are available for individual licensing across platforms, but Apple currently does not have plans to include them as part of their OS.

Displays are catching up, though very slowly. "Electronic paper" technology is becoming more mature, promising paper-like qualities (thin flexible displays with the same contrast ratio as paper—twice that of normal displays), but in its current incarnation is still limited to ~170 dpi (roughly the same as a newspaper), and is only available in black and white. Sony and Phillips have marketed an e-book based on the technology, which is currently on sale in Japan. The state of the art in LCD technology is just over 200 dpi, but is being targeted at specialized applications and is not widely available.

However, increasing hardware dpi is not enough; it must be matched by a shift in software—OSes will have to move away from a pixel-based interface to a scalable model that will be able to adjust itself to the dpi of the display device. Only then will designers be able to specify point sizes that are meaningful, and remain consistent across platforms and devices—ironically enough, the long wait has been for technology to become sufficiently mature, so that on-screen design can come back full circle and regain the control of print on paper.

Footnotes

1 This page as viewed in my word processor contains 384 words; a page of similar area from a software manual off my bookshelf contains ~1200 words. And 1/3 is actually a bit generous, as I'm working from a high-dpi LCD.
2 Times (New Roman, and others) first appeared in 1932 in, and was designed for, the newspaper The Times of London. Adobe Jenson is a typeface created by Nicolas Jenson and first appeared in a book by Eusebius, printed in 1470. And the various incarnations of Trajan are based on carvings found on Trajan's Column, a monument erected AD 106-113 by the Roman emperor.
3 For a much more detailed explanation, see Zuzana Licko's design notes http://www.emigre.com/EFfeature.php?di=79
4 There are actually quite a number of modern bitmap screen fonts in existence, mostly made by amateur type designers; a few are rather well done, but almost all are limited to one size and lack a cohesive family.
5 An in-depth technical explanation of sub-pixel rendering can be found here: http://grc.com/cleartype.htm
6 http://www.microsoft.com/resources/design/ClearType.html

Terms
Hinting
Rasterization
Anti-aliasing
Bitmap Font
Outline Font

1 Comment

Vladimir
Image links a broken =(

Post a comment

We’re trying to advance the conversation, and we trust that you will, too. We’d rather not moderate, but we will remove any comments that are blatantly inflammatory or inappropriate. Let it fly, but keep it clean. Thanks.

Post this comment