CHI 97 Electronic Publications: Tutorials
Color and Type in Information Design
Charles A. Poynton
Poynton Vector Corporation
56A Lawrence Avenue E,
Toronto, ON M4N 1S3, Canada
www.inforamp.net/~poynton/
Poynton@Poynton.com
Mary A. Mooney
Sun Microsystems Computer Corp.
mary.mooney@eng.sun.com
Work with color and type in the CHI community is often undertaken with a base
of experience and a sense of craftsmanship, but without a firm foundation in
the principles of perception, science, and engineering. In this tutorial, you
will learn the perceptual, color science, and engineering principles that
underlie effective information presentation. You will learn to apply these
principles to the design of graphical user interfaces and information
displays.
This tutorial is directed to graphic designers, interface designers, and
developers of on-line information. You should have experience in developing
user interfaces, experience in creating and manipulating digital imagery, or
experience in writing or illustration.
© 1997 Copyright on this material is held by the authors.
Computer graphics is generally concerned with the linear intensity
representations of physics, but if maximum image quality is to be achieved in
the minimum number of bits, it is important to use a nonlinear representation
that is matched to human perception. We will explain the science of lightness
perception, and explain how gamma correction, which is ubiquitous in computer
graphics and video, accomplishes perceptually-uniform coding. This will give
you a basis for understanding whether two different intensity levels can be
distinguished.
Halftoning and its cousin dithering create the illusion of a large number of
tones or colors in a limited medium. We will explain how you can employ
perceptual principles to use halftoning and dithering effectively, without
getting caught.
Classical colorimetry is well developed and well documented, but it is very
difficult to understand when presented from the classic point of view. We will
explain colorimetry from an intuitive point of view. We will demonstrate
forming the colors of an image using three slide projectors (red, green, and
blue), and will demonstrate mixing the subtractive primaries (cyan, magenta,
and yellow). You were taught in primary school that the primary colors are red,
yellow and blue, but those so-called primaries are neither the RGB primaries
used in additive processes nor the CMY primaries used in subtractive processes.
We will explain how the mixing of paint combines elements of additive and
subtractive color reproduction. We will explain why CMY values for practical
printing system cannot be computed simply as "one minus RGB," but must take
into account overlap in the spectra of the colorants of the ink. We will
explain why practical constraints dictate the use of a fourth "color" black (K)
in many printing processes.
The characteristics of vision explain which combinations of colors and patterns
are effective, and which are not. The phenomenon of chromostereopsis causes
blue to appear at a different depth in some circumstances; we will demonstrate
this effect. We will review the reasons that blue exhibits poor sharpness, and
show why you should avoid placing detail in blue. We will outline color
deficient vision - color blindness - and explain how this problem can be
accommodated.
Human vision adapts over a wide range of intensities. Your viewer's impression
of your work will be determined by her viewing conditions, so you must take
into account the expected viewing conditions when you create your work.
Visual acuity is at a maximum only in a small portion of the visual field. As
the angle from the center of the gaze increases, acuity is reduced, but
sensitivity to movement and flicker increases. To make effective use of vision
in an interactive system, you must be familiar with these characteristics.
Contrast sensitivity is the measure of visual acuity. Familiarity with contrast
sensitivity will help you to determine how much detail you can expect your
viewer to perceive. We will define contrast ratio, and explain how you can
maximize contrast ratio to improve subjective sharpness.
The limit to acuity in the visual system is about 1/60deg. of angle. We will
explain how this limit relates viewing distance to the amount of detail that
your user can be expected to perceive.
We will relate several different color spaces common in computing, and we will
show you where the RGB "cube" of computer science lives in the famous CIE (x,
y) chromaticity chart. Much information is available about color specification
systems such as CIE XYZ, L*a*b*, L*u*v*, HLS, HSB and HVC, but the coding of
color image data has a different set of constraints than color specification.
We will explain how the colors that can be reproduced by a particular device
are restricted by the gamut of the device, and outline strategies that are used
to map colors from one gamut to another.
Many computer display systems implement the pseudocolor system, by which the
display is limited to a small number of colors - often 256 - at any instant in
time. An image, or a user interface, must live within a palette that is related
to this small set of colors. We will explain the effect that pseudocolor has on
your color choices, and explain how to design your images, your interfaces, and
your web pages to accommodate this restriction. We will explain how browser
palettes differ from Mac to PC, and why system palettes are not identical to
browser palettes.
Nonlinear R'G'B' components are used as the basis for video coding, but are
transformed in video, JPEG, MPEG, and PhotoYCC into the Y'CBCR
representation (or loosely, YUV). We will explain the visual basis for color
subsampling, and explain how the principle is employed in video, JPEG and MPEG.
We read by fixing our gaze on a small portion of text for a fraction of a
second, then saccading to the next fixation point. Understanding the fixation
and saccade mechanisms will help you to make effective use of type. We will
explain when serif and sans serif typefaces are appropriate, and relate this
choice to display technology. We will explain how the type designer spaces the
characters in his typeface, and we will identify those aspects of spacing that
should remain inviolate and the aspects that you can safely modify. We will
compare the readability of ragged and justified type, and discuss how to choose
a line length. We will introduce the concepts of page composition in
conventional media, and discuss the visual and functional translation of those
concepts into new media.
Technical subject material, and nontraditional presentation media, have
strained the craft and the art of illustration during the last decade. We will
describe how to choose line weight, typeface, type size, shading, and color in
illustrations. We will discuss aspects that you need to consider when producing
an illustration for media such as single-color black printing, 4-color (CMYK)
printing, 35 mm slides, computer presentation, and video. We will discuss the
issues associated with the visual and functional integration of illustrations
into a cohesive document.
We will show how the principles of perception and reproduction explained in the
first several sections of the tutorial are combined with the classic elements
of visual design: ground, shape, size, texture, and type. Using examples from
graphical user interfaces, web pages, three-dimensional interfaces, and other
emerging interfaces, We will show techniques that work and techniques that
don't work; we will explain the reasons for their successes and failures.
Copyright © 1997-01-22
Charles A. Poynton
CHI 97 Electronic Publications: Tutorials
