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 800×600 through 1280×1024, 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