Principles Of Typography.pdf

PAUL KAHN AND KRZYSZTOF LENK

design

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

Principles of Typography for User

Interface Design

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

Paul Kahn

Krzysztof Lenk

Dynamic Diagrams

12 Bassett Street

Providence RI 02903

+1-401-331-2014

fax: +1-401-331-2015

paul@dynamicdiagrams.

com

lenk@dynamicdiagrams.

com

http://www.

dynamicdiagrams.com

This article is meant to define the role of

typography in user interface design. If this

purpose seems rather grand, our intention is

modest. We hope we can simply do this job by

pointing out the obvious: Typography is a

major part of the GUI. Understanding how

type works as a visual system is a major factor

in good user interface design.

Our written language is communicated

through type. Typography conveys or

obscures and gives voice to our message in one

fashion or another. The GUI inherited from

the two–decade-old Xerox PARC-

Apple–Motif-Windows tradition is a combi-

nation of images and words. The images,

whether they are bars and palettes of icons,

layers of tabs, or cascading menus, have never

told the entire story. The icon on the screen

may tell you that you are looking at a pro-

gram, but the words below the icon tell you

the specific program or document at which

you are looking.

Typography has its own meta-language. Its

shapes and relationships convey meaning even

before we decode the words with which they

give shape and voice. The System 8.0

Monitors & Sound control panel (Figure 1) is

a useful example. We can read the meta-lan-

guage of the dialog box from top to bottom

and left to right, just as we would read any

printed text. Variations in typography are used

to establish five distinct uses of typographic

language:

1. Small, thin black type on a gray back-

ground names the icons for the four

groups of controls.

2. Larger and darker black type connected to

box lines names the three choices for the

selected control.

3. The same large, black type, when placed

next to a radio button or a drop-down list

or on a raised button, expresses a com-

mand option.

4. Thin, white type on a black background

identifies the current selection.

5. Thin, black type on a white background

identifies the other choices that could be

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.

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 MART.SPRUIJT bv, a printing com-

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

light fade-out effect in the second example is created by progressively

increasing line spacing and character spacing using Primus-Antiqua.

Form and counterform

Every letter consists of the shape filled with

ink, the form, and the shape defined by that

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

define the color density of the type, that is,

Figure 3. Form and counterform in three letters. We must see both the

shape of the letter and the shape defined by the letter to read properly.

interactions...november + december 1998

how much ink the letterform will express on

the paper. The bowls of the letterform are the

rounded shapes, the geometry of the curves

that make the “e” and “o” and “c” move to the

same visual rhythm (Figure 4).

respectively. The top of the ascender defines

the top of a capital letter, the cap height

(Figure 5).

Most words contain some letters with

ascenders/descenders, and this rising above

and below the baseline/x-height range creates

rhythmic contrast in the exterior shapes of

words written in lower or mixed case. Words

written entirely in uppercase letters do not

share this contrast, having only baseline and

cap height. Large amounts of text set in all

caps are more difficult to read as a result of

this lack of contrast (Figure 6).

The dynamic system of contrasts begins

with the shapes of the letterform and con-

tinues with the contrasts created by com-

bining letterforms into words, words into

lines, and lines into a text column or block.

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.

Ascenders and descenders

The letters grouped together to make up a

word align to four horizontal marks. The most

obvious mark is the baseline, the bottom of

letters such as “x” and “d”. Lowercase letters

have a second mark, the x height, that is,

simply the height of the lowercase “x” in any

font. Variations in this height can make a font

appear large or small in contrast to other fonts,

independent of size. Ascenders and descenders

are those parts of the letterform that rise above

the x height, such as the stem of the “d,” or fall

below the baseline, such as the stem of the “p,”

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

the increased thickness of the stem in the “h” decreases the white coun-

terform, making the letter dark black.

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”

combination from an “m.” Tighter letter

spacing also emphasizes counterform within

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.

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

difficult to see the letter shapes.

Word spacing

Word spacing is the horizontal space between

characters at a word boundary. Our visual

system uses this space to identify letter groups as

words. In typesetting systems that justify both

left and right margins of a text block, the word

space is divided into subunits and is expanded

or compressed across a line (Figure 8). Most

software for rendering type on the screen adjust

lines to only one margin (left or right) and place

a uniform space between words.

type face and size, single or double line space)

rather than typesetters. When proportional

fonts were added to the Macintosh in the

1980s, a “default” line spacing of one or two

pixels became an invisible standard. The size

of type should be expressed as a font size and

line space in combination, such as 10-point

type on 14 points of leading or 10/14 (pro-

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

Plik z chomika:

Inne pliki z tego folderu:

Inne foldery tego chomika: