See discussions, stats, and author profiles for this publication at: [Link]

net/publication/220382729

Design: principles of typography for user interface design

Article  in  interactions · November 1998

DOI: 10.1145/287821.287825 · Source: DBLP

CITATIONS READS

28 11,149

2 authors, including:

Paul Kahn
Northeastern University
45 PUBLICATIONS   574 CITATIONS   

SEE PROFILE

Some of the authors of this publication are also working on these related projects:

Intermedia View project

All content following this page was uploaded by Paul Kahn on 01 March 2017.

The user has requested enhancement of the downloaded file.

PA U L K A H N A N D K R Z Y S Z T O F L E N K
design

Jane Nelson, ©1997 Artville, LLC

Principles of Typography for User

Interface Design

T
Typography is a major part of the graphical user interface (GUI). Good user interface

design depends on our understanding of how type works as a visual system. In this

article, we summarize the typographic principles that were developed through print

practice and show how they translate and expand within the electronic medium. We

define typography as a dynamic system of contrasts resulting from the relationship of

the type (its color, form, rhythm, and style) to its background. We then explain how to

manipulate these contrasts to design effective GUI systems and presentations of text

on the computer screen. We conclude by outlining the limitations and advantages of

electronic type.

interactions...november + december 1998 15

 This article is meant to define the role of before we decode the words with which they
typography in user interface design. If this give shape and voice. The System 8.0
purpose seems rather grand, our intention is Monitors & Sound control panel (Figure 1) is
modest. We hope we can simply do this job by a useful example. We can read the meta-lan-
pointing out the obvious: Typography is a guage of the dialog box from top to bottom
major part of the GUI. Understanding how and left to right, just as we would read any
type works as a visual system is a major factor printed text. Variations in typography are used
Paul Kahn in good user interface design. to establish five distinct uses of typographic
Krzysztof Lenk Our written language is communicated language:
Dynamic Diagrams through type. Typography conveys or 1. Small, thin black type on a gray back-
12 Bassett Street obscures and gives voice to our message in one ground names the icons for the four
Providence RI 02903 fashion or another. The GUI inherited from groups of controls.
+1-401-331-2014 the two–decade-old Xerox PARC- 2. Larger and darker black type connected to
fax: +1-401-331-2015 Apple–Motif-Windows tradition is a combi- box lines names the three choices for the
paul@dynamicdiagrams. nation of images and words. The images, selected control.
com whether they are bars and palettes of icons, 3. The same large, black type, when placed
lenk@dynamicdiagrams. layers of tabs, or cascading menus, have never next to a radio button or a drop-down list
com told the entire story. The icon on the screen or on a raised button, expresses a com-
[Link] may tell you that you are looking at a pro- mand option.
[Link] gram, but the words below the icon tell you 4. Thin, white type on a black background
the specific program or document at which identifies the current selection.
you are looking. 5. Thin, black type on a white background
Typography has its own meta-language. Its identifies the other choices that could be
shapes and relationships convey meaning even selected.

Figure 1. Meta-language of contrasts in size, context, and reverse color, applied consistently in all
typography makes this control panel interface easy to read and use.

16 interactions...november + december 1998

 This system works through small, well-con-
trolled modulations of size, color, and context.
We explain next how these kinds of dynamic
contrasts are the foundation of the typo-
graphic art.

The Art of Typography Is a Dynamic

System of Contrasts
Type is about contrast. It is the contrast
between the type and its background that
makes the letterform visible to the human
visual system. There is an old German saying:
“Typography is the art of using black to expose
whiteness.” We place black ink on white paper
to communicate information. We think we see
the black type when we look at the resulting
page, but in fact, we see black only because of
the whiteness exposed beneath it.
Type has color density as well as hue (blue,
black, red, gray). The density of the type’s
color (its volume) reaches us when it is con-
trasted with the color of a field (its back-
ground). It is a contrast of dark against light or
light against dark (Figure 2). Thus, contrast is
a function of color density. Color density is
created by the shape of the individual letter-
form in relation to the negative space that
exposes their form to our eyes.
Letters in the Roman alphabet are made up
of four kinds of shapes: form/counterform,
stems, bowls, and ascenders/descenders. Even
a cursory understanding of how these four
kinds of shapes work helps to identify why dif-
ferent type designs (fonts) can have such dif-
ferent appearances but still convey the same
letterforms.
Figure 2. Color in type can be expressed in black and white. These two
samples are taken from a type book by [Link] bv, a printing com-
Form and counterform pany in Amsterdam. The various “color” banners on the top example are
created with variations in weight of a single font, Futura. The dark to
Every letter consists of the shape filled with light fade-out effect in the second example is created by progressively
ink, the form, and the shape defined by that increasing line spacing and character spacing using Primus-Antiqua.
shape, the counterform. A counterform can be
entirely closed, such as the interior space of the
“o;” partially open like the “n;” or broadly
open, such as the space defined by the curve
and cross stroke of the “f ” (Figure 3).

Stems and bowls

The stem of a letterform is the vertical stroke.
The thickness of this stroke does much to Figure 3. Form and counterform in three letters. We must see both the
define the color density of the type, that is, shape of the letter and the shape defined by the letter to read properly.

interactions...november + december 1998 17

 how much ink the letterform will express on respectively. The top of the ascender defines
the paper. The bowls of the letterform are the the top of a capital letter, the cap height
rounded shapes, the geometry of the curves (Figure 5).
that make the “e” and “o” and “c” move to the Most words contain some letters with
same visual rhythm (Figure 4). ascenders/descenders, and this rising above
and below the baseline/x-height range creates
Ascenders and descenders rhythmic contrast in the exterior shapes of
The letters grouped together to make up a words written in lower or mixed case. Words
word align to four horizontal marks. The most written entirely in uppercase letters do not
obvious mark is the baseline, the bottom of share this contrast, having only baseline and
letters such as “x” and “d”. Lowercase letters cap height. Large amounts of text set in all
have a second mark, the x height, that is, caps are more difficult to read as a result of
simply the height of the lowercase “x” in any this lack of contrast (Figure 6).
font. Variations in this height can make a font The dynamic system of contrasts begins
appear large or small in contrast to other fonts, with the shapes of the letterform and con-
independent of size. Ascenders and descenders tinues with the contrasts created by com-
are those parts of the letterform that rise above bining letterforms into words, words into
the x height, such as the stem of the “d,” or fall lines, and lines into a text column or block.
below the baseline, such as the stem of the “p,” These text blocks are then framed within a
page or screen. Character spacing, word
spacing, and line spacing are three contrasts
that occur within any text block. Margin
space is a fourth contrast that appears when
the text block is placed within a frame. All
four of these contrasts are highly interdepen-
dent and must work as a system to produce
good typography.

Character spacing
This is the horizontal space between charac-
ters. It is another counterform, the shape
exposed by the combination of letterforms.
The space between “te” is quite different from
“ve” or “th.” This shape is effected by the dis-
tance between the letters. Tight letter spacing
can make it difficult to distinguish an “rn”
Figure 4. Stems and bowls are similar within a single font design. The vari-
ation in thickness does much to establish the color of the type. Note how combination from an “m.” Tighter letter
the increased thickness of the stem in the “h” decreases the white coun- spacing also emphasizes counterform within
terform, making the letter dark black.

Figure 5. The x-height of the font does much to define its relative size. The larger the x-height the more white space is
exposed by the counterform. These letters are the same point size, but the Helvetica on the left looks larger than the Times
on the right.

18 interactions...november + december 1998

letters over the form of the letter itself.
The appropriate amount of space between
characters varies according to the letter com-
bination. In computer typesetting systems,
these space values were “tuned” and stored as
kerning pairs, with the distances measured in
very small increments, such as 1/1000 of the
width of the letter “M.” The possible range for
character spacing of type for the computer
screen is limited by the coarseness of the dis-
play, from 0 to 2 pixels in most cases. This
spacing varies considerably from font to font,
with fonts specifically designed for the screen
providing more uniform spacing (Figure 7). Figure 6. The visual rhythm and variation established by the ascenders
and descenders aid the reading process by creating strong external shapes
in words. The use of all caps eliminates these variations, making it more
Word spacing difficult to see the letter shapes.
Word spacing is the horizontal space between
characters at a word boundary. Our visual type face and size, single or double line space)
system uses this space to identify letter groups as rather than typesetters. When proportional
words. In typesetting systems that justify both fonts were added to the Macintosh in the
left and right margins of a text block, the word 1980s, a “default” line spacing of one or two
space is divided into subunits and is expanded pixels became an invisible standard. The size
or compressed across a line (Figure 8). Most of type should be expressed as a font size and
software for rendering type on the screen adjust line space in combination, such as 10-point
lines to only one margin (left or right) and place type on 14 points of leading or 10/14 (pro-
a uniform space between words.

Line spacing
This is the vertical space between lines of text.
It is sometimes called leading because thin
strips of lead were used to increase this space
when type was set in metal. Line spacing is an
important attribute of font size. In fact,
thinking of font size, such as 12-point type, in
isolation is a common mistake, encouraged by
the user interface to many word-processing
programs, which historically imitated the user
experience of mechanical typewriters (one

Figure 7. Good letterspacing varies depending on the combination of letter forms. (Bottom) Note the large space between the
“le”, the thinner space between the “et” and the very thin space between the “tt” combination in the typeset example. When
interpreted by screen fonts these variations in letterspacing are greatly reduced. In this enlargement of five screen fonts (top)
the distance between the “rn”, the “rk” and the “rg” combinations vary considerably, sometimes reduced to a single pixel or
none at all. The “rn” is difficult to distinguish from the “m”, the “rk” is joined, while the “rg” is distinct in all five fonts because
of the counterform of the two letters.

interactions...november + december 1998 19

 nounced “ten on fourteen”; Figure 9).
Line spacing exposes the space between
the ascenders of one line and the descenders
of the line above. The act of reading is a
process of moving the eye in jumps over the
shapes of groups of letters. The shapes of the
top of letters carry more information than
the bottom, but our ability to distinguish
both increases legibility. This is why ade-
quate line spacing is so important. The cor-
rect amount of line spacing reveals the
ascender/descender shapes that play such a
critical role in our ability to perceive charac-
ters. Too little line spacing will cause the
descender and ascender to touch or join in
patterns that are visually confusing.

Figure 8. Word spacing is relatively uniform when only one margin is used. Margin space
When text is justified to both margins, the word space will vary. To force
justify a short line, character space must be expanded and contracted as well. This is the distance of the edge of the letter-

Figure 9. Line spacing affects the color of the type, increasing or decreasing the exposed background color, obscuring or
exposing ascender/descender shapes.

20 interactions...november + december 1998

form from the edge of the frame in which it lating letterforms on the screen.
sits. This frame may be a page, a screen, or a Effecting a good balance is largely a matter
region within either. The margin space of understanding how to control the visual
exposes the text column. The left margin signal being sent. A large part of this is under-
space is often undervalued, especially in standing the viewer’s level of cognition, what DESIGN COLUMN EDITOR
scrolling lists such as the ones seen in the makes him perceive or not perceive edges and Kate Ehrlich
Monitors & Sounds example mentioned ear- hierarchies of shapes. Type is a mixed message Senior Research Manager
lier here (Figure 10). of voice and context. Both parts of this signal Lotus Development
are modulated by controlling the variables of Corporation
Using Type space, size, and color. It is the modulation of 55 Cambridge Parkway
The typographer maintains the legibility and these variables, along with the sense of the Cambridge, MA 02142
readability of text by balancing the variables content, that creates words, sentences, +1-617-693-1899
described earlier here. The available profes- phrases, paragraphs, lists, and headings in the fax: +1-617-693-8383
sional tools, such as Photoshop, Illustrator, mind of the viewer. Kate_Ehrlich@[Link]
and Pagemaker from Adobe and Xpress from There are two ways of using type: in isola-
Quark, provide a great deal of control of tion and in volume. Each of these categories
space, contrast, and color. After many years of has its own requirements for appropriate type-
ignoring typographic controls, Macromedia face characteristics. These categories apply
finally added many of these features to equally to type in print publications or in the
Director and Flash. Web browsers have sup- user interface of computer applications.
ported only a few of these controls, forcing
designers to use bitmap images to deliver Type in Isolation
typographic messages with any sophistication. Type can be used as an element incorporated
The addition of style sheet support in HTML into a larger design. Examples of this use of
promises to add some of these essential typo- type are signage and labels, covers for books,
graphic controls, such as font, line spacing, magazines, compact discs. This is how type is
and margin control, back into Web-page most commonly used in user interface design.
design, although as of August 1998, the It is characteristic to use a word or phrases to
implementation of style sheet support in the convey a message, often in relation to other
major browsers is inconsistent. With or visual elements such as icons, button, menus,
without these new features, the user interface or other user interface conventions.
designer must learn how to do the same kind Type in isolation favors a font design with
of balancing as the print designer within the strong distinction, something that carries a
constraints of the tools available for manipu- stylistic message in a concentrated space.

Figure 10. Margin space is the separation of the edge of the letterform from the edge of the frame.
See the BBC News example [figure 14] for a dramatic example of margin space used to define the
structure of a complex layout.

interactions...november + december 1998 21

 Figure 11. Type can be used in tool palettes to add both function and style to an application. The Dreamweaver 1.0 tool
palette uses a non-system font integrated with command icons to convey both style and information.

These are the characteristics of display type, font being used is the “system font” from the
typefaces that speak clearly in short bursts. operating system, there is no distinction at all
The counterform around each letter and word in the package. For various technical reasons,
group varies widely. Visual rhythms are brief the distinction in user interface has been car-
and irregular. Individual letter shapes are ried by icon design rather than type, although
highly exposed (Figures 11 and 12). even the choice of a “b” to represent “bold” or
The main issue in choosing and managing a “q” for “quit” is a use of type in isolation.
type in isolation is to convey style. The use of When we choose Syntax or Meta rather than
type in the packaging design we see in super- the “system font” to convey meaning in the
markets and drugstores is an instructive user interface, we give up a certain trans-
example. parency in exchange for a distinct identity.
The package is the user interface for the act
of product purchase, the visual point at which Type in Volume (en grosse)
the customer interacts with the product on When type is used to present continuous
the shelf, distinguishes one type of aluminum linear text, the requirements for the typeface
foil or tomato sauce from another, perceives change. The presentation of type is controlled
(or overlooks) the ingredients, and makes the by left-to-right, top-to-bottom visual syntax.
purchase decision. This is user interface as The period of visual exposure is much longer
container. Certainly the type is not the taste of than what the reader experiences with type in
the tomato sauce, but it must say something isolation. Regular margins and indents are
about that taste. The type must express some part of the structural language.
distinction, feeling, and/or attraction in order There are six visual characteristics that can
to compete with other packages. be used to convey distinction and variation
The same issues are in play when a font for within blocks of continuous linear text: all
the user interface of a program is chosen. If the caps/small caps, regular face, italic face, bold

22 interactions...november + december 1998

Figure 12. Lack of typographic variation in the user interface can obscure information. This options
dialog from Internet Explorer 3.0 uses the system font with no variation to differentiate groups of
options, options, commands, and further dialogs. The colorful icons draw the eyes away from the
type. The important “Font Settings” option is very difficult to see.

face, overspacing/condensing (stretching or There are three other visual distinctions for
reducing character space), and color variation. type that can be used in print: black (or ultra
These six distinctions are relatively easy to see bold), small caps, and underline. The first two
in print. On the screen, the italic variation is are of limited utility on screen. Screen fonts
often problematic. Based on a slanting of the cannot support two weights of bold, largely
letterform, italic is often distorted by coarse again because of the coarseness of the screen
screen resolution and is difficult to read. resolution. True small caps are not a feature of
Overspacing and condensing of character screen fonts, although the designer can fake it
space can be achieved in a limited number of by setting a word in caps and reducing the
programs and is consequently rare. Color, on font size to approximate the x height of the
the other hand, is rarely used in print because body text. Underlining text is possible on the
it represents an additional production expense. screen but has taken on a special meaning in
On the screen, it is largely free, although it is Web browsers.
difficult to control with any precision. Type in volume has color. The color of a

interactions...november + december 1998 23

 importance of space and margins, once we
arrange type into a line and lines into
columns, we see that line length and column
width effect legibility. The common-sense
rules of typographic legibility are the result of
500 years of practice. Although there is much
to be said for user testing, usability studies,
and psychological tests, the greatest source of
knowledge about how to treat body type is to
be found in the study of how type has been
used in printed books.

Type size
First, there is the choice of an appropriate size
for the letterform. The most common sizes
used in print are 9-, 10-, and 11-point type.
Smaller sizes can be used for elements that
require a different voice or less emphasis.
Larger sizes must be used in moderation for
titles and headings.
For type on the screen, a range of larger
sizes must be used to compensate for lower
resolution. Sizes of 12 and 14 point are com-
fortable to read, whereas 10-point type is leg-
ible in small amounts.

Line length
The recommended number of characters in a
line does not vary between the medium of
Figure 13. Some typefaces such as EraserDust and Impact paper and screen, however. A range of 65–75
are very expressive, but they accomplish this with large characters per line is a comfortable maximum
variations in letterform that become very difficult to read
in volume. Typefaces designed for body type such as for a single column of text in print, with a
Georgia and Trebuchet are more transparent, creating a range of 30-40 characters per line common in
calm rhythm in blocks of text.
multicolumn layouts. The reason for this max-
block of type has two meanings here. The imum is based on the characteristics of our
first is color density. This is the relative light- visual system. We scan a line of text in groups
ness or darkness of a typeface controlled by of letters, first picking up the exterior shapes of
the thickness of the lines and exposure of word groups, then decoding words as our eye
counterforms. The second is the color: the bounces along from left to right. The sweeping
hue of ink/pixel used to fill positive form motion of turning our eye back to the left
(black, red, blue). The color density is inde- becomes increasingly difficult as the line gets
pendent of the color used to set the type. A longer. Our ability to pick the start of the next
great deal of variation within a single color line is decreased by combinations of long lines,
can be achieved by manipulating the type- tight line spacing, and lack of white space on
face, character, and line spacing. the left-hand margin.
The available fonts for working with type
in volume are limited to body type. These Levels of heading
font designs emphasize the evenness of color Like line length, the need to distinguish two
within the block of type (Figure 13). to three levels of heading is a problem to both
In addition to all we have said about the print and screen typography, and like line

24 interactions...november + december 1998

Figure 14. This page from the BBC world news web site ([Link] demonstrates several subtle and effective uses
of typography. Great care is used to establish even margin space between the three columns, with a right-justified first column
and left-justified second and third columns. Even white space separates groups of text lines. Small variations in size make it
easy to distinguish the headline from the body text, and the subheads for two groups of links in the third column from the
links themselves. Finally, the font selected for the body text balances well with the graphic sans-serif font used in the
header/navigation bar along the top of the screen. The net effect is a transparent design that is easy to use.

length, the rules of common experience in green, etc.) (Figures 14, 15 and 16).
print can be applied to solve the problem on Scrolling text in a window is a unique fea-
the screen. For example, to distinguish three ture of type on the screen. This small frame
levels of heading, use some combination of moving around a larger text column requires
three contrasts: size, position, and color. Size a greater articulation of distinctions among
is easy enough to understand, although the levels of heading than the printed page. There
visual distinction between 12- and 13-point is simply less of the page visible on the screen
type on the screen is often difficult to see in at any one time. The distinction of multiple
isolation. Variations in position (left, center, indents is lost as a result. The perception of a
right, outdent) are often easier to see and work text’s structure is dependent on the reader’s
well in combination with other distinctions. memory rather than the visible design.
Differences in color can be achieved with In all of these examples, the main issue
changes in weight within a single font (bold, when designing body type is to convey con-
italic, or extra bold/black), as well as with vari- tent. Matters of style are secondary to matters
ations in the hue of the type itself (black, red, of legibility.

interactions...november + december 1998 25

 Figure 15. This screen from Jacob Nielsen’s [Link] web site ([Link] makes poor
use of typography. The headings are unnecessarily large. The list of previous columns is very difficult
to read due to seemingly random use of bold, blue color, and underline, the latter two a side-effect
of link anchors which seem to be used for emphasis. Centered text in the yellow box creates uneven
margins on both sides, and the random position of this box lines up with nothing. There is no visual
rhythm for the user’s eye to follow.

Special Characteristics of Type on shapes are lost entirely. In recent years, various
the Screen antialiasing techniques have been used to
After pointing out the differences between smooth curves in character shape. By varying
print and screen typography, it is easy to see the color of the pixels around the letter, more
the limitations we face when using type on the of the visual information of the letterform can
screen. The most fundamental limitation is the be preserved. The result can be effective or
low resolution of the image surface. The reso- fuzzy, depending on the algorithm used to
lution of most computer monitors is a small render the type and the skill of the designer
range of 72-75 pixels to the inch. Screens with with the tool.
so-called “higher resolutions” simply decrease Color is one area in which type on the
the size of the pixel, which visually shrinks the screen holds distinct advantages over type on
image to fit more pixels into a small space paper, at least in terms of production cost.
rather than increases the resolution of the Printing is ink on paper, and ink carries color.
image itself. This resolution compares unfavor- One-color printing is a standard cost. Adding
ably with 1200–3600 lines to the inch for color involves mixing ink and running a sheet
typesetting that image ink onto paper. of paper through a press more than once.
This is the reason that the thicks and thins Two-, three-, and four-color printing is an
of some font designs are still lost in sizes under added expense.
12 point, and some of the more delicate letter Adding color to type on the screen is a

26 interactions...november + december 1998

Figure 16. This screen from the Nature Genetics web site ([Link] designed by
Dynamic Diagrams, uses consistent variations in color, size, and position to separate the logical ele-
ments of a table of contents. The typography is a combination of styled HTML text and graphic text.

completely different process. On screen, 8-, syntax and its own meaning, defined largely
16-, and 24-bit color is not a cost to the pro- by context. Speed can effect legibility as well
ducer. Instead, it is a cost to the consumer, the as style. Direction carries a meaning of going
person who purchases the monitor and video with or against the flow of reading. The words
card for the computer itself. There is no cost that appear on the right and move left can be
to adding the color; instead, there is the decoded as they appear, whereas the words
problem of predicting what the color will look that enter from the left and move right can be
like on various monitors. The limitations on read only after they have been entirely
the screen are the number and range of colors revealed. Type moving from top to bottom
that are supported (Figure 17). will move with our sense of gravity, whereas
The most exciting characteristic of type on type that moves from bottom to top defies the
the screen is the added dimension of time. same sense. The duration of type, how long it
Type on the screen includes motion. This appears during a process of evaporation or dis-
adds a new factor to typographic communi- persal, effects our sense of the content. The
cations, a factor that we have seen most often act of growing or shrinking carries its own
in movie titles and television commercials. level of meaning, which modifies the meaning
There are four characteristics of type in conveyed by the type form and content and
motion: the word (Figure 18).
1. Speed (slow, fast). Moving type is a new area, one that has
2. Direction (from left, from right, up, down). enlivened many aspects of interactive design.
3. Duration (change in focus, transparency).
4. Variation in size (grow, shrink). Conclusion
Each of these characteristics carries its own As the utility and impact of interactive com-

interactions...november + december 1998 27

 Figure 17. Color in type can be used to create a simple hierarchy, as in this graphic table of contents of the Braun web site
([Link] It can also be used to add variety and style to text, as in this page from the web site of Elle
([Link] an international fashion magazine. Notice how the broad variations in color on this page makes the
sentences appear to move toward or away from the viewer, creating an odd sense of depth.

28 interactions...november + december 1998

 PERMISSION TO MAKE DIGITAL OR
HARD COPIES OF ALL OR PART OF THIS

WORK FOR PERSONAL OR CLASSROOM

USE IS GRANTED WITHOUT FEE

PROVIDED THAT COPIES ARE NOT

MADE OR DISTRIBUTED FOR PROFIT OR

COMMERCIAL ADVANTAGE AND THAT

COPIES BEAR THIS NOTICE AND THE

FULL CITATION ON THE FIRST PAGE.

TO COPY OTHERWISE, TO REPUBLISH,

TO POST ON SERVERS OR TO REDIS-

TRIBUTE TO LISTS, REQUIRES PRIOR

SPECIFIC PERMISSION AND/OR A FEE.

© ACM 1072-5220/98/1100 $5.00

Figure 18. An interesting example of dynamic typography is the Fluid Documents Margin Callout
technique being developed at Xerox PARC (see Zellweger et al, “A negotiation architecture for fluid
documents” in UIST ’98). This progressive sequence of four screen images shows an animated tran-
sition to reveal an annotation on Shakespeare’s Romeo and Juliet. Note that the small word indi-
cating an available annotation sits in the line space below the word(s) it explains. The annotation,
which fades in as it moves into place, is located in the margin space.

puting continues to grow, the importance of read the screen. Whether it appears in isolation
understanding type as a visual information or in volume, type will always play some role in
system increases. The user interface designer is the interaction. To accomplish this goal, the
manipulating signs and symbols, appealing to designer must understand a visual system devel-
metaphor, theatrics, and imagination. The raw oped from analog signs communicated as ink
materials of this theater are light, sound, color, on physical paper. Only then can we master the
image, and that most common of all visual sys- technique of building these symbols from the
tems, type. The technology worked with has bits of light on the digital screen to communi-
been changing rapidly, and we often hear that cate our message.
each change is a revolution, a paradigm shift, a
rewriting of the rules. In the case of type, how- Suggested Readings
ever, the rules have not changed significantly Götz, Verushka and Ben Erben, Color & Type for the
for hundreds of years. The rules derive from the Screen, RotoVision SA, 1998.
interaction between the Roman letterform and Mullet, Kevin and Darrell Sano, Designing Visual
the human visual system, not from protean dig- Interfaces. Communication Oriented Techniques, SunSoft
ital computing technology. A fundamental goal Press, A Prentice Hall Title, 1995.
of the user interface designer is to help the user McKelvey, Roy, HyperGraphics, RotoVision SA, 1998.

interactions...november + december 1998 29

View publication stats