12.  Color, Signs, Typography & Form
12.1. On the Use of Color
12.1.1. Basic Definitions & Understandings
12.1.2. Human Perceptions
12.1.3. Illusions in Color
12.1.4. Benefits of Color
12.1.5. Problems with Color
12.1.6. Guidelines for Design
12.1.7. Contrast
12.1.8. Conclusion
12.2. Typography
12.2.1. History
12.2.2. Type Structure Size & Measures Kerning Justification Whitespace
12.2.3. Illusion
12.2.4. Feeling & Rhythm Contrast
12.2.5. Layouts
12.2.6. Color in Type
12.2.7. Signs
12.3. Forms & Proportions
12.3.1. Color & Shapes
12.3.2. Psychological Properties
12.3.3. Depth
12.3.4. Conclusions
12.4. Assignments: Color
12.5. Assignments: Typography
12.6. Assignments: Forms & Signs
12.7. References

12. Color, Signs, Typography & Form

Not surprisingly there are considerable relationships between these subjects. Moreover, it is impossible to separate these subjects when discussing interface design. A single note does not make a musical composition, neither does a single color make a painting, nor a single letter a word, or a group of words a poem. The use of color, signs, typography, and form requires a visual perception of the whole composition of an interface, as opposed to relying on an understanding of the pieces. Furthermore, the psychic effect or human perception may differ considerably from the underlying physics. The designer of interfaces probably has more flexibility to deal with these areas than other types of designers in more traditional design work. Nothing is necessarily static on the computer and there is far more opportunity to either come up with rich creative designs or, conversely, to screw up completely!

Too often design is viewed as a process of following the past. For many years the only accepted place for the engine in an automobile was the front of the car because this is where the horse used to be. This led to much more complicated mechanisms to deliver power to the wheels than if the engine had been put in the rear. The ethic of design should be to accomplish the purpose for which the object intended. However, color, signs, typography, and form integrate into a single perception of both visual clarity and artistic quality of the design. Today all of these properties may be varied and tailored in the electronic document to create interfaces, multimedia material and data presentations.

Occasionally in the literature on these subjects one will find reference to the Bauhaus school of art in Wimar Germany. Many of the artists and designers trained in this school have developed some of the fundamental understandings of these areas that are utilized today. Many of the references quoted for this chapter are well worth exploring for further insight.

The main objectives of interface design is to relay as much information as possible and to do so in a clear and concise format which avoids ambiguity and minimizes information overload. The complementary objective is to do so in an artistically pleasing manner.

12.1. On the Use of Color
All colors will agree in the dark.
--Francis Bacon
Mere color, unspoiled by meaning, and unallied with definite
form, can speak to the soul in a thousand different ways.       
--Oscar Wilde (1854–1900)
The use of color can be a very complex process if one is concerned with such problems as: We will not be covering the specifics of the above topics as they deserve their own separate course and texts. Our intention is to provide enough understanding of color and its use to design interfaces that take advantage of color coding and avoid any significant misuse of color.

There is a great deal of difference between the physics of color and the perception of color by the human eye. For example, colors can appear different to the human eye as a result of the background color against which they are presented and as a result of the size of the colored area. Some combinations of color can cause virtual images and even dizziness for many people. Color combinations can make objects appear closer or farther, larger or smaller, and enhance or detract the ability of the eye to focus on an object. Sometimes, many colors and/or bright colors are used in an effort to look pretty, but after a short while become tiring to look at or confusing to read.

Early studies of color, which influenced guidelines established in the 1980's, were done on search and recognition tasks for colored lights on panels such as aircraft display panels. Although they are valuable, they did not sufficiently control the three factors of saturation, brightness and hue. It was not always clear whether hue was the only variable in the tests of color combinations. Furthermore the computer screen is far more variable in these dimensions than the situations that were the targets of these early studies.

In recent years, studies have been done on reading exercises on color CRTs. How color influences visual performance, in recognizing digits or reading, is not well known. However, some tests have shown higher error rates in colors at either end of the spectrum than those in the center. In recent tests where color combinations were tested with backgrounds of equal brightness (Matthews, Lovasik, Mertens, 1989), there was little difference in performance over a number of hours in any of the color combinations tested. Ultimately any color combination may be acceptable, given a large enough high luminance contrast, but desaturated color combinations tend to yield the best results.

Although a number of studies show that there is little difference in performance due to color, care must still be taken in design to ensure other components of display designs do not interact with color to influence performance. Since considerable research has been done in the use of color in graphics, guidelines for graphics are more specific than those for text.

It is believed that visual signals are processed by at least three separate processing systems in the brain, each with its own distinct function. These three systems process information separately with respect to: (1) color, (2) shape perception, and (3) movement, location and spatial organization. Color perception has low acuity and no depth perception, shape perception responds to color contrast, while movement and depth perceptions are color blind. For example, shading (for depth perception) need not be the same color as the object. Since these three areas are processed independently, we can consider them as parallel capabilities by the human cognitive process.

The spacing and arrangement of data (margins and layout) can have a relatively greater effect on CRT (Choice Reaction Time) reduction than color. However, the use of color for redundant coding does clearly improve overall performance both with respect to speed and/or error reduction. Similarly, in comparing shape and color coding in highly dense situation displays, it has been shown that the redundant use of color (in addition to shape) reduced both CRT and the error rate. Redundant coding is definitely productive in nature with respect to user performance. The same result has been shown in using colors together with blinking to grab the user's attention.

12.1.1. Basic Definitions & Understandings Color, in one sense, does not exist. The color of an object is determined only by which wavelengths of light are absorbed by the object and which ones are reflected back. An apple is red because it absorbs blue and green and reflects red back to the eye. Visible light, which is only a small part of the electromagnetic spectrum (e.g., radio, x rays, etc.) is composed of three major color bands: red (longest wavelengths), green (intermediate), and blue (shortest wavelengths). This was discovered by Newton in 1666. The combinations of these three colors that reach the eye are interpreted by the brain as a distinctive color. These three colors are considered, therefore, the primary or additive colors. These are the colors used in video and computer screens (e.g., "RGB" monitors). One takes a black (all the colors absorbed) computer screen and adds color to it. When one works on a white (all the colors reflected) surface, such as paper, pigment is added to the white surface to absorb colors. The subtractive colors are yellow, magenta, and cyan. When these are combined they produce black, just as the additions of the additive colors produce white.

Three separate dimensions or factors are needed to specify a color:

Hue is the gradation of color (i.e., red, yellow, green, blue, etc.) caused by differing wavelengths in different parts of the spectrum with red having the longest wavelength and violet the shortest. Hue is what distinguishes one color from another. Hue is a psychological variable version of wavelength, which is the physical variable.

Saturation (chrome) is the purity of color from gray to the most vivid. It is measured as the degree of difference from the achromatic light-source color of the same brightness. A color is fully saturated when it is at its maximum brilliance. Fully saturated pure color is rare in nature. Usually reflected light contains many colors. One can measure saturation perception by, for example, starting with gray as a neutral color and adding red until a person perceives the first hint of pink. This would determine the person's saturation discrimination threshold. Saturation refers to how much white is in a color. Pale colors, such as pastels, contain lots of white and appear desaturated; vivid colors contain little white and appear saturated. Common terms for characterizing saturation are: pale, deep, weak, strong or vivid.

Brightness (value) is the degree of light intensity or the relative amount of lightness or darkness. It is the color's reflectance property. Brightness refers simply to how light or dark a color appears. It is the most fundamental of visual contrasts. However, a human may perceive different brightness for the same color as a function of the background color. This is not simply a function of how much light it emits or reflects, but also the brightness of adjacent colors. This should not be confused with luminance, which is the objective measure. As a result, it is important to use equally bright colors when differentiating or selecting colors with the eye.

The above dimensions are formally referred to as the HSV Color Space (Hue, Saturation, & Value) and they are considered to be the most intuitive guide for those mixing colors. There are a number of other spaces that are used to specify color and there are unique transformations between these spaces. It should be clear that color composition systems that allow only the control of two dimensions are not going to provide total control over color choices.

On the average, people can name about eleven colors and the common names used are: white, gray, black, red, green, yellow, blue, pink, brown, orange, and purple. However, people can distinguish more than this. Some experimental work has estimated that there are about 35,000 elementary color sensations. Experts in the use of color often can distinguish more than 50 unique colors by name.

There are a number of approaches to setting standards for color categorization. These have been evolved for various purposes (painting, printing, film, etc.) and include:

RGB Color Space: This utilizes red, green and blue as the fundamental dimensions and is commonly used for additive color situations such as computer displays. The three dimensional space is characterized by the following points on a cube: black (0,0,0), red (1,0,0), blue (0,0,1), green (0,1,0), yellow (1,1,0), magenta (1,0,1), cyan (0,1,1), and white (1,1,1).

NCS Color Space: This is called the Natural Color System and utilizes hue, blackness, and chromaticness. It is based upon color pairs that define the "natural" dimensions: red-green, blue-yellow, and black-white.

People subjectively describe colors as having four primary colors (red, green, blue and yellow). There appear to be two separate pathways to the brain for color. One that is more sensitive to the red and green color and the other to the blue and yellow colors. A third pathway dealing with luminance is also indicated (black and white). These different pathways seem to be the resulting signal process from three different types of light receptors (cones) within the eye. The NCS color schema was designed to reflect this physiological understanding of color perception.

CNS color space: This is called the Color Naming System and it is based upon hue, saturation, and lightness. It uses numeric scales with specific points on the scales named as follows:

Saturation: grayish, moderate, strong, vivid

Lightness: very dark, dark, medium, light, very light

Achromatic hue names: black, very dark gray, dark gray, gray, light gray, very light gray, white.

Chromatic hue names: blue, (purplish-blue, blue purple, bluish purple), purple, red, orange or brown, yellow, green

Clearly the CNS approach was evolved to allow people who must speak about color to one another to have specific meanings for the terms they use. It attempts to remove the ambiguity in naming colors so that, for example, a graphic designer could specify quantitatively what a printer was to use and feel assured that the results would be the same as specified.

There are many other standard color spaces which reflect a given industry standard. For example. the YIQ Color Space used in the TV industry, and the CIE Color Space is a system based upon exact measurements (XYZ) of color phosphors used in computer displays.

12.1.2. Human Perceptions When it comes to humans the problem is further complicated by the fact that the conditions surrounding an individual such as the ambient light, texture of finishes, dust on a colored surface, orientation of the surface relative to the observer, and various illusions caused by the nature of the eye itself can lead to significant differences in perception of color.

Similar to most simple lenses, the lens of the human eye is not color corrected. This effect, called chromostereopsis, causes the different wavelengths of light corresponding to different colors to be focused at different distances behind the lens, forcing the lens to constantly re-focus to view different adjacent colors at the same time. The lens of the eye focuses wavelengths with the longer wavelengths focusing further back than the shorter ones. The more the eye muscles try to focus on colors far apart on the spectrum at the same time the greater strain on the eye. The can cause various types of illusions such as incorrect size differences or distance determinations. This can cause some colors to appear out of focus when another color is the primary object of the focus (called chromatic aberration). Trying to focus on red and blue simultaneous when there in close proximity is an example of this problem.

The human retina has photosensitive cells that translate all visible light entering the eye into electrical impulses. These impulses are then transmitted via the optical nerve to the brain. The brain then interprets the information it receives. The retina of the eye has two types of color receptors: rods and cones. The rods are primarily used for night vision while the cones are used for day vision. The rods will respond to a lower threshold of light than the cones and are utilized for night vision where the light level is too low to provide any color distinction. When a person makes a sudden change from a light to a dark situation it takes time for the changeover of vision to occur. Rods are more sensitive to higher frequency (shorter wave length, red) light and cones are more sensitive to lower frequency (longer wave length, blue) light.

The center of the retina has the highest density of receptors and a greater proportion of rods. This results in the yellow and reds being more recognized at the center and blue on the peripheral. This, for example, makes focusing on small blue objects difficult. We would not, as an illustration, use blue as a type font color. This is common mistake found on the WEB. If one must use blue it should be a blue-black that was commonly used for pen ink. The cones which are most sensitive to color but require more brightness are distributed in color sensitivity according to 64% for red, 32% for green, and only 4% for blue. There is so much blue (the sky and large bodies of water) that evolution has seemed to give us a physiological ability to prevent the eye from being attracted to blue.

With age the lens develops a yellow coating which filters shorter wavelengths reducing blue detection. Also, the fluids in the eye become less transparent causing colors to become less vivid and of lower perceived brightness. Older people need higher brightness levels to distinguish colors.

More than 8% of males and less than 1% of females have some kind of color perception deficiency. The most common color deficiencies are:
* Protanpopia: causes a person to confuse red and orange with yellow and green.
* Dueteropia: inability to distinguish between gray and purple.
* Trianopia: confusion of green and blue and gray with violet.

The same color may appear different to two different individuals. Furthermore, the brain may impose certain emotional reactions to color in a specific context. We expect certain objects to have certain colors like the normal colors of ham and eggs. However, if the ham and eggs presented to us turns out to be green, it could well be that some people would have a strong negative reaction toward the possibility of eating that food. Experiences and culture influence our reactions to colors. While white clothing is associated with weddings in the West, it is associated with funerals in the Orient.

It was Goethe, the German poet (1747-1832), who evolved the first version of the artists color wheel as an investigation into determining the psychological color ordering as opposed to Newton's linear wavelength ordering. His color wheel had six equal divisions of color: red, orange, yellow, green, blue, and violet. His interpretation of these colors was:
Red:  The color of imagination, it evokes a festive mood and is the color of heroes (e.g., blood), the  mother color of earth tones.
Cyan:  The compliment of red, is the color of the sky, is on the edge of coolness and warmth. It is a quiet color.
Green: It is often associated with forest and nature.
Magenta: It is the complement of green and does not often appear in nature. It is an unhappy color and related to royalty and the church.
Blue: It evokes a quiet mood and is suggestive of understanding. It expands space (e.g., sky and ocean).
Yellow: It is the happy color, the closest to sunlight and suggests a happy and intense mood.
Goethe also produced an equilateral triangle of colors containing nine interior colors with the primaries red, yellow, blue at the corners, the secondaries on the outside, and the tertiaries on the inside. He then attributes the following emotional "sets" of colors:
Lucid: red, orange, yellow
Serious: red, purple, blue
Mighty: red, orange, purple
Serene: orange, yellow, green
Melancholic: purple, green, blue

While the specifics of Goethe's interpretations vary with culture and time, the relationships of color, as exhibited by the modern versions of the color wheel, is the basis of artistic use of color.

12.1.3. Illusions in Color As an experiment, take three containers of water which are the following temperatures: warm, lukewarm, and cold. First put one hand in the warm and one hand in the cold container. Then take them out and put them in the lukewarm container. In the same container one hand will feel warmer and the other colder relative to their prior sensation (i.e., hepatic illusion). Color is very much the same way. Two color squares exactly the same can appear very different depending on the background color against which they are viewed.

Stare at a single spot in an area of red for some minutes, then quickly shift the focus the eye to an area of white. Those with normal vision will perceive green or blue green instead of white. This green is the complementary color of red or red-orange. This is called the illusion of after-image, or simultaneous contrast. One explanation is that by fatiguing the red sensitive parts of the eye, the sensitivity to yellow and blue is heightened which results (through) mixing a perception of green. No one is insulated from possible color illusions in perception and the artist makes constructive use of these illusions in the creation of works of art.

A white square on a black background will look larger than the same sized black square on a white background. Brighter colors reach out an overflow the boundaries as perceived by the eye and darker colors, on a relative bases, contract. A yellow square on white looks darker with an emotional effect of warmth. The same yellow square on black acquires extreme brilliance and cold, aggressive expression. The colors of red and blue also placed upon white and black backgrounds have related impacts. Warm tones appear larger than cool tones.

Cool and light tones appear lighter and less substantial. Warm and dark tones appear heavier and denser. One can actually modify the apparent weight of an object by the color it is painted. If one watches a silver colored plane take off and exactly the same plane pained a camouflage drab gray, it will appear that the drab gray plane had to work much harder to get off the ground.

Contrasting stripes, such as the Zebra has, make it more difficult to judge changes of speed in the motion of the object. This pattern was used on some World War I battle ships to cause humans to misjudge firing ranges. Many tropical fish species depend on this sort of color camouflage to confuse predators. This sort of illusion can be quite significant in a game or where rapid animation is involved such as the simulation of a physical process. Sometimes the colors we use to try and depict different speed contours in water motion, or some other simulation situation, can make it more difficult to observe what we wish to make visible.

The greater the contrast between two colors that are brought into contact the greater will be the effect of the contrast. We perceive a contrast that is actually greater than the one present. The maximum condition occurs when one color surrounds another. This is called the illusion of simultaneous contrast in that both the tones brought into contact are affected. When one chooses a color in isolation and then puts it into a picture the result can appear different from the original choice. This illusion applies to value, hue and intensity contrasts. A good color choice system for users would allow them to test colors within combinations with other colors being used. The current systems that merely give users a series of color squares to choose from are clearly meant for only those users who do not really understand color.

Colors have both spatial and vibration or motion illusions. When the six hues, yellow, orange, red, violet, blue, and green are placed next to each other on a black background, the light yellow appears to advance and the violet lurks in the depth of the black background. If the background color is white, it is the violet that seems to advance while the yellow sinks back into the background. The other colors are in-between in their effect. In fact, it was discovered in 1915 that the depth perception of the six fundamental hues on a black background conform the ratio of the Golden Section in their gradation of depth. The Golden Section ratio for two line segments is the same ratio for the sides of the Golden Rectangle which we will discuss later. The Golden section of a line can be defined as the proportion given by dividing a line at a point such that the shorter part is in the same proportion (r) to the longer part as the longer part is to the whole:

Golden Section Condition: r = b/a = a/(a+b)

which results in: r*r+r-1=0 and r=.618

For example, the depth perception from yellow to orange relative to orange to red follows the Golden Section.

The quantity of color, both in size and repetition or recurrence, creates differences in the "temperature", tempo, or rhythm of a color composition. A related effect is the volume of a color. For example the color of coffee in a mug or in a glass appears as a very different brown. Mountains in the distance will take on the blue of the sky regardless of whether they are covered with trees or bare rock. Water colors are volume colors in that added layers increase the darkness, weight, and intensity of a color; while oil pigments are surface colors and do not change because of layering. The ability to vary brightness on a CRT means that CRT colors are volume colors, more like water colors than oil colors.

An additive mixture of colors (using light as in a projector or CRT) and the subtractive mixture of colors (mixing paints) can lead to very different results when attempting to arrive at the same color. An optical mixture usually means the loss of less light than a mixing of pigments. A subtractive mixture is not as light as the lighter of the color parents, nor as dark as the darker one. Lighter colors can appear to be closer than darker ones leading to a space or distance illusion.

As with others senses (e.g. sound, temperature) people cannot easily perceive an equality of changes in the underlying physical variables. One must make logarithmic or geometric progressive changes for individuals to be able to detect differences in stimulus. These sensation changes follow the original Weber-Fechner Law:

The visual perception of an arithmetical (linear) progression depends upon a physical geometric (non linear) progression.

If one looks at the steps going down into a swimming pool painted blue, one can not easily distinguish the edge of the steps farther down. While the increasing blueness is proportional to height, our perception does not detect enough distinction farther down in depth provided by the single step interval.

Two colors can also become one color to the eye (Bezold effect). This was quite commonly utilized by impressionist painters. Green could be produced by yellow and blue in small dots being applied to a canvas. This illusion is at the heart of the 3 and 4 color process for printing.

A group of colors that appear to go well together are usually termed as being harmonious in nature. Usually such combinations look pleasant, even artistic, and tend to minimize the types of illusions that produce after images and other types of visual tension. While we provide below some suggested harmonies, such recipes, like any good dish, demands tasting and perhaps some adjustment in a given situation.

12.1.4. Benefits of Color The primary benefits of color are: The potential disadvantages of color are: Color can call attention to an object for the benefit of a user. The sudden appearance of red on the screen when it has not been part of the current screen can cause a human to immediately perceive that a change has occurred. Color can be used to have an object "pop out" of the screen, if it is distinctive from the other colors used on the screen. Just as an oblique object (or italic word) will pop out among straight objects.

Color can be used for additional coding such as to identify similar elements in a complex display. For example, for a presentation of water flow in a model of a river system, different colors can be used to represent different speeds in the flow of the and/or different degrees of turbulence. In this example we are utilizing color to present what the human eye cannot normally perceive from a realistic view of the situation. We do this also on maps to represent elevation or other geographical properties..

Color can be utilized to make objects appear more realistic. Clearly in many areas of design, such as interior decorating, the results are not entirely meaningful unless presented in color.

Color can be used to display and convey emotion such as the warning of 'red' and the OK to proceed of 'green.' A person may be 'feeling blue,' or 'green with envy,' or so angry that they are 'seeing red.' Red can mean both stop and it can mean take immediate action, or it can mean 'hot,' 'dangerous,' or 'on' (rather than off). However, the meaning of the color can vary according to the object it colors. While blue and green, are in general an attractive color, if we apply them to food, specifically meat they give and impression of mold and putrefaction.

The most exciting color is red. Violet and blue are the most subduing; green the most tranquil and neutral; yellow the most cheerful. The favorite color of most women is red; most men prefer blue. Blue is also a favorite of older people, probably due to the fact that as we grow older the lens of the human eye grows yellowed. Yellow filters out blue light. The lens of a child may filter out only 10 percent of the potential blue light, but the lens of an elderly person may absorb as much as 85 percent. This makes blue more unusual and attractive to the older person.

Colors of greatest appetite appeal, useful in food advertising, are orange, clear yellow, vermilion red, light green, tan, and brown. In the spring of the year, tinted and pastel colors have great appeal. While in the autumn, the public taste shifts to the richer shades of red, green, brown, or purple. Highly styled merchandise usually calls for unusual hues, while volume merchandise is moved with primitive colors like red, blue, green, and white. Dark colors tend to make objects look heavier and closer; lighter colors tend to make things look lighter and more distance.

Color can be very useful as a redundant coding scheme. For example, in a large desktop with many icons, one might use a specific color to indicate which icons have files attached. Colors could designate the age of the icon or document since last used. The association of age and the fading/darkening of colors is almost intuitive in the human mind since it reflects the process in nature. New documents would appear white, older yellow, and older yet light brown (paper yellows and darkens with age).

Color does enhance appeal and the artistic look of screens. This does affect, at least in the short term, the reactions a user has to a system. If the color of an item to be located is unique and known ahead, then the speed of location and recognition can be 200% greater than that for black and white recognition of an object.

There are some aspects of color that are independent of language and seem to be common to a wide range of cultures. Related to different conceptual notions in different languages are day and night (white and black), fire and blood (red), the sun (yellow), vegetation (green), the sky (blue), water (blue), and the ground (brown). Both fire and blood bring and association of danger (stop for red) and green means "food" or the concept of proceed (go).

Universal Color Codes

Color Associated With Meaning
Red Blood, Fire Danger, Heat
Yellow Sun Warmth
Blue Water Cool
Green Young Leaves Life, Youth
Brown Dead Vegetation, Earth Age, Death
Paler Colors Atmospheric Haze Distance

More specifically in western culture we have the following common color meanings

Common Western Red Color Codes

Field Red = Related Color Associations
Finance Loss Black = gain
Politics Radicalism  
Traffic Signs Stop Yellow = caution
Green = go
Safety Danger Yellow = caution
Green = safety

Furthermore there are efforts to arrive at color standards such as those recommended by the American National Standards Institute (ANSI)

ANSI Color Sign Recommendations

Color Meaning
Red Danger, Stop
Orange Dangerous Parts or Components
Yellow Caution
Blue Non-safety Messages
Green Safety
Black on Yellow Radiation
Black on White Traffic Markings

The more widespread cultural norms are contained in the following table.

Wide Spread Cultural Norms

Culture Red Yellow Green Blue
European & Western Danger Caution, Cowardice Safe, Sour Masculinity, Sweet, Calm, Authority
Japanese Anger, Danger Grace, Nobility, Childish gaiety Future, Youth, Energy Villainy
Chinese Joy, Festive Occasions Honor, Royalty    
Arabic   Happiness, Prosperity Fertility, Strength Virtue, Faith, Truth

  12.1.5. Problems with Color Color requires more expensive equipment and can get quite costly for large screen displays with high resolution. The variability in the actual color produced on a given screen can be quite large. Also, there is no low cost device for measuring and standardizing a color other than the judgment of the individual human being. Currently such devices are over a thousand dollars.

When one is dealing with motion on the screen such as in the use of animation, the colors and the patterns of the color introduce a whole new category of problem. Motion of any sort can interact with the properties of color and even the way users carry out an interaction might result in color problems that were unanticipated by the designer. While artists make use of many of the types of color illusions to create great art, interface designers do not normally have that training and expertise.

Color aesthetics include at least two other dimensions besides impression (visual). There is expression (emotional) and construction (symbolic). In some cultures color signifies status. For example the Roman Catholic Church hierarchy has colors that distinguish rank: cardinal crimson and papal white. In China, yellow was the color of the emperor and only he could wear that color. Color has historically signified strata, mythological meanings, and religious ideas. While there are many cultural differences there are also surprising cultural similarities.

White is used for funerals by the Chinese and for Weddings in the West. However, the meaning for the Chinese is that white signifies kingdom of purity and heaven to which the dead are going. Somehow, the underlying symbol of purity and white are the same for both. In most primitive languages the color to evolve after black and white enters the language is red, the color of blood.

Color can easily be misused if guidelines are not followed carefully. Complexities of adequate color use are due to deficiencies in color perception and differing emotional response to colors. Moreover, bright colors seen for a long period can easily cause fatigue. What may first appear to be pleasing to the eye can become extremely bothersome with prolonged usage. This results in a number of conservative guidelines for color design which can keep a designer, who is not an artist, from making a serious mistake. Meaningless introduction of color to an interface can reduce user performance to about one third of what it is with only black and white.

12.1.6. Guidelines for Design Design first for monochrome and evaluate that design before adding color. It is far easier to detect certain problems such as cluttering when you view a design in blank and white. Also, this will be the perception of the system by those that have complete color blindness. Avoid distinctions based solely on color only and treat color as a redundant coding scheme. Clearly, there are some applications where this is not possible such as the viewing of complex graphics and animation presentations. In those situations there should be some form of user controls to vary the color combinations on an individual user basis.

Use colors conservatively, generally 4-5 colors, at most 7. One of the best color sets are red, yellow, green, blue and white (with good two color pairs of red/green and yellow/blue). Do not use more than one highly saturated, spectrally extreme color on the screen at the same time. When a number of such colors are used at the same time the eye needs to take time to refocus as it scans from one to the other.

Even though we can discriminate many thousands of different colors, the number that we can identify absolutely seems to be about eleven for the average individual. If someone is an expert on color (e.g., an artist) this number can be increased to about fifty. Once again a design system for an artist and non-artist differs considerably in requirements just for this single dimension of color. The need to simultaneously distinguish colors is apparently limited by short term memory so that if the user is making associations between colors and semantic concepts the limit is seven.

An eleven color set that allows colors to fall into separate linguistic categories for chunking is:

white, gray, black

red green yellow

blue, pink

brown, orange, purple

However these eleven colors, which are rarely confused by humans, can also sometimes make a display look somewhat garish.

Code colors in spectral order (ROY G BIV). Given objects of the same size, the color can make an object appear closer or farther according to spectral wavelength. In the following common coding red, orange, and yellow objects would appear as being to the front, green objects would appear as being in the middle and blue, indigo, and violet objects would appear as being at the back. This is provided the colors had the same hue and saturation and the objects were similar in size. The continuum from closer to farther appearance is as follows:

red, orange, yellow green, blue, indigo, violet

For the color coding of information maintain adequate hue difference. Some recommended hue combinations for 5 to 8 colors to use in coding are:
5: red, yellow, green, blue, white
6: cyan, green, amber, red, magenta, blue
7: cyan, green, yellow, orange, red, magenta, blue
8: cyan, green, yellow, orange, red, magenta, purple, blue
Hue, saturation, and luminance differences may be used to obtain a set of colors that contrast maximally. Using colors that differ in both chromaticity and luminance means that a color deficient individual stands a good chance of being able to distinguish the resulting color code. If one has a three dimensional color space that is perceptually linear in nature then one can utilize distance between the colors as a meaningful measure of contrast. An example of such a set using RGB coding is:

Color Name
Reddish purple
Yellowish green

A design should work in black, white, and shades of gray before applying color or no color combination will be any good. The basic tool for a designer is a good color wheel. The primary colors in a color wheel are: red, blue and yellow. The secondary colors are: green, orange, purple. Going around the Color Wheel we have the colors in the following order: red , purple, blue, green yellow, orange. Complementary colors are pairs of colors arranged opposite (a primary and a secondary: red with green). Placed side by side, these cause vibrations.

Your screen color is obtained by mixing red, green, and blue light (RGB) and are additive. All three together forms white. On paper pigment is an opaque substance that absorbs light. Since each pigment takes away color this is a subtractive process. The subtractive primaries are cyan, yellow, and magenta (CYM). All three together produces black. This leads to considerable difference between what you see on the screen and what you may produce on a color printing device. For consistency you have to develop a Palette of colors and compare their screen appearance to the final form.

Colors that sit next to each other in the color wheel are spectral neighbors (blue and green, red and orange, yellow and green). These pairs can be used for shadowing or to suggest dimension, low contrast situations. Avoid these when you need a distinct visual boundary between touching colors. Colors opposite one another on the color wheel are far apart visually and if they are fully saturated and placed side by side they will appear to move or vibrate. If two such colors need to touch, one should reduce the saturation of one of them and/or use a thin white or black line to create a boundary between them.

A triad is three colors equally spaced around the wheel (use of an equilateral triangle) and they are usually quite pleasing to the eye (blue, red, and yellow; or orange, green, purple). Any equal sided figure (square, pentagon) will give a set of pleasing colors if inscribed within the color wheel and rotated to any position. Another rule to determine the harmony of colors is that two or more colors are mutually harmonious if their mixture yields a neutral gray, complementary. One also obtains harmony by ordering colors in their actual application by hue.

Use foveal (central) and peripheral colors appropriately. Blue should be used for large areas (like the sky). Red and green is best at the center of the screen or visual field. Black, gray, white, yellow are also good peripheral or large area colors. However, do not use adjacent colors that differ in blue, black, yellow, as this difference can only be detected in the peripheral of the retina and will cause the boundary between two such colors to appear to be fuzzy. Instead use adjacent colors that differ significantly in hue and value. Clearly, one would also not use peripheral colors, such as blue, for thin lines or text. Edges can be made quite sharp with the use of neutral colors (i.e., gray, black, or white) to outline images.

Use colors that exhibit minimum shift in color due to size if the colors change in size in the imagery. Size influences the perception of value and chrome. In dark viewing situations, present text, thin lines, small shapes in light colors (white, yellow, or red) on medium dark backgrounds (blue, green, dark/dull red, dark gray). In bright light viewing situations use dark colors such as black or violet, for text, thin lines, small objects on light backgrounds (white, light gray, light blue, light green, etc.). In both situations chose the highest contrast combination for text and the background it is on. A bright red object will always seem larger than the same object in a cool blue. Avoid saturated red and blue in conjunction as this combination will produce changes in other neighboring colors.

When displaying a chart containing just a few colors, the complement of one of the colors should be used in the background. With an image containing many different colors, a neutral (gray) background should be used. A neutral or muted color for the display background will minimize interference with the subject matter.

Simultaneous use of high-chrome spectrally extreme colors cause vibrations, illusions of shadows, and after images. The color combinations to avoid in any sort of repetitive pattern or large adjacent areas are: red/green; blue/yellow; green/blue; and red/blue. For some people these combinations can actually induce dizzy spells and after images can persist for hours after being on the screen. This phenomenon can further be worsened in animation situations.

Always allow users the ability to adjust the use of colors or to request a monochrome version of the screens. Somewhere between 8% and 12% of the males and between 1% and 2% of the females in the U.S. suffer from some form of color deficiency (these are based upon U.S. population studies). If you impose a fixed set of color choices you may be denying use of the system to these individuals. Furthermore older people need much brighter or higher contrast situations then do younger ones.

Take advantage of existing color codings that your audience already uses. There are many general color codings in the society at large and some specialized one for specific professions. Among these are:

General Codings

Color Common Meanings
Red Stop, danger, hot, fire, excitement
Yellow Caution, slow, test
Green OK, clear, vegetation, safe, normal
Blue Cold, water, clam, sky
Grays, white, black, blue Neutrality
Warm color/hues: red orange, yellow Action, response required, emotional, comedy, recreation
Cool colors/hues: green, blue, violet, purple, gray Status, remoteness, tragedy, romance, efficiency, work, status
High illumination Hot, active, comic, emphasis
Low illuminations Emotional, tense, tragic
High chrome Emotional, tense, hot, comic
High value, high chrome Attention getting
High contrast Grouping differences
Example of exceptions: Blue Movie audience: tenderness

Health care workers: death

Financial managers: reliability

Power industry workers: coolness, water

Yellow is the most light giving all hues. To see the "light" means to detect a hidden truth or to say someone is bright is to credit him with intelligence. So yellow pertains symbolically to understanding and knowledge. However, the expression of diluted yellow are envy, betrayal, falseness, doubt, distrust, and unreason. Just as there is only one truth, an adulterated truth is untruth.

Red is dense and opaque and filled with an inner warmth. The warmness of red is intensified to fiery strength in red orange. Red-orange light promotes plant and biological growth. However proper contrasting turns red-orange in an expression of feverish, belligerent passion (war, demons). Red orange also designates physical love, while blue-red conveys spiritual love. In purple, temporal and spiritual power are united. A color like red-orange is extremely sensitive to background:

Red-orange Backgrounds

Background color Impression
Orange Smoldering, dark and lifeless
Black Unconquerable, demonic passion
Green Imprudent, rash, loud and common
Green-blue Blazing fire
Cold-red Subdued glow, active resistance

Blue is always passive. Blue is contracted, introverted and associated with the nervous system. Blue is always shadowy, it beckons our spirit. When blue is dimmed, it falls into superstition, fear, and grief.

Green is the intermediate between yellow and blue. Green changes depending on how much yellow or blue it contains. Green is an expression of life and of growth. Tranquillity, hope, fruitfulness are expressive values of green. When it is dulled by dulled by gray, a sense of sad decay results. When green takes on a yellow component it indicates spring and the force of nature. If green takes on blue it becomes more spiritual.

Violet is the color of the unconscious, mysterious, impressive, and sometimes oppressive. Shades of violet are difficult to distinguish for most people. Violet can also signify chaos, death, and exaltation. Blue-violet signifies divine love and red violet signifies spiritual dominion.

Some of the common models used for emotional color combinations are:

Complementary pairs

Color pair Impression
Yellow : violet Bright knowledge : dark, emotional piety
Blue : orange Submissive faith : proud self respect
Red : green Material force : sympathy

Mixed Colors

Color Mix Impression
Red + blue = violet Love + faith = piety
Red + yellow = orange Power + knowledge = proud self respect
Yellow + blue = green Knowledge + faith = compassion

A summary of the use of color in the American English and the connotations that different colors seem to convey are presented in the following table.

Color in the Language
(Dreyfuss, 1972)

Color Positive Association Negative Association
Red Blood (life), fire (warmth), passion, sentiment, valor patriotism, revolution, Christ, liberty. Pink: color of the flesh, sensuality, emotions, red letter day, paint the town red. Blood (spilled), fire (burning), death throes, and sublimation, wounds, surging and tearing emotions, passions, war, anarchy, revolution, martyrdom, danger, the devil, red herring, seeing red, scarlet letter and woman, in the red, red tape.
Orange Fire and flames, marriage, hospitality, benevolence, celestial fruit, pride and ambition, earthly wisdom. Malevolence, Satan
Yellow The sun, light, illumination, dissemination and comprehensive generalization, magnanimity, intuition, intellect, supreme wisdom, highest values, divinity, ripening grain. Treachery, cowardice, Saffron: Debauchery, malevolence, impure love, yellow dog, yellow journalism, yellow strip (coward).
Green Vegetation, nature, fertility of the fields, sympathy, adaptability, prosperity, hope, life, immortality, youth, freshness, auspicious, recognition of soul wisdom. Death, lividness, envy, jealousy, disgrace, sinister, opposition, moral degradation, madness, molding and decay, green with envy, greenbacks, green and greenhorn (inexperienced).
Blue The sky, the day, calm sea, thinking, religious feeling, devotion, innocence, truth, constancy, justice, charity, cold. Dark blue connotes night and the stormy sea; doubt and discouragement, feeling blue, Blues (music), blue laws, blue blood.
Purple Power, spirituality, royalty, love of truth, loyalty, empire, patience, humility, nostalgia, memories Sublimation, martyrdom, mourning, regret, penitence, resignation, humility.
Brown The earth Barrenness, poverty, brown-out, done brown (swindled).
Gold Mystic aspect of the sun, majesty, riches, honor, wisdom. Idolatry
Silver Purity, chastity, test of truth, the moon, money.  
White Day, innocence, purity, perfection, rectitude, wisdom, truth, white of you, peace, truce. Spectral, ghostly, cold, blank, void, white feather or flag (surrender).
Gray Maturity, discretion, humility, penitence, renunciation, retrospection. Neutralization, egoism, depression, inertia, indifference, barrenness, winter, grief, old age, penitence.
Black Mighty, dignified, stark, sophistication, regality, fertilized land, grim determination, night, solemnity, humility. Morbidity, nothingness, night, evil, sin, death, sickness, negation, blackball, black mail, black sheep, blackout, black eye.

Until only recently black was not used to package any food items because of its many negative connotations. Green is never used with meat and dairy products because of the connotation of decay and mold. There is a great deal of concern by individuals as to the colors that go into their clothes, their homes, their cars, and the associated furnishings. One should not ignore the psychological implications of color in interface design.

Use color consistently. Where it is appropriate, design an explicit coding for the use of color. People unconsciously code colors and may well make a cognitive assignment the designer is not expecting.

The widest variety of foreground colors is with blue or black for the background. Black is slightly better. Generally one can use any cool or dark colors for background. The poorest dark background colors, on a relative basis, is brown and green. This may be because of their natural occurrence in vegetation and their function in nature to camouflage objects.

Unpredictable color layouts can lead to difficult situations for the user. There are many situations where the designer has no control of how objects will actually be laid out in the interface. Colors of equal brightness and little contrast are hard to distinguish (e.g., brown and black). In communicating complex information, shades of gray may be better than using too many colors (e.g., more than 10). A lot of colors create puzzle like patterns. Higher error rates occur in recognizing fine details using colors from either end of the spectrum when compared to colors from the center of the spectrum.

Any color combination may be acceptable given a sufficiently high luminance contrast. Desaturated color combinations tend to yield the best results. Any dark text color seems to be satisfactory with high luminance contrast of the background color. Almost any combination of text and background can be suitable as long as there is adequate luminance and/or chromatic contrast (Contrast modulation of 50%). Avoid overlapping or adjacent regions of highly saturated colors.

Color can add perception of five additional category dimensions. Structuring techniques such as a prominent location of key information and grouping logically related data improves performance in any interface situation. Shape and color go together well as redundant and or complementary coding. For example, to aid users in distinguishing among a large number of icons in their work space, the use of shape and color to mentally group icons together, regardless of their position of the screen, can be very useful. Shape might be a way of grouping icons into five different categories (e.g., rectangle, triangle, circle, etc.) and the color of the icon might denote its current status in the task the user is engaged. Both color and shape coding are equally beneficial to object recognition, but subjects find color more pleasing. The use of too many colors in a single screen can become quite confusing to the user. Brightness may be used for additional coding but probably it is limited to no more than three levels for the same color.

Color coding Guidelines:

Coding a hierarchy or a progression of data is an example of expressing a linear relationship by value and/or saturation level. Dark to light or gray to bright sequences can indicate increasing significance. Other examples of color coding are: changes to a document, elevation, population or density, speed of a current or air flow, degree of turbulence, age of an object, types of Hypertext linkages (by coloring the anchors), coloring the levels of a program or a document, etc. The color red is used to represent highest elevation in a map and green the lowest with smooth hue translation in between. Blue of course is reserved for water. Use color for redundant coding and design for monochrome first. Attempt to discover the color coding familiar to your type of user.

Recognize the power of color as a coding technique. Color speeds recognition for many tasks, and is more effective than texture encoding. This must be done carefully because color-coding can inhibit performance of tasks that is not in line with the coding scheme. For example red coded text will stand out over non-coded text. It could be used to bring attention to exceptions such as over due books, errors, pressure too high or speed to fast. But if used for less significant items it might detract from the attention the user should pay to other items. Except for exceptions color coding should be complementary to the use of other cues such as shape, location, pattern, or sound.

Ensure that color-coding supports the task. There should be a close linkage between the users' task and the color-coding.

Have color-coding appear with minimal user effort. The coding should be automatic based on the user request, not the program itself, i.e. the color-coding should take place when the user requests display of an exception.

The brightest or lightest element in a dark area will attract the eye first. This can only be used if only one item is enhanced in this manner. The ease with which one can see small items depends on the contrast between the color of the item and the background. Black and white has the highest contrast and it is why we usually have black text on a white background for documents. On a screen, a pure white background can become too bright and then fatigue may set in. A very light gray would be a better choice than pure white. Reduced contrast is needed for reduced fatigue and increased contrast is needed for greater visibility. Even with colors the designer is always faced with having to make tradeoffs.

The role of the background is to recede, clarify and focus the foreground elements. Foreground can be represented by lighter shades of gray and background by darker shades of gray. One can make a background object show through faintly by making the object in front slightly transparent. Also the use of shadows can indicate depth or height (flat drop shadow, graduated shadow, 3-D shadow).

The eye is more sensitive to changes in lighter shades of gray than it is to the same amount of change in darker grays. People can distinguish roughly five shades of gray in addition to the end points of black and white. Clearly the divisions between the shades can be smaller for the lighter shades and need to be larger for the darker shades.

Use color in graphic displays for greater information density. The usual strategies for differentiating lines in black-on-white graphs--such as dotted lines, thicker lines, and dashed lines-are not as effective as a separate color for each line. In graphs with multiple plots, color can be helpful in showing which line segments form the full graph.

It is difficult to focus on edges created by color alone. Demarcations in color should be made in conjunction with changes in brightness as well. A thin black line between the opposing colors will serve to further delineate them. Clearly one should avoid boundaries between colors opposite one another on the color wheel.

Avoid color coding small objects. It is difficult for the eye to discriminate small areas of color in a multiple color environment. This is one reason why the color coding of words used as Hypertext anchors can be confusing to the reader. For fine detail one should use black, white, and gray. Surround objects in a neutral color or complementary color.

For applications involving significant non redundant use of color it is important to check the performance of the color monitor and the surrounding lighting conditions. The quality of monitors and color accuracy varies considerably. The same color layout on different monitors can differ widely. Saturation is the factor that is typically adjusted to promote viewing comfort. As color performance of advanced monitors expand there may be more automated techniques for using color. But one must still pay attention to color and designing for clarity in presentation. While blue on red on a printed page may be difficult to read, the same colors on a CRT with adequate luminance may not be as difficult. One must take into consideration the capabilities of the CRTs for which the system is being designed, the symbols being used and the application, to be sure that colors are used effectively and aid people in their use of computer systems.

The literature and experiments in the MIS field on using color to support analysis and decision making has shown the following outcomes:

However, in actual practice color is often used incorrectly and the results are often surprisingly counterproductive. Using different color on parts of a display can confuse the user if it is not absolutely clear what the different colors mean. Certain stand-out techniques may get the reader's attention, but is it clear what the color means once the reader's attention is captured? Color can distract from content and can in fact mislead if used incorrectly. Even in a pie chart the wrong use of color combinations can make something appear bigger than other items than it really is. As a result we have to recommend that the guideline should be to: Use color conservatively. 12.1.7. Contrast The essence of conveying a signal to the user by the use of color is the use of the concept of contrast. There are seven different forms of color contrast:
1. Contrast of hue
2. Light-dark contrast
3. Cold-warm contrast
4. Complementary contrast
5. Simultaneous contrast
6. Contrast of saturation
7. Contrast of extension

Contrast is, in effect, the essence of any coding scheme. Clearly the most popular is contrast of hue and it is common in the folk art of most cultures. Light and dark contrast is much more available to us on a computer screen than it is in most other forms of color. In painting, for example, it is more used to express the presence of light through gradual contrasting of light and shadow. The cold-warm property can be verbalized in a number of contrary terms:

cold warm
shadow sun
transparent opaque
rare dense
airy earthy
far near
light heavy
wet dry
sedative stimulant

The strongest cold-warm contrast is blue-green to red-orange. Of all the seven color contrasts, the cold-warm contrast is considered the most sonorous and is often used instead of light-dark in such things as stained glass pictures.

Two colors are complementary if their light sources mixed together form white, or if pigments they form neutral gray-black. They are opposite one another in the color circle. Complementary colors used in the same proportion give an effect of static fixed images. They tend to convey stability. Each complementary pair has its own properties. For example, yellow/violet represents both complementary and light-dark contrast. Red and green is a pure complementary contrast. This type of contrast is fairly common in nature and many flowers exhibit this combination of colors and of course all red flowers with green stems and leaves.

Simultaneous contrasts results from the fact that for any given color the eye simultaneously requires the complementary color. This is an illusion that generates instability and tension. It can be used to convey excitement. This effect can be gotten by using two non complementary colors together or taking a rich primary color with a gray background. A red error flag on a gray background with no close green is a great error indicator to shake up the user. Note that red used for error flags with green near by might not be noticed.

Saturated colors are diluted by mixing them with white or black. The most saturated or pure colors are the "florescent" tones. The effect of the "dull-vivid" contrast brought about by saturation dilution is a relative effect. Vivid colors can be used to set off and highlight areas of dull colors in some situations. The use of florescent markers to mark documents is an example of this contrast. Providing people such marking capability on a CRT is not yet a standard feature but will become one when multiple selection and typing of selection abilities are introduced. In a graphic of ideas and concepts one might use such contrasts on the boundaries of the boxes to type the status of the ideas.

One can arrive at relative areas that different colors should take up in order to balance the contrast between the colors. This is contrast by extension. Goethe estimated a scale using pure colors on a neutral gray background of medium brilliance:

yellow : orange : red : violet : blue : green:
9 8 3 4 6

For example, yellow to violet is 9:3 or 3:1. Therefore violet must occupy three times the area that yellow does for the two be in a balanced contrast when they have the same purity. Yellow has three times the strength of violet. One could use this to provide a bit of intelligence for helping users design pie charts and other such display graphics. Using these proportions provides produce areas that are static and quite. When one violates these ratios and allows one color to dominate the results can be extremely expressive. It is the color in the minority position that will gradually exert itself and appear concentrated and provocative.

12.1.8. Conclusion One can expect a great deal more will be done with color in the future as better tools for the designer are made available to not only control color but also to standardize it and establish compatibility between different output devices. This will be provided to the user because of demands of color publishing by users. While color should largely be used in a redundant nature for normal interface situations, this redundant use can improve the performance of the user. The growing use of both multimedia and animation will require greater care in the use of color for future designs.

Understanding the performance of users in complex tasks involves the degree of informational complexity, the task or problem complexity and the form of the presentation. It is almost impossible to conduct empirical studies that can conclusively factor out all the variables so one can determine what is the dominant factor. As a result many formal evaluation studies have led to inconsistent and inconclusive findings. The guidelines we have covered in this section on color are the findings that can be tested in isolation and not in combinations among a wide range of the involved variables. As a result a great many choices that a designer might need to make in more complex situations will ultimately be of an artistic nature and could very well require the aid of someone with formal training in artistic design.

12.2. Typography
"The ART OF PRINTING diffuses so general a light, augmenting
with the growing day, and of so penetrating a nature, that all   
the window-shutters, which despotism and priest craft can       
oppose to keep it out, prove insufficient."                                   
-- Benjamin Franklin, October 2, 1783
"We construct and construct, but intuition is still a good thing.
We can do a great deal without it, but not everything."             
-- Paul Klee, 1928
It would seem that an early American printer by the name of Benjamin Franklin might be the original source of the "window" metaphor. Today we have all become printers through the miracle of the modern personal computer. It is not atypical today to have hundreds of type fonts available for any possible use including interface design. The number of type fonts available before the advent of personal computers already exceeded ten thousand. Now with the right software a person can create their own fonts. The area of typography is quite rich and traces its heritage to the middle ages and the invention of the printing press. There is a rich design literature associated with printing and the design of type. This section attempts to condense some of that into a fairly concise summary for the benefit of interface designers. 12.2.1. History While Gutenberg invented movable type and mass production of printed material over a twenty year period from 1435 to 1457, it was Claude Garamond, in France, in 1541 who designed the first type font that did not try to imitate handwriting. His designs became the standard for the next two hundred years.

This is the current version of the Garamond design.

The is the Bookman Old Style used in this document.

Both the above are in bold and 16 point in size. Note the Bookman is far more spread out and heavier in design.

With the industrial revolution came wide scale advertising and the demand for type fonts that were startling, unique, and would call attention to material. Some historians feel these extreme fonts were unsurpassed in their ungainliness and ugliness. These type fonts are referred to as Victorians. With wide scale use of PC's, that history seems to be repeating itself because in order to sell unique and more fonts the packages are offering weirder and weirder font designs. As in the Victorian era we are seeing type fonts that are loud and tend to be highly exaggerated by stretching, twisting, ornamenting, and shadowing.

Victorians Example

In 1954 Max Miedinger, in Switzerland, created the most popular type in use today, Helvetica. It has a relatively high x height and can be read in small font sizes. It has a bold clean look. Unfortunately the U. S. government has unintentionally destroyed its effectiveness. It is the type used in the tax forms and as a result many people who read a lot of text in a book set in Helvetica begin to feel uncomfortable and don't know why. It is still excellent for bold headings and for marking graphics, but one would not recommend using it for the body of a text document for those that fill out U. S. income tax forms. It has become emotionally associated with an extremely distasteful task. It is not provided with the large number of fonts that come with Windows 98 and MS Office.

Typography Examples

Type fonts classify themselves into various types:

Roman Serifs:

Others: There are families of fonts. Whether a font has serifs (originally marked terminals of letter strokes) or is without (sans) serifs is one of the major distinctions made. In printed letters serifs are the little knobs added at the top or bottom of various letters to broaden the width of the base or top.

Optima, for example, is a useful font for headings as it works well in all upper case. Optima utilizes differing line widths for accent and as a result has a clear classical flavor and is easier to read in upper case (this font is not in the author’s computer). Futura looks modern and functional. It is a cool crisp lettering that needs plenty of surrounding space so it does not compete with other elements in a layout. Times Roman was designed for newspapers to be able to set legible, compact lines of types. It is too cramped for use as a heading. Originally computer displays used fixed size characters and were largely restricted to non proportional fonts such as courier.

For any family of fonts such as Helvetica the type font exists in many versions that differ in weight, proportion, angle, or texture. These changes result in versions that are slanted, lightened, darkened, stretched, widened, or reversed. Weight is perhaps the most noticeable and the standard categories for weight are:

extra light, light, semi-light, medium,

semi-bold, bold, extra bold, and ultra-bold

Note that we normally have only two of the above possibilities (regular/medium and bold) in most current software word processors. In interface work we usually want to use at least three weights. As a result, we tend to use brightness as an alternative. Other classifications of forms for a given font are:

hairline, outline, inline, roman, italic, and bold italic.

A type design that has different proportions (stretched horizontally or vertically) will look completely different from the original face. Variations in proportions are classified as:

ultra-condensed, extra condensed, condensed

normal, expanded, extra expanded, and ultra expanded.

Condensed or expanded letters are not as legible as those of "normal" width.

There are two possible variations in angle:

regular and italic

Italic or oblique type adds a dynamic quality to text. For sans serifs, the italics are often called oblique to distinguish them from the true italics. True italics often require redesigned letters because of the serifs and sans serifs tend to just be slanted versions of the original regular form. Finally the texture dimension includes such things as outline, reversing faces, and shadowing. There are, for example, 546 combinations of these variables to make up distinct Helvetica fonts. The current generation of word processors is still far from providing us the full publishing art of typography.

12.2.2. Type Structure The following diagram illustrates the various parts of a letter. The size of type is measured from the highest ascender to the bottom of the lowest descender. The critical parameter, however, is the X-height because this is the primary factor in determining the visibility of the font at small sizes. There are no obvious guidelines for what type of fonts can be mixed and under what conditions. There are too many variations. The designer has to develop a feel for what is harmonious and what is not. Type fonts within the same family usually go well together. One would not mix a very modern type with a very old style font unless one wanted to convey an impression of emotional conflict. However, there are times when one could violate such a rule to convey the right feeling. In the War & Peace example later we mix modern, old style and traditional. Extreme differences in type fonts might be used to categorize, for example, those commands that make a change to the stored data vs. those commands that do not.

Certain type fonts are so cleanly designed that they are felt to be transparent to the reader. The families of true Garamonds and Times New Roman are in this category. They are quite good for the body of text and for allowing contrast with display fonts for headings and such.

Serifs: Various letters have horizontal, vertical, or diagonal strokes (e.g., M has four). The serif is a short cross stroke that projects from a main stroke. Serifs at the bottom of letters help the eye visualize the "virtual" base line the type is on. Serifs at the top help to move the eye along in the scanning process by effectively pointing to the right. Serifs were originated with Roman stonecutters who wished to give the end of letters carved in stone more strength and crisp definition. Typefaces without serifs are known as sans (without) Serifs and were developed after 1800. Sans-serifs were designed as letters not for texts but for captions. Types with serifs are more legible for reading bodies of text. The more letters are differentiated from each other, the easier is the reading. There are a number of different types of serifs.

The longer a line is the more important it is to use a good serif type. The need to concentrate on rather dense type also dictates the use of good serif types. The types of serifs are:

Counters: A counter is a hollow space that forms an integral part of a letter. Letters such as a, b, d, and o have closed counters, whereas the letters c, n, and v have counters that are open. Counters influence the sense of stress or tautness in a type font. There are three types of stress: rounded, vertical, and geometric. Geometric is considered the no stress situation. Rounded stress is where the letters are widened so the O and others are wider and flatter than a perfect circle and vertical stress is where the letters are squeezed so the O and others are taller and skinner than a perfect circle. When the O is a perfect circle we have geometric stress. Rounded stress letters are the most legible option; however, vertically and geometrically stressed letters consist of less white space and more mass. Such type fonts are more dazzling and thus more attractive to the eye even if they can not be read as fast.

Other characteristics of type fonts are apex, bar, arm, and legs. The apex of letters is where two strokes come together at an angle such as A or V. The shape of the apex is another characteristic in determining type and it can be flat, pointed, hollow, and/or rounded. The arm is a horizontal or diagonal stroke that moves way from the main body of the letter (e.g., E, F, L, and T). The lower diagonal strokes of K and X are the legs. The bar is any horizontal stroke necessary for the formation of a letter (i.e., serifs are not necessary in such strokes) such as in A, H, f, and t. Many typefaces differ on the relative thickness of these components relative to the main part of the letter. In addition there are beards, nicks, spurs, balls, links, spines, tails, and terminals for the type designer to also consider.

Sans-Serif typefaces are those without (sans) the serifs or terminal cross-strokes. These are rarely used for books or other text intensive materials but rather for presentations and headings. They are also effective in interface screens. They tend to be heavier or bolder than the same size serif typefaces. They can remain legible to smaller size than serifs. However, geometrically designed sans serifs are especially difficult to read because each letter is shaped similarly.

Certain letters composed chiefly of oblique strokes appear rather heavy. This is the case of:

A K M N V W X Y k v w x y

To avoid this heavy appearance, type designers make some of the oblique strokes thinner. Thin strokes often need marked terminals or serifs or they look unfinished. The round wide letters that characterize the nature of stress in type fonts are:


Given an O and I we can make a very good guess at the nature of the other letters. O is often a perfect circle on the outside, but can differ considerably on the relative thickness in the vertical or horizontal sections. The square wide letters are:


The height for M and W is about equal to their mean width. In the letters:


there is a general tendency to enlarge the lower portion by the cross bar or division being set above the mid height. This gives the letters a greater appearance of stability.

Letters divide up into the following classifications quite naturally:
Regular Bold
Open letters (lighter): CDGOQ CDGOQ
Closed letters (darker): BHRKE BHRKE Size & Measures Type is measure in a system of picas and points developed by Simon Fournier in 1737, and perfected by Firmin Didot in 1785. There are 12 points to the pica and approximately 6 picas to the inch (six picas are actually .9962 inches). Using a base of 12 rather than 10 allowed easier calculation of alternative formats since 12 is divisible by more factors than 10. Type size is commonly measured in points beginning around 6 points on up. In general anything 14 points and under is considered body type for regular text and anything larger is considered display size (e.g., headings and titles). Ten and twelve points are fairly commonly used in documents produced by computers. Computer displays are often set at 12 or 14 points. Books tend to be set in 6 to 10 point type. Very large type, margins, and paper size are usually measured in picas instead of points. When type is expressed in the unit of a pica it is referred to as a "line."

The spacing between lines is referred to as the "leading" because it was originally done with standardized strips of lead, each one or one and half points in width. This spacing affects the "tone" of the text that is the sense of gray and smoothness one gets by holding the text a distance away where the individual lines are not discernible. Decent sized spacing makes text more readable. Usually the automatic setting is 120 percent of the type size. Typefaces with tall lowercase letters (x heights) would require more leading than those with small x heights. As the type size increases the need for leading space does not increase linearly.

The relationship between type size, type of font, line length, open space, and leading requires visual judgment of proportions. A safe start is using 20% of the type size for leading. Leading should never be more than half the type size unless it is used to separate ideas in bullets or lists. Then the leading should be large enough to distinguish it clearly from the spacing of normal text.

Some key properties of text size and structure are:

baseline: the virtual line upon which the type rests. Descenders, such as the lower part of q, p, g, etc., fall below the baseline for lowercase text.

x-height: the height of the letter x. The ratio of x-height to the body size determines the visual importance of lowercase letters for a given typeface. For example, Helvetica has a large x-height as a proportion of the text font size.

point size: the distance from the lowest descender (e.g., p or g) to the highest part of the tallest ascender (e.g., d or b) is the type size.

em and en spaces: Em is a square space equal to the point size and an en is half that size in width. For example, a 12 point em is 12 points wide and used to be a square blank piece of metal type. An en is half an em. A single em is considered to be the minimum and default indenting for a paragraph so that the indent size is proportional to the type size.

Em and En are also represented by the long and short dashes -- and -. In classical typesetting there are three dashes. The hyphen is the shortest and used in words like "in-house." The en dashes, the width of an en, are meant to be used for number ranges: 1987-88. The em dash is used as grammatical symbols where most people use double dashes now --.

The x-height chosen tends to determine the feel of the type. Faces with large x-heights tend to be very open, airy, and legible (e.g., Helvetica) and those with small x-heights tend to be more compact and restricted, but take up less space (e.g., Optima). Given the same size type fonts those with smaller x-heights will look smaller. Body type should be in the 9 to 12 points size; however, for older people it is desirable to go up to 14 points. Century typeface is an example of a type with a small x-height that is often used by newspapers because it is legible at small sizes using only 1 point of line spacing or leading. This legibility is due to the design of the serifs and the use of thin and thick contrast in the letters.

This is a sample of century Schoolbook in 12 point regular.

When one is choosing the type size for headings a rule of thumb is to choose a size that is from 1.5 to 3 times the size of the type set for the body. This is the appropriate range to use to make, for example, different levels of headings distinctive. A common error is to use type sizes that are too large. Large decorative headings should occupy no more than 1/3 of the page or they look disproportionate. These errors are rampant on the Web.

For modern type faces without serifs the rule of thumb is to use one third the body size for leading. A 12 point face would use 4 points of spacing between lines. For type faces with serifs (e.g., Garamond) and good sized descenders one can use a minimum of line spacing (e.g., 1 point). The more modern and stark the type face the more leading is needed. Many of these modern fonts are used in interfaces because they do not send the eye scanning in horizontal directions like the older serif fonts. Therefore, they make good menu entries and headings in documents. It is easier for a person to scan vertically type fonts without serifs.

Letters as a rule are not equidistant, but their interspaces are approximately equal. Words are commonly less than one letter space apart. Lines of capitals are frequently half and whole letter heights apart. Lines of small letters commonly have their ascenders and descenders just clearing. Divisions of text such as paragraphs are best a clear line apart, or marked by a difference in color or size.

When setting line space or leading the rule is to use from one to four points. Type that has no leading is called set solid. This can only be used if the typeface has extremely long ascenders and descenders or a very light weight of type is used. Heavier typefaces and faces with large x-heights require more leading than do light typefaces with small x-height.

Reading is easiest when a complete thought or sentence occupies one line. If a line is too short or if sentences are so long they take many lines, then reading for comprehension is difficult, especially if the reader is not an expert on the subject material. Having a single thought in many lines will make the material seem choppy. When a person reads the peripheral vision of the left eye is anchored to the left margin of the page. If the line is too wide and the reader looses that anchor then the eye has to use the baseline to find its way back to the beginning of the next line so that scanning and reading speed is lowered. In general lines should be between 1.5 and 2.5 alphabets long. Another rule of thumb is lines should be ten to twelve words long. Once again the higher x-heights allow longer lines and smaller x-heights require shorter line lengths. Clearly there is point where two columns of text are better than one long line. Use of this knowledge to automatically adjust a large bodies of text in a window would improve the reading speed that is possible on the screen. Kerning Kerning is the process of adjusting the space between certain character pairs to minimize gaps for the best appearance and readability (example 'Ye Te' instead of 'T e Y e'). When a constant letter space is used between words it should be the width of the "i." When kerning, spacing that is visually proportional the letter's width affords the highest degree of legibility.

Good typography dictates that type be set with minimum letter spacing where possible. The letter pairs where spacing can be minimized are usually those that involve Y, W, T, P, y, and w. Typesetting systems on the computer should include a good kerning capability. The letter pairs that are considered to be kerning pairs are:


Av Aw ac af ao at au av aw ax ay

CA CO CT CY Co Ce Dy du Ew Ex Ey

FA FG FO F, F. Fa Fe Fo Fu GY


Ma mu NT nu OA OT OV OW OY

PA PE PO PR P. P, Pa Pe Po Pr Qu

RA RO RV RY ra rc re ro SA ST SY sys st


V, V. Va Ve Vo WA WO WV WY W, W. Wa We Wh Wi Wo Wr

wa we w, w. YA YO YS Y, Y. Ya Ye Yo ya ye yo ys y, y. ZA

Spacing is more critical in modern type fonts and sans serifs. Some examples of three letter combinations that show spacing properties are:

spacing example

Note that all the above fonts are the same size. The following list is of words that are difficult to space properly. If you hold a page made up of these words some distance from the eye the texture or tone of the page will appear spotty in most typefaces.

yankee kraft presto screw science sketchy story take treaty tricycle typography vanity victory vivacity wayward efficiency without through known Justification

Many people find that right justifying text is attractive to them; however, this should not be done with lines of less than 60 characters as it may produce some very odd spacing that throws off the tone of a mass of text and makes it look spotty. Traditionally words are spaced fairly close together in normal spacing which dates back to hand writing in medieval monasteries where the scribes would ensure the even tone of the copy by the use of close spacing. In type fonts certain double and triple letter combinations were set as a separate piece of type to ensure close spacing: fi, ffi, fl, ffl, ff, ae, ce. Spacing between capital letters can become critical with some types of fonts. Too little or too much makes the font difficult to read.

Readers are not aware of whether the type they are reading is right justified. Justified type is only slightly more legible than well-set unjustified type. This result is based upon hyphenation. Since one cannot predict how text will be sized on every screen and workspace layout, it is somewhat unpredictable to right justify text and it should be avoided for screen use. There is some evidence that poor readers perform better with text that is not right justified.

The eye moves across the page in saccadic jumps. It focuses on a small group of words for about one-quarter of a second and then leaps to the next group in the line. Fast readers are really reading phrases they know as well as words. Also the reader actually looks most closely at the top halves of letters. This is why all caps are so difficult to read. Place a piece of paper over the bottom half of a line of all lower case and of all upper case letters and the difficulty of reading will become obvious. Most lower cases are distinctive but not upper case letters. The saccadic jump is approximately an inch and the use of ligatures (ff, fi, fl, ffi, ffl, ae, oe) allows more characters within a jump so they do increase legibility. Whitespace For any type size beyond 14 points the same font is equally legible. In creating headings it is more important to allow adequate white space and the larger the type the more white space needed to separate it from prior text. Therefore smaller headings with more white space are better than large headings with no Whitespace. Spacing between a heading and display and the body should be at least six points otherwise it will appear cramped.

The Italian Renaissance regarded empty space as background, further back, and encircling the object. Modern art considers empty space as an equal part of the composition. Therefore, in modern type the unprinted counterforms in type take on more prominence and can sometimes be as important or have superior impact to the printed parts. Consider the white space inside the D as representing the letter. The unprinted counterforms can also be enhanced in emphasis by placing letters closer together. Compare the internal form of the space in the D and the O for a number of different fonts. Also, if you can graphically space letters take a word and move the letters closer and closer together until they overlap. These exercises show the impact of the whitespace. Note that modern fonts tend to allow such manipulation and remain legible.

The use of whitespace within typology is called imposition. Well planned space aids the user in understanding (e.g., sufficient space between columns) and/or increases the user pleasure or comprehension by not diverting the eye from what the user seeks to concentrate on. Just as one should view and open book as a total composition of both objects and spaces, so one should view the total screen the user is dealing with in the same manner. Current practices of destroying whitespace with advertisements and moving colorful objects is totally destructive of the ability of the user to concentrate on the other material on the page and perform their tasks. It probably would be easy to verify this in a controlled experiment.

12.2.3. Illusion Our visual perception and the associated aesthetic sense are different than the reality of geometric design. Humans see things differently from the real way they are drawn.

The proportions, arrangements, forms, and type fonts that look good to the eye cannot be constructed geometrically by using a straight edge and compass because of the illusions of the human eye. The eye tends to magnify all horizontal values and diminish vertical ones. The resulting optical illusions are real and must be dealt with as part of the design process. They are well known in typography but apply equally well to interactive screen and icon design.

1. The geometric square looks greater in width than in height. An optical square must therefore be slightly increased in height to appear to the eye as a square.

2. When a geometric figure is divided transversely, the lower half looks smaller. (consider the design of the letters A and H.)

3. The thick horizontal bar looks fatter than a bar of equal geometrical thickness placed on end. The "force of gravity" active in a form makes it broader. (Consider why we make various parts of letters thicker and thinner.) The thick bar placed on end looks thinner in the direction of gravity (at the bottom). (Consider the design of pillars in ancient buildings such as the Parthenon.) Note that ascenders in type are usually shorter than descenders.

4. Reducing a black square in size makes it look like a rounded dot.

5. The geometric circle looks wider than its height. Note that the letter O is rarely a perfect circle, at least on the inside, in a type font.

6. Two constructed semi-circles, joined to make an S, cannot form and organic whole. The two movements come to a halt (to the eye) at the point of the union and this break must be smoothed over optically.

7. A circular movement flows into two straight lines. The tendency of the semicircle to close must be prevented by two straight lines. Again there is a break at the points of transition. A U cannot be constructed geometrically.

8. The same black circle changes in appearance depending on its position on a plane surface. In the upper part of the surface it seems to float (balloon) whereas near the lower edge it conveys a sense of weight (wheel). Our visualization of an object is influenced by prior experiences.

9. The triangle placed like a pyramid looks stable; turned upside down the same form looks unstable and irresolute. The same is true of the square sitting flat or turned on end (diamond).

10. A thick bar placed horizontally and vertically. The form looks heavy and weighty when horizontal, but lighter and more mobile when vertical.

11. Given a white square on a black background and a black square of the same size on a white background, the white square radiates beyond its edges against the black background and looks appreciably larger than the black square of equal size on a white background.

12 Taking a series of parallel lines to make up a square area, the use of horizontal lines make the square look higher than it is; while the vertical lines make the square look wider.

13. Given a square formed by either two horizontal or two vertical lines, the horizontal lines make the surface look wider; the vertical lines increase its height.

14. Two lines of the same length look shorter or longer on a relative basis by the shape of the arrows on the end ( < > or > < ). Serifs on ascenders or descenders can make them look longer or shorter by the shape of the serifs.

15. The eye creates movement as a result of its scanning process. The dot moves and gives rise to the line, the line moves and gives rise to a plane, and the plane moves and gives rise to a body.

Certain figures and shapes can exhibit stress that is referred to in typology as being "tautened." A vertical line is tautened and the tautering lies in the direction of gravity. A horizontal line that connects to two vertical supports (H) is tautened from left to right. If there is sufficient blank space between the line and each side (l - l) the tension is removed and the line appears at rest. This form of motion also allows us to design situations that imply things that are virtual like lines. Each line of text infers in the human mind a base line. The presence of serifs serves to aid the eye in following the line.

Design is a process of choosing a compromise between a degree of tension and a degree of harmony. A group of lines to create a surface is in harmony with other lines; but a solid surface and line create a tension due to contrast and both the line and the surface is intensified. The letter L is a combination of a linear form with a slight addition of surface. Finally there is an illusion of motion. Humans seek to group things together mentally and this causes them to make inferences from objects in close proximity.

12.2.4. Feeling & Rhythm There are many ways of interpreting text in visual terms: character and size of type face, combination of different characters and sizes, letter spacing, the reversing and interchange of letters, deviations from the usual line of type, shadowing, etc. The following example shows the use of three different fonts to convey a feeling. The word "war" utilizes different font sizes on each letter and some odd spacing.

Example: War and Peace

Text has a sense of rhythm. The interword spaces dividing line and type matter into words of unequal length are what contribute to this rhythm and they can easily be seen by blacking in the white space in a paragraph that separates words and separates lines. It is not unusual to observe doodlers who do this unconsciously, not even realizing they are highlighting the rhythm in a section of text. If the spaces between words or lines become too narrow or too wide the rhythm is lost and the text becomes monotonous. Text without ascenders and descenders also looses its sense of rhythm. The uneven right hand margin contributes to rhythm as well.

going-gone animation

In an interface screen or form the pattern of text on the screen affords the designer far more opportunity and flexibility in designing rhythm than in a text document. One needs to look at the screen it terms of sensing the pattern or rhythm of the resulting menus and options to determine if they are in fact harmonic or dissident to the viewer.

The "falling" example below could be animated if done on a computer. The relationships between concepts as represented by words can sometimes be clarified by the movement of ideas and concepts relative to one another. The simplest example is the derivation of mathematical relationships by the movement of terms between equations.

falling animation


Consistency in typography design involves arriving for a good layout of text that is used consistently through the document. In that regard it is a very similar requirement to interface design. Variation in design has the opposite intent of adding interest. Just as in music, variation means the mutation of a given design element. The same textual theme may appear in countless different variations, especially with its use in advertisements. In an interface, perhaps different fonts might indicate different modes of interaction that the user is in, even though the command name is the same. To this date very little use of text variation has occurred in interface design.

Some individual letters are static in nature (devoid of movement) like: A, H, M, and T. However, many letters are designed to convey round movement and movement from left to right: B, C, D, E, F, K, L, etc. When text is made into words and lines, the movement oriented letters carry along the static letters in the direction of reading. When one starts to place words and phrases on posters or on interface screens, the placement can influence the way the eye will move in the process of scanning the poster or the screen. In the future, with animation within the interface design, it will be possible to take fuller advantage of this sort of dynamics in design. The multitasking environment will require animated screens for perception of status and the control of multiple processes. Relevant menus and entries maybe changing as one watches the screen.

For headings, the larger the size of type you used the lighter it can be; conversely the smaller the smaller the size of the type the bolder it needs to be. If one is using colors, then the lighter the color (relative to black) the bolder the type needs to be. Underlying or underscoring is only effective for very large fonts and in generally should be avoided in interface design.

Lewis Carroll's the Mouse's Tale is a poem that is shaped like the tail of a mouse. If he had had a computer available to him we could well imagine that he would have programmed the poem to actually move in the motion of a tail.

                                                                      "Fury said to a
                                                              mouse, That he
                                                        met in the
                                          'Let us
                                                 both go to
                                                        law: I will
                                                                    you. Come
                                                                          I'll take no
                                                                                denial; We
                                                                          must have a
                                                                    trial; For
                                                              really this
                                                        morning I've
                                            to do.'
                                                 Said the
                                                        mouse to the
                                                              cur, 'Such
                                                                    a trial,
                                                                dear Sir
                                                        no jury
                                                  or judge
                                            would be
                                          'I'll be
                                              judge, I'll
                                                  be Jury,
                                              old Fury:
                                              try the

Lewis Carroll's 'The Mouse's Tale (tail)' Contrast Contrast is a critical aspect of design. Round trees look rounder if they are near angular buildings; a tower looks taller if it stands on a flat plain; a warm color looks warmer if surrounded by a cool color. The design of a typeface depends on the combination of contrasting forms: round and straight, broad and narrow, large and small, thin and thick, etc. If contrasts are too extreme, like very large with very small, the whole effect of contrast can be lost. The following illustrates some of the contrasts that exist between characters within the same font.
vertical, passive
horizontal, active
straight, static, geometric, symmetry
oblique, dynamic, organic, asymmetry
round, soft
straight, hard
concentric, closed
eccentric, open
upper case, static
lower case, dynamic

There is no really mechanical way of measuring spaces between letters. The designers of successful type fonts have made use of optical illusions to improve the readability of their fonts. Adding diagonals to lines makes them longer or shorter. ' I ' seems longer than ' J ' but they are the same height. A line placed in the middle of a space will seem lower than the middle so the lines in H are usually above the middle. Comparing IL and LI, the IL space seems larger, also YT seems closer than dose JT. In the combinations HIT, HOT, and HOOK, the H and O have to be closer together than H and I to appear equal. The OO has to be still closer.

The unbalanced appearance of a word is produced in "COFFEE" or in "OGEE" when the open letters are exaggerated or are much wider than the other letters. Some words have distinctive silhouettes: HEN, GOOD, BLOSSOM, ALMA, and COLLEGE.

A black square creates a hole in a white space and varying shades of gray create holes to a lesser extent. The finer the lines of a gray square the more intense and uniform is the gray, even if the relative amount of actual white coverage is the same. Lines of type create a gray surface and what is called the "tone" of the type area.

12.2.5. Layouts No type face is perfect for everything. Certain sizes are better in one face than another. The greater the x-height of a type face, the smaller the size you can use with it. For large sizes you can use smaller x-heights.

In a book, readable lines are usually considered as ten to twelve words (6 characters on the average for words), while for newspapers it is considered to be five to seven words. The margins of a page in a book help to increase the size of the line, while in a newspaper there is very narrow white spaces between columns so that lines too long will send the eye scanning to the next column. When lines become too long it is difficult to pick up the next line. The longer the line, the more one has to increase the line spacing to ease the linear scanning process and the return of the eye to the beginning of the next line (this is referred to as 'registration').

The oldest theory about margins is known as the "golden section" and was specified by Jan Tschichold, a Bauhaus designer. He observed that many medieval manuscripts used the proportion of 2:3:4:6 for the inner, outer, head, and foot margins. One can construct this proportion uniquely using a compass and a straight edge on any two page layout. There are a number of other such constructions to express other alternative versions of a basic 2:3 proportion.

According to the golden section, the width of the page should be proportional to its depth by a ratio of 2:3. The 6 by 9 inch book format conforms to this exactly. The ratio of the text to the page area is also 2:3 so that for a 6 by 9 inch book the text is 4 by 6 inches. In general the text should be at least as deep as the sheet is wide. A more loose but related theory is one of using progressive margins that become larger beginning with the inner margin and working counterclockwise. One must note that this approach is also very applicable for setting up two windows dealing with related material on a screen with providing sufficient space for controls at the bottom, status at the top and context dependent menus in the vertical margins as needed.

Arrangements on a single page are usually done by first imposing a grid to which all decisions for placement can be gauged. The grid should be chosen to reflect the smallest element that can be placed. For standard page sizes of 8 and 1/2 by 11, the grid size commonly used is 1 inch (6 picas) wide and 1/2 inch high. Therefore, the resulting type and illustrations are all multiples or even divisions of 6 picas.

A given margin looks larger the heavier the mass of the text, and dissimilar the lighter the mass of the text. Borders act as separators, they convey the message that whatever is inside the border does not belong with what is outside. Space can be used to group things that are different but related to other groups. The use of space is not as strong as the use of borders.

The length of a line should be around two-thirds the width of the paper. The most pleasing ratios to the human eye for setting margins in documents with facing pages are 1:1:2:3, 2:3:4:5, 2:3:4:6, and 2:3:5:6, for the inside, top, outside, and bottom margins respectively. A rule of thumb on line length is to use two alphabets or about 52-54 characters. This line width tends to be the right size for maximum average reading speed among the general population. The margin needs to be wide enough so that the eye does not "swing off" the page in the backward motion to the next line. This is why left margins are sometimes larger than right ones.

Tone is the relative gray scale produced by page of text when it is held at a distance where the individual letters and words can not be distinguished. The degree to which the tone is even, is considered a criterion of good text design (font, spacing, etc.). A standard approach to setting up the margins when the tone was rather dark was to have 50% of the space in the margin and 50% in the dark text area. This creates an optical illusion where the dark text area will appear to take up about 68% of the space (optical illusion of parts) because the white space is broken into four smaller parts (around the sides) and the dark area is one solid rectangle. Margins can make what they contain look larger since the eye is guided to the contained part. The concept of tone as an evaluation of lettering traces back to the hand written manuscripts created by the monks of the middle ages.

Alignment is a key consideration in the layout of material on a page or on a screen. The eye will seek out and find an alignment even if you did not find one. We know the importance of alignment in being able to skim tables of data and to be able to skim text. When one introduces objects such as multiple windows there can be a great many forms of alignment and all of them allow a clear comparison of the objects for the purposes of examining similarities and differences

There is a certain similarity between the art of designing a poster and that of designing an interface screen. The objective of a poster is to go beyond the mere convenience of an impression and appeal to instincts, emotions, reason, and judgment. A successful interface screen demands attention, holds it, and crates a desire to interact with it.

Poster design variables:

Unusual or Novel
Tone and color
Spacing and proportion
All these are appropriate measures for screen design. Even "novel" is very appropriate for gaming applications or providing strategic screens that will be striking. In the literature of typography there are additional measures of type quality besides the ones we have already discussed:

Distinctiveness: The distinguishing characteristics of each letter are strongly marked; for example, the lip on the Q from O; the R and P, the C and G; and within combinations such as LIT. In general the more distinctive the letters the easier it is to read the font.

Simplicity: There are no unnecessary parts as in the Victorian fonts.

Proportion: No part of a letter is wrongly exaggerated or dwarfed.

Beauty of form: Each letter is an individual and living whole.

Beauty of Uniformity: The existence of a family likeness of the different letters so they go well together.

Beauty of the Arrangement: The general fitness in the placing, connecting, and spacing of letters, words, and lines within the space.

Most screen layouts are asymmetric or what is called informal balance. Informal balance is livelier and holds greater interest than formal balance. The golden division of a line or the "golden mean," is considered quite pleasing to the eye and is an imbalanced ratio that occurs quite a bit in nature (.618:1 or .382:.618). This ratio is sometimes approximated by 3:5 or 3/8:5/8. If one is looking at a standard page the optical center is higher than the mathematical center and the Golden Division Line is slightly above the optical center.

12.2.6. Color in Type It was frequent practice in old manuscripts where there were prefaces, prologues, or notes (i.e., items not actually part of the text) to keep these distinct by writing them in red. For such letters in red, the bigger letters appear a deeper red because the smaller ones give the appearance of being lighter in color by having more surrounding white space.

Black is the paramount color in typography and it goes very well with brilliant colors, red in particular; not a dull, bluish red, but a bright, gleaming, yellowish red. Color can only be used in the type if the type is large and bold. Small and light colored type has a number of problems: red pales to pink, yellow seeps out of the white surface, blue becomes indistinguishable from black. When we had typewriters the only standard "other" color was red. A small amount of red placed near a lot more black gains in richness and luminosity. The best use of color in any amount of type is when there is clearly a dominant color and the alternative color is used only to call attention to specific small regions as opposed to have wide area spread.

When blue and red are in juxtaposition, the blue appears bluer and greener; the red appears brighter and more scarlet. With red and green, the red appears more crimson and the green, greener and bluer. A greenish blue will appear plain blue beside a pure green; a blue with a purplish tinge will appear more purple.

The effects of a black outline are: to make a bright color appear brighter and richer, to define and harmonize neighboring colors and shapes, and to keep the design flat (minimize the illusion of depth). The effect of a white outline makes the colors appear paler and lighter. Gold is even more effective than white or black in harmonizing colors.

Early tests (Paterson & Tinker, 1940) on many thousands of subjects rated the degradation in reading according to combinations of type color and background:
  Color Combination Differences in %
  Black on white
  Green on white
  Blue on white
  Black on yellow
  Red on yellow
  Red on white
  Green on red
  Orange on Black
  Orange on white
  Red on green
  Black on purple

The above results were for reading from paper under constant lighting conditions and the same brightness of the colors. On a computer, changing the relative intensity can enhance some of the color combinations. However, these results indicate that server problems can occur with some color combinations and that the first four are the safer choices to stick to. Note that white on blue on a screen can probably do as well as blue on white with the intensity control possible. We do find white on blue to be quite common in many applications.

In general, color combinations which are legible in normal reading are also found to be satisfactory for material to be read at a glance or at a distance. The reading legibility of color combinations seem to correlate with the satisfaction or pleasantness of the color combination. In essence, brightness contrast between print and background is the final determining factor given reasonable combinations of color.

12.2.7. Signs
The whole visible universe is but a storehouse of images and signs to which
the imagination will give a relative place and value; it is a sort of pasture     
which the imagination must digest and transform.                                       
-- Charles Baudelaire (1821–67)
All abstract sciences are nothing but the study of relations between signs. 
-- Denis Diderot (1713–84)
Many thousands of years ago primitive man made marks to represent his activities. By 4,000 B. C. the Sumerians were utilizing two thousand pictographs in their clay-tablet writing. Two thousand years later the Egyptians were making do with just twenty four signs and the phonic writing began to replace picture writing. Today we have one hundred languages and over five thousand dialects. As a result there has always been a dream of a universal system of pictorial symbols that could be understood by all humanity. This led to efforts like Esperanto and Semantography. The latter was an approximate 100 abstract images invented by Charles Bliss in 1949 to fit on an IBM typewriter ball. They could be utilized to compose more complex figures. There was some limited success in using this pictorial language with handicapped individuals as a communication medium.

Semantography Samples

It is probably Hippocrates who is considered the father of semiotics which is the study of signs. His early writings on the types of symptoms where the first academic systematic discussion of the concept of signs. The physician, relying on the patient's verbally and nonverbal reported "symptoms" combined with the "signs" observed by the physician, identifies a disease (making a "diagnosis") and forecasts its eventual course (makes a "prognosis"). Interestingly, this sounds similar to the process a user goes through in trying to comprehend an interface.

Originally signs were thought to be either subjective or objective. Today, signs are thought to be of three types: icons, symbols, and indexes.

Icons: An icon is something that represents something else that is usually static in nature. For example, the stars in the American flag "icon" represents the states and the stripes represent the original colonies. The American flag represents the country just as religious icons represent God and many of the icons in a tool menu represent a specific menu choice that can be made.

Symbols: A symbol is somewhat more dynamic in nature and conveys a condition that is not obvious from the actual sign itself. The American flag at half mast indicates the death of someone important to the country. Its meaning is not represented within the symbol itself but is convey by triggering semantic content in the mind of the viewer. Many trademarks are really symbols in that the connection between the mark and what it represents has to be learned.

Indexes: Indexes are the most dynamic use of signs in that they signify a contextual situation. The American flag on the battlefield may signify the position of the front line. The flag on a ship signifies what country the ship is registered to.

As an example, in an interface we can conceive of the hourglass being used in all three ways. Usually, when the cursor turns to an hourglass in Windows, it is being used as a symbol that the processor is busy and that the user cannot undertake an action while that symbol is present. If the computer knew how long it was going to be busy and the actual amount of sand in the hourglass was set to indicate at any instance how much longer the processor would be busy, then the hourglass becomes an index sign. If the hourglass were on the toolbar and choosing it meant to start a run or execution of a task, then it is the usual icon. Current use of signs in interfaces have largely focused only on icon usage and there is a great deal of future possibility for using signs as symbols and as indexes.

Other dimensions of signs are:

Image: The sign resembles in appearance that of which it is a likeness.

Diagram: Reveals structure of the depicted fragment of reality.

Metaphor: Emphasizes important properties of the subject it refers to.

Assimilative: Relationship to reality fragment is not obvious and must be learned.

Another factor that applies to signs (as well as words) is whether the meaning is inherent in the sign or the meaning depends upon the context of the communication. Such signs are called "shifters" in linguistics. For example the meaning of icon might depend on the application or the interaction state the user is in. Signs can be generic just like commands can be. The interpretation of signs depend upon the virtual channels of communication which are feedback and feed forward. In other words, the understandings that exist between the user and the system determine the final meanings of the signs used.

The Structural Model of Communications

Pragmatics: Context, Virtual Channels
Semantics: Interprets, Formulates
Syntactics: Encode, Decode

In the above model of communications, the virtual channels are the ones that determine the "success" of communications. A sender has a pre conception of how the receiver will interpret the message, that influences the formulation of the message, and the feedback that will be expected to confirm the interpretation of the message. The process of modifying the virtual channels is in fact the process of learning. This is very different than the classical mathematical formulation of Information Theory. The information content of the above types of messages are dependent upon the relative understandings of senders and receivers.

Some of the earliest signs in western civilization were the "house-marks" which denoted ownership of items by a family. They were carved in the wood owned and harvested, the livestock were branded with it, and tools and other possessions were labeled with the marks. Marks were modified to represent different members of the family and became personal marks that later evolved into coats of arms. Another evolution was the emergence of craft marks to represent a trade or craft which today has evolved into the concept of trademarks. Perhaps the most rich and diverse of these early marking systems were those of the stonemason's that later evolved into almost a language of mystic or "Masonic" signs. Some of these still appear on the U.S. dollar bill. Cultural groups often develop and have their own signs. During the depression, hobos developed a whole set of signs to indicate to one another such things as: this is a safe place, they will provide a meal, there is a mean dog here, they will beat you here, etc. Hobos would carve these on fences and the sides of buildings.

When one thinks of design signs as a set of related symbols then it becomes possible to express very rich symbolism that begin to take on the form of a limited language tailored to a specific situation. This is certainly evidenced in the nature of road signs that understood everywhere in the world regardless of the language of the driver. In many engineering fields, the signs are standardized creating designs of such things like circuits, buildings, etc. Signs in an interface situation should be viewed in the context of establishing families of signs. The following medieval set illustrates the power of this approach.

The use of signs in interface design is in a very primitive state considering the dynamic possibilities of animation that can go far beyond the historical use of signs.

In general, as signs evolve within a structure, the better known they become and the simpler they tend to become. This has been the history of popular trademarks and it has also been the evolution of some interface symbols like scroll bars and command buttons. The early ones had elaborate three dimensional perspectives. Look at the two upper corners of windows to see how simple buttons have become. Historically, the development of Egyptian hieroglyphics followed the same sort of evolution. For frequently used symbols people want simplicity of representation along with the obvious need for distinctiveness.

An excellent example of this is the standard symbols that evolved for VCR and CD players in that they are both simple, distinctive and convey similarity between their visual nature and their meaning.

VCR and CD Symbols

A similar well designed set of icons is the paragraph alignment buttons for left, center, right, and left & right justification. Note that symbols or icons are more easily understood when they come in families that provide a comparative visual interpretation of their meaning.

The set of special symbols that are available today on most word processors is called in typography the "Pi" characters. They include such things as copyright symbol, bullets, daggers, ballot boxes, check marks, pointers, etc. In addition, there are a number of special fonts that are made up of symbols such as the "dingbats." One would expect that one of these suppliers would get smart and put out a set of characters that can be used to convey emotions (e.g., happy or sad faces, flowers, etc.) so that writers could enhance their paralinguistic cues in electronic mail. There are also a considerable number of professional fonts where the symbols of the profession can be mapped to the keyboard for mathematicians and various engineering and scientific fields.

In the print industry, icons are pictographs and ideographs and they go back to the cave man who expressed the hope for a successful hunt by drawing an animal on a cave wall. The language independent road signs and those used to indicate restaurants, bathrooms, etc., in travel terminals are all part of an effort to convey meanings through pictures. One that is found on roads that dead end on the edge of lakes in Europe is:

This is a particularly interesting example in that one of the most difficult things to convey in diagrams is action of some sort. While some symbols like "wastebaskets" can convey the idea of the "delete" action, this is difficult to establish because most objects that might be used for a symbol can be associated with a wide variety of actions.

Attempts even in recent history, to develop picture languages for use by the handicapped have always run into a cognitive limitation of a few hundred pictures for conveying pictorial semantics. It is words or symbols, or combinations of symbols to make abstract words that provide the far richer memory on the order of 100,000 semantic concepts that can be recalled at two or more a second. It is an amazing mental ability and even more amazing is the variation in scanning possible. We have some languages that go left to right, right to left, top to bottom and the ancient Greeks who read boustrophedonically (as the ox plows), one line to the left and then the next to the right and so on.

When post office letters used to be a primary means of personal communications, it was quite popular for writers to illustrate their letters. This included everything from substituting symbols such as a drawing of a human eye for the word "I" to very elaborate illustrations of the subject matter of the letter. Already today in human email people are going to extremes to illustrate by using symbols (e.g., : ) represents a happy face). One expects that the use of illustrations in email will mushroom once it becomes easier to incorporate graphics and symbols in an accepted common standard over the networks.

Symbols are expressions of subjective feelings and emotions which tend to have universal appeal. Those utilizing digital networks have been making maximum use of the characters that are available in ASCII for adding expression to their writings. As a result, people have established additional names for the standard characters. This is an example of how individuals adapt not only the language but the available symbology. Many of these names reflect particular emotional meanings these symbols can convey. The following table was circulate over USENET, circa 1983. It provides the standard or official names for the characters, listed first, followed by the other alternatives. They are listed in ASCII order.

TERMINAL MUMPS: Popular and Bizarre Character Names

! exclamation point, exclamation, bang, factorial, excel, ball-bat, smash, shriek, cuss, wow, hey
!? interrobang
" double quote, quote, dirk, literal mark, rabbit ears
# pound sign, number sign, sharp, crunch, mesh, hex, hash, flash, grid, pig-pen, tictactoe, scratchmark, octothorp
$ dollar sign, currency symbol, buck, cash, string, escape, ding, big-money
% percent sign, percent, mod, double-oh-seven
& ampersand, amper, and, address, andpersand
 ' apostrophe, single quote, quote, prime, tick, irk, pop, spark
( ) open/close parenthesis, left/right parenthesis, paren/thesis, parenthisey, unparenthisey, open/close round bracket, ears, so/already, wax/wane
* asterisk, star, splat, wildcard, gear, dingle
+ plus sign, plus, add, cross, intersection
 , comma, tail
- hyphen, dash, minus sign, worm
. period, dot, decimal point, radix point, point, full stop, spot
/ virgule, slash, stroke, slant, diagonal, solidus, over, slat
: colon, two-spot
; semicolon, semi, hybrid
< >  angle brackets, left/right angle, less/greater than, read from / write to, from/into, from/toward, in/out, comesfrom/gozinta, funnel, brokets, crunch/zap, suck/blow
= equal sign, equals, quadrathorp, gets, half-mesh
 ? question mark, whatmark, what, wildchar, ques, huh, quark
@ at sign, at, each, vortex, whorl, whirlpool, cyclone, snail, ape, cat
V vee, book
[ ] square brackets, left/right bracket, bracket/unbracket, bra/ket, square/unsquare, U turns
\ reversed virgule, backslash, bash, backslant, backwhack, backslat, escape
^ circumflex, caret, uparrow, hat, chevron, sharkfin, to ("to the power of"), fang
_ underscore, underline, underbar, under, score, backarrow, flatworm
` grave accent, grave, backquote, left quote, open quote, backprime, unapostrophe, backspark, birk, blugle, back tick, push
{ } open/close brace, left/right brace, brace/unbrace, curly bracket, curly/uncurly, leftit/rytit, embrace/bracelet
| vertical bar, bar, or, v-bar, spike, pipe, gozinta, thru, pipesinta
~ tilde, swung dash, squiggle, approx, wiggle, twiddle, enyay
/* slashterisk
*/ asterslash
>> cat-astrophe

The introduction of wide scale messaging over Internet has changed the conventional use of many of the above characters to create symbols that convey social emotional content. There is currently well over a thousand of these symbols and the following list is a sample selected from those.

Paralinguistic Cues in ASCII

(From list collected by David W. Sanderson, University of Wisconsin)

Basic Faces
:-) basic smiley, ha ha, happy, humorous, smiling
:-( boo hoo, frowning, mad, sad, un-smiley
:'-( crying
:'-) crying with happiness
:-*  Oops!
:-<  frowning, real sad
:-> biting sarcastic face, hey hey
:-@  extremely angry, screaming, swearing

Face Variations:
:-e disappointed
:-I hmm, indifferent, thinking
:-J tongue-in-cheek comments
:-k  beats me, looks like something, though
:-o "Oh, nooooooo!" Uh oh! Wow! shocked. surprise, yawn
:-p smiley sticking its tongue out (at you!)
:-s just made an incoherent statement
:-T keeping a straight face
:-V  shouting
:-w speak with forked tongue
:-x My lips are sealed!
:-X A big wet kiss!
:-[  blockhead, vampire
:-\ undecided, skeptical
:-] biting sarcasm, sarcastic
:-| "have an ordinary day", grim, no expression
:-| :-| deja' vu
:-|| angry
:[  real downer
;-} leer
<:-(  disappointed, dune
<:-) dumb questions
<:-I dunce
>-< absolutely livid!!
>:-< mad
>:-> devilish
]:-) "
]:-> "
!-(  black eye
#-) partied all night
$-) yuppie, won the lottery
%-( confusion
%-)  after staring at the terminal for 36 hours, cross-eyed
%-6 braindead
8-| eyes wide with surprise, suspense
8_) don't get your nose out of joint
&-| tearful
&.(..  crying
'-) wink
O:-) acting very innocent (halo)
(-.-) Zzz... sleeping
(-_-) secret smile
(:-# said something I shouldn't have
(:-( frowning
(:-\ very sad
*<|:-) Santa Claus (Ho Ho Ho)
-=#:-) wizard

Other Symbols:
-/- stirring up trouble
>w nose-thumbing gesture
@= flame, nuclear bomb going off, war started
@>--->----  a rose
@l@ too many hours at terminal
[] hugs
xx kisses
_\\// Vulcan salute
__! enough for now
|-{  Good Grief!
||*( handshake offered
||*) handshake accepted
@%&$%&$\&*@%$#@ you know what that means!

The future understanding of how individuals will utilize symbols both for communication with other humans and for computers represents a typical "artifact" type study, the result of which can aid designers in using symbols for meaningful actions and objects in an interface.

Just as with color, the user needs control over the fonts and sizing of fonts on his or her screen. As screens with high resolution and greater size become more common, people will want to pack more information on the screen and in effect generate a larger workspace. In addition, the needs of older people and those with seeing difficulty demand the ability to specify larger types.

The use of type font variations in interface design is still an untapped area. They do offer a tremendous opportunity, not only for additional coding in the interface, but for the introduction of emotional content as well.

12.3. Forms & Proportions
Beauty is our weapon against nature; by it we make objects, giving them limit,
symmetry, proportion. Beauty halts and freezes the melting flux of nature.      
-- Camille Paglia (b. 1947)
The eye is attracted to and pleased by objects in motion. It will see things in motion before static images. However, some forms can have more motion than others. A rectangle is considered in motion relative to the square which is perceived as very static. The sameness of the four sides of a square is not as interesting to the eye as the contrast between the different sides of a rectangle. It is also true that the eye is repelled by anything that makes it work. A rectangle which is twice as deep causes the mind to examine the and weigh the large ratio between the two sides. Certain ratios less than two are far more easy for the eye to deal with and hence one reason we have paper sizes and screen sizes that are far less than 2:1 in the ratio of sides. Lines which are so long that it is difficult for the eye to register the beginning of a new line as the person scans the text is another example of the eye working too hard and people feeling uncomfortable in reading without always knowing why. Some forms and ratios are rather "perfect" and tend to generate pleasure on the part of the viewer (e.g. the golden rectangle).

The eye tends to seek variety and if one takes a vertical rectangle and divides it vertically into two equal rectangles it will not be pleasing. On the other hand if the division is slightly unequal parts that cannot easily be measured by the eye on a relative bases it is far more pleasing. Similarly dividing such an area into three areas should have three unequal areas going from largest, to in between size, to smallest. No part should be a simple multiple of the other (e.g. a clear distinctive relative size). This same principle is what leads to the inequality of margins around the edges of the page of a book.

The concept of "dynamic symmetry" was well known to the Greeks and is the general principle underlying these observations. Those working with the design of advertisements use instruments to try and determine if the design of the ad will cause the human eye to focus on the message they seek to get across. Nothing, for example, shaped like an arrow (e.g. V) should point out or away from the area the eye should go to. The eye tends to seek the top of a display and hence the optical center is higher than the true geometric center. Furthermore there is a center above the optical center that is called the "artistic center" and seems to be more pleasing to the eye. For instance if we hang a picture on a panel on the wall we will put it well above the real center of the panel.

The rectangle is a very common construct for the purposes of design. We use it for dividing up screens and creating windows and for blocking text and other shapes such as ellipses. There are only about five different proportional rectangles that people can compare, differentiate and recognize on a relative basis. These are:
Name side ratio diagonal equal division inscribed square:
resulting rectangle ratio
square 1:1 1.414
Ö 2
2:1 infinity
square root of two 1.414:1 1.732
Ö 3
1.414:1 2.414:1
square root of three 1.732:1 2.000
Ö 4
1.155:1 1.366:1
double square, or square root of four 2:1 2.236
Ö 5
1:1 1:1
square root of five 2.236:1 2.449
Ö 6
1:1.118 1:1.236
golden rectangle 1.618:1 1.902 1.236:1 1.618:1

The above table gives the relative ratios of the sides, the size of the diagonal in units of the shortest original side, the resulting ratio of dividing the rectangle in to two equal parts, and the resulting rectangle ratio when one inscribes a square. Both, the diagonal size and the inscribed square proportion, aid in explaining how people are able to differentiate these rectangular areas. Note that all the above (except the gold rectangle) can be constructed from the prior one by starting with the diagonal and rotating the unit side to be perpendicular and forming the next largest rectangle. In the above table each prior diagonal is the same as the first column in the next row down. The golden rectangle, as we will see below, is a limit condition. Note that column one and three is the same for the square root of two rectangle and the first and last column is the same for the golden rectangle.

Some of the common divisions we encounter are:
1.27:1 17 inch CRT
1.29:1 American Sheet of paper (8.5x11)
1.33:1 Television screen
1.41:1 European paper size
1.50:1 35 mm slide, apple screen
1.55:1 Windows work area on 17 inch CRT
1.59:1 Two sheets of paper in a binder (17x11)
1.60:1 Suggested proportion for acoustic speaker cabinets
1.77:1 HDTV

The standard proportions have certain interesting properties. The square is an attention getter and gives an impression of stability and permanence (unless turned on its end into a diamond). One will commonly find that expensive art books and books containing many drawings or pictures (garden books) are square shaped. This is because the square shape provides a great deal of potential margin area for having different proportioned rectangles on different pages. One can then give a true representation of the different sized and proportioned art works with relatively pleasing margin differences page to page.

Note that when we divide the square root of two rectangle into two equal parts each resulting rectangle is also a rectangle in the same proportion. This makes this rectangle ideal for books. It is the European standard for paper size and it is also commonly used for posters, booklets, and magazines. Obviously, continuous subdivision of equal size gives a set of division that are all in the same proportion and can be used to divide up a poster area into areas of equal interest and emphasis.

The double square is very similar to the above two. It has the stability emotionally of the square and divides equally into two squares. Clearly a square can be divided equally into four squares which also makes it useful for equal emphasis divisions. The Tatami mat in Japan is also of this shape as are some of the door mats we find sold in the U.S. It psychologically suggests wiping both feet as there are two distinct spaces for the feet.

The golden proportion has the characteristic of occurring in nature; because of this, it is commonly employed in artistic works because humans are unconsciously familiar with its shape. If we inscribe a square in a golden rectangle, the resulting rectangle is also in the golden proportion only smaller. If one continues this iterative process of inscribing smaller and smaller squares, to generate smaller and smaller squares, and then connects up the outer corner of each smaller golden rectangle, the result generates an Archmeidies spiral which is a shape that can be seen in the pattern of center of a sunflower and other natural spiral occurrences in nature. This spiral reflects growth rates and patterns in plant and animal life. It has been discovered in many works of art before the reason for it was understood. In Botechilies Venus, the ratio of the total height of Venus to the height to her navel is in the golden proportion. Then the height to the navel relative to the height to the breasts is also in the golden proportion. Succeeding smaller breakdowns of features of her anatomy are also in the same proportion. Many works of architecture also incorporate this proportion.

If one takes the diagonal of half a square as a radius, and circumscribes a half circle on the square we can derive the Golden Mean. The segment of the diameter outside the square and base of the square will be in extreme and mean ratio (A:B::B:AB). If the rectangle on the base line is completed, it will consist of a square and an another rectangle similar to the parent rectangle. One can continue to nest this square-rectangle pair within the original and generate a resulting spiral. Each of these rectangles are Golden Mean rectangles.

If we start with the above construction for the Golden Mean but place a GM rectangle on both sides of the original square, this is the square root of five rectangle.

The square root of three is clearly distinctive from the others by the greater narrowness. Its main characteristic is that it is distinctive from the golden rectangle and the double square. The double square is really the square root of four. The final rectangle that can be used and the most elongated is the square root of five.

One can look at the derivation of the Golden Rectangle mathematically by considering the summation series where each succeeding number of the sum of the prior ones:

1-2-3-5-8-13-21-34-55-89 ...

n(i) = n(i-1) + n(i-2)

Consider A:B::B:C, for example: 1:2::2:3 or 2:3::3:5. For this series, the product of the means BB is always 1 greater than the product of the extremes AC.

BB +1 = AC or BB = AC + 1

As the numbers in the series gets larger the error of one becomes very small and the resulting limit is the Golden Rectangle where the product of the means equals the product of the extremes.


Definition of GR: r = B/C = A/B

BB = AC implies BB = A(A+B)

r*r + r - 1 = 0

r = .618 and 1/r = 1.618

Also the set of ratios given by this series has frequent occurrence in nature. These ratios characterize different logarithmic spirals found in nature (e.g., pine cones, sunflowers, flower petal arrangements, pineapples, etc.).

The facade of the Parthenon encloses a major rectangle (on its side) which is a Golden Mean Rectangle. This can be further subdivided (using the columns) to show GMR shapes within it. This gives the building a certain sense of rhythm. Many artistically pleasing pictures exhibit a sense rhythm contained within the forms. Other ways of getting rhythm from shapes is to alternate circles and squares within one another or to continuously subdivide triangles, pentagons, hexagons and five and six pointed starts within the circle. There are many examples of these patterns in architecture, paintings, quilts, etc. What is very significant is that the artist may not have a conscious recognition of the underlying mathematics. This provides the evidence that this appreciation of certain shapes and resulting patterns is a physiological property of human visualization.

More elongated rectangles can not be distinguished; however, there might be occasions to use highly elongated rectangles (e.g., tool bars, menus, scroll bars, status lines, etc.). An extreme elongated rectangle might be an index that has connections to many other windows so that it is viewed as going into virtual or hidden space outside the monitor range.

The use of margins are a critical factor in developing easy to perceive collections of shapes and areas. They allow the user to detect a visual pattern that aids in separating different things. A one line margin between paragraphs and a two character margin between columns are standard minimums that are desirable in most situations. Even in our earlier recipe design problem we pointed out that a one line margin between the instruction steps in a recipe made it much easier for people to be able to look away and look back without loosing their position. One can use lines instead of space but this tends to make screens more complicated. In any case one thin line to separate areas is a better approach than multiple lines and heavy or ornate boarders.

12.3.1. Color & Shapes There have been various arguments for certain colors being associated with certain shapes. One such view (Itten, 1971; Dreyfuss, 1972) offers the following relationships of shapes and colors.

The square symbolizes matter, gravity, and sharp limitation. All shapes characterized by horizontals and verticals may be assimilated to the square form. The square corresponds to red the color of mater and weight. The triangle and its acute angles produce an effect of pugnacity and aggression. It is the symbol of thought, and among colors its weightless character is matched by yellow. The circle exhibits a sensation of relaxation and smooth motion. It is the symbol of spirit. The ancient Chinese used circular elements for religious designs. The circle corresponds among colors to blue. The secondary colors are matched as orange to the trapezoid, violet to the ellipse, and green to the spherical triangle.

12.3.2. Psychological Properties The type and directions of lines that make up a form or a figure can convey psychological properties. Horizontal lines imply harmony and stability. We use horizons to orient ourselves. It is not strange that most menus and controls are in horizontal rows. Vertical lines often imply spirit, dignity, religion, and a sense of "uplifting." Vertical forms often add grace to a design. Diagonal lines convey instabilities or motion. Diagonals can generate a sense of soaring or plunging. Circular and curved lines invoke a sense of calm. Hard bold lines convey a sense of speed and soft fuzzy lines seem to be slower. Sharp angles, jagged edges, and asymmetry all convey feelings of stress.

The circle is representative of continuity and timelessness. It is the most self contained of shapes. It is used to represent balance and order in many different cultures. Triangles and rectangles can either represent stability or instability depending upon their orientation to the horizon. Humans will try to group lower level pieces of a diagram together to form higher level constructs. Dots scattered on a page at random will get grouped into collections of dots according to the ones make tighter patterns. Those parts nearest each other will tend to form groupings against a background of empty space. Furthermore, visual units which resemble each other in shape, size, color, and direction will be seen together as a homogeneous grouping even when they are separated in space by other objects. These are interpretations of a "law of similarity" in design.

Humans are always seeking a completeness or "Gestalt." The Gestalt theorists point out that humans are seeking a completeness in forms and design. A straight line is project to continue. A part of a circle will infer the whole circle. Good design recognizes the need for this completeness as part of the design conception. Psychologically closed areas in a diagram are more stable than open areas. To achieve closure is considered psychologically more rewarding. If one looks at a card that has been torn in half and lies them in a surface, the eye will seek to match up the two pieces and confirm that they would fit together to make a whole.

12.3.3. Depth In interface design we have to deal with a two dimensional surface. There are many situations were we wish to give an impression of depth. There are in fact eight different ways that one can convey a sense of depth on a two dimensional static surface and the computer screen offers us a ninth that the graphic designers have largely ignored. These methods are:
1. Contrast and gradation in size.
2. Converging parallels and diagonal action.
3. Position in the picture plane.
4. Overlapping.
5. Transparency and exposure of hidden lines.
6. Diminishing detail
7. Atmospheric perspective
8. Advancing and receding color.
9. Motion in and out of the plane such as zooming.

 Our mind interprets things according to experience. When we see a large and small version of what we think is the same object we will infer mentally that the smaller one is farther away. We also have a natural sense of perspective and what we consider to be parallel lines will converge if they are far enough way. Furthermore, the sense of light sources and shadows can be used to further enhance perspective.

The horizon is always at our personal eye level. The higher in the air we go the steeper the ground plane will seem to rise. If one puts more distant objects higher up on the screen surface a sense of depth and space is created. This can be done in conjunction with size changes to enhance the fact or it size changes can be ignored and still there is an effect of depth. This technique shows depth without disturbing the flatness of the picture plane.

Overlapping is a common way we show depth in windows so we can easily view a set of windows as being in front and behind others:

Another form of overlapping is to show objects penetrating one another, inter locking, and or inter lacing. All these forms of object relationships can give the user an impression of depth.

Transparency is a variation of overlapping. One can imagine installing glass planes in a surface to view what is behind it. One can create engineering type drawings where hidden lines become visible or one can use artistic style tone changes to give an impression of hidden items. Objects that are farther away are less clear with respect to detail then the same type of item in closer proximity. This is a technique that is very commonly used in painting. The depth of atmosphere through which light travels changes the tones and color quality of surfaces. A gradual change of tone and texture in a surface can give an impression of it receding into a distance. The use of color differences as a depth mechanism has been discussed earlier.

Computers provide the startling dimension of using motion to give an impression of depth. One can zoom in and out of the plane which in effect can move things closer or farther away. One can rotate to provide an aerial view of what was a front view. For example if the windows had depth we could look down on the collection of windows on our screen and see the bridges between them in terms of the path we took to get from one window to another.

Panning in the x and y dimensions gives us unlimited scope of our view and further impressions of vastness. Even early primitive drawings show aerial views of such things as hunting grounds. In general we have all the following motions to work with:

Certain objects convey motion by their shape and orientation. For example a raindrop or tear shape. A plane level with the horizon appears to be flying, pointing up or down slightly it appears to be climbing or landing (if the ground is close). If the angle of the plane is large it can give the impression of crashing. Impressions of motion translate into impressions of depth.

Three dimensions is a more natural human perception than two and our brain seeks to create that third dimension even when we know we are using a two dimensional screen.

12.3.4. Conclusions Signs, forms, color and typology are all related and have a number of general principles that apply to the over all quality of the interface design.

Regularization: Establishing a repeatable pattern through the combination of form and color allows the user to abstract the meaning provided by a distinct design. Form, color, and even type fonts allow multiple ways of coding that can become implicit and transparent to the user so that he or she does not have to utilize limited cognitive processing ability to take advantage of the coding.

For any screen or display one test the designer should perform is the "squint" test. Close one eye and look at the screen by squinting with the remaining eye until details go out of focus and observer what seem to be the resulting distinctive things that attract and hold your attention. If these are the things you were designing for you are fine, if not you have some problems in the overall spatial organization and coding of your screen.

12.4. Assignments: Color
1.  Design a user control system that allows a user with some form of color deficiency to adjust colors used to those that he or she can adequately perceive and distinguish from one another.
2. Design a schema for the use of both color and shape to classify icon tools in a word processor.
3. Design a color schema for coding via color the age of files.
4. How could color be utilized to enhance any of the following systems: Hypertext, a Help System, a Computer Mediated Communications System, and/or a database retrieval system.
5. Design a color scheme to show the traffic density on a per unit of time bases for a highway system.
6. Design a color scheme for an interface that most people would find repulsive or disgusting.
7. Design a color scheme for an interface to a biblical database.
8. Design a color scheme for an interface to a war game.

12.5. Assignments: Typography
1. Construct 36 or more squares and within them arrange a single line (about 2/3's the size of a side of the square) and a filled in circle about the size of a 12 point "o" in different pleasing patterns.
2. Construct at least five different screen layouts containing areas for: workspace, status, reactive command set, system and help messages, and strategic commands.
3. Construct a table where each column is a set of letters that are informative about a font and each row is different font available on your computer. What did this exercise tell you about the differences in the fonts you have and how you might use them.
4. What combination of fonts (and why) would you use to code: strategic menus, reactive menus, status information, data fields in objects, body text, and error messages?

12.6. Assignments: Forms & Signs
1. Create a sign that can be utilized in interface situations as an icon, symbol, and an index.
2. How would you break up the different types of functions in word processing into categories of icons? Design the use of shapes to code the different categories of icons. Add a redundant color coding and design a sample of one icon for each category (assuming you have an icon design package you can use).
3. What types of index signs would you need to represent a multitasking situation?
4. For a particular application design a family or coherent set of signs to be used throughout that application.
5. Design a set of 20 to 30 signs to be used as a standard to convey emotional social content in the messages flowing in your organization.

12.7. References

Albers, Josef, (1971), Interaction of Color, Yale University Press, New Haven, Conn.

Atencio, Rosemarie, "Eyestrain: The Number One Complaint of Computer Users," Computers in Libraries, v16, number 8, September 1996, p40-43.

Bauersfeld, Penny F., and Slater, Jodi L., (1991), User-Oriented Color Interface Design: Direct Manipulation of Color in Context, CHI '91 Conference Proceedings, 417-418.

Benbasat, Izak, Dexter, Albert, "An Experimental Evaluation of Graphical and Color-Enhanced Information Presentation," Management Science, v31, number 11, November 1985, p1348-1364.

Benbasat, I., Dexter, A. S., and Todd, P. The Influence of color and graphical information presentation in a managerial decision Simulation. Human Computer Interactions. (1986), 65 -92.

Benbasat, Izak, Dexter, Albert, Todd, Peter, "An Experimental Program Investigating Color-Enhanced and Graphical Information Presentation: An Integration of the Findings," Communications of the ACM, v29, Number 11, November 1986, p1094-1105.

Benbasat, Izak, Dexter, Albert, "An Investigation of the Effectiveness of Color and Graphical Information Presentation Under Varying Time Constraints," MIS Quarterly, v10, Number 1, March 1986, p59-83.

Berlin, B., Kay, P., "Basic Color Terms: Their Universality and Evolution," University of California Press, 1969.

Bertin, J. The Semiology of Graphics. Univ of Wisconsin Press, Madison, Wisc., 1983

Blanchard, R. W., (1984), Graphic Design, Prentice-Hall, Englewood Cliffs, NJ.

Bliss, Charles K., (1978), Semantography-Blissymbolics. Australia: semantography-Blsissymbolics Publications, 3rd Edition.

Brockmann, R. John, "The Unbearable Distraction of Color," Transaction on Professional Communications, v34, number 3, September 1991, p153-159.

Cahill, Mary-Carol, Carter, Robert, "Color Code Size for Searching Displays of Different Density," Human Factors, v18, Number 3, June 1986, p273-280.

Carter, Robert, "Search Time with a Color Display: Analysis of Distribution Functions," Human Factors, v24, Number 2, April 1982, p203-212.

Cataldo, John W., (1966), Graphic design & Visual Communications, International Textbook Company, Scranton, PA.

Christ, Richard E., (1975), Review and Analysis of Color Coding Research for Visual Displays, Human Factors, 17(6), 542-570

Courtney, A. J., "Chinese Population Stereotypes: Color Associations," Human Factors, v28, number 1, 1986, p97-99.

Craig, James, Phototype Setting: A Design Manual, Watson-Guptill Publications, N.Y., 1978.

De Sanctis, G. Computer graphics decision aids: direction for research. Decision Science 15, 4 (Fall 1984), 463-487.

Dreyfuss, Henry, (1972), Symbol Sourcebook, McGraw-Hill, NY.

D’Zmura, Michael, "Color in Visual Search," Vision Research, v31, number 6, 1991, p951-966.

Emmer, Michele, The Visual Mind: Art and Mathematics, MIT Press, 1993.

Eckstein, Helen W. (1991), Color in the 21st Century, Watson-Guptill: NY, NY.

Erhardt, Louis, "Twenty Answers to Questions of Color," Lighting Design & Application, v17, January 1987, p55.

Fisher, L., Grice, R., Ramey, J., and Ridgeway, L., "Online Information" What Conference Attendes Expect (A Report of a Survey)," Technical communication, v34, number 3, 1987, p150-155.

Foley, James, Grimes, Jack, "Using Color in Computer Graphics," IEEE Computer Graphics and Applications, v8, September 1988, p25-27.

Friedhoff, Richard M., and Kiely, Thomas, (1990), The Eye of the Beholder, Computer Graphics World, August, 46-56.

Galitz, Wilbert O., (1989), Handbook of Screen Format Design, QED Information Services, Inc., Wesley, MA.

Garcia, Marelys L., Caldera, Cesar I., "The Effect of Color and Typeface on the Readability of on-line Text," Computer and Industrial Engineering, v31, number 1-2, October 1996, p519-521.

Hamilton, Charles, The Illustrated Letter, Universe Books, NY, 1987.

Harrington, Steven, (1987), Computer Graphics: A programming approach, McGraw-Hill: NY, NY.

Hoadley, Ellan D., Investigating the effects of color, Communications of the ACM, 33,2 (February 1990), 120-139.

Horton, William, "Overcoming Chromophobia: A Guide to the Confident and Appropriate Use of Color," IEEE Transactions on Professional Communication, v34, Number 3, Sept 1991, p160-173.

Itten, J. (1970), The Elements of Color: A Treatise on the color System of Johannes Itten (Based upon the book: The Art of Color 1961). Editor: Birren, Faber, Trans. E. van Haagen, Van Nostrand Reinhold.

Ives, B. Graphical user interfaces for business information systems. MIS Quarterly, Special Issue (1982), 15-47.

Jones, Gerre, How to Prepare Professional Design Brochures, McGraw-Hill Publishers, 1976.

Jones, Mari Riess, (1963), Color Coding, Human Factors, December, 355-365.

Jones, Mark K., (1989), Human-Computer Interaction: A Design Guide, Educational Technology Publications, Englewood Cliffs, NJ.

Jubis, Rebecca M. T., (1990), Coding Effects on Performances in Process Control Task with Uniparameter and Multiparameter Displays, Human Factors, June, 32(3), 287-297.

Kaufmann, R. & O'Neil, M. C., "Color names and focal colors on electronic displays," Ergonomics, v36, Number 8, 1993, p881-890.

Kearsley, Greg and Halley, Robin, (1987), Designing Interactive Software, Park Row Press: LaJolla, CA.

Labuz, Ronald, Typography & Typesetting, Van Nostrand Reinhold Publishers, NY, 1988.

Lachman, Roy, Lachman, Janet, Butterfield, Earl, "Cognitive Psychology and Information Processing: An Introduction," Lawrence Erlbaum Associates, Hillsdale, 1979.

Lalomia and Happ, (1987), The Effective Use of Color for Text on the IBM 5153 Color Display, Proceedings of the Human Factors Society, 1091-1095.

Lewis, John, Typography: Basic Principles, Reinhold Publishing Corporation, NY, 1968

Marcus, A. The ten commandments of color: a tutorial, Computer Graphics Today 3, 11 (Nov. 1986),7, 12, 14.

Matthews, Michael L., Lovanik, John V. and Mertins, Karen, (1989), Visual Performance and Subjective Discomfort in Prolonged Viewing of Chromatic Displays, Human Factors, June, 259-271.

Meyer, Gary & Greenberg, Donald, "Color-Defective Vision and Computer Graphics Displays," IEEE Computer Graphics and Applications, v8, September 1988, p28-39.

McDonald, James E., Molander, Mark E., and Noel, Ronald W., (1988), Color-Coding Categories in Menus, CHI '88 Conference Proceedings, 101-106.

Murch, Gerald, "Physiological Principles for the Effective Use of Color," IEEE Computer Graphics and Applications, v4, November 1984, p49-54.

Murch, Gerald, (1987), Color Display and Color Science: Color and the Computer, Academic Press, Inc.

Mullet, Kevin, and Sano, Darrelll, Designing Visual Interfaces, Prentice Hall, 1995.

Norman, H. John, (1987), Color and the Computer, Harcourt Brace Jovanovich,: Boston, MA.

Norman, Richard B., (1990), Electronic Color: The Art of Color Applied to Graphic Computing, Van Nostrand Reinhold, NY, NY.

Pastoor, Siegmund, (1990), Legibility and Subjective Preference for Color Combinations in Text, Human Factors, April, 32(2), 157-171.

Paterson, D. G., Tinker, M. A., (1940), How to Make Type Readable, Harper & Brothers Publishers, NY.

Rabb, Margaret Y., The Presentation Design Book, Ventana Press, 1993.

Rice, John F., (1991), Display Color Coding: 10 Rules of Thumb, IEEE Software, 8(1), January, 86-88.

Roy, Trina, & Bryson, Steve, "Accurate Color Mapping Through Textures," Computers in Physics, v10, number 4, July/August 1996, p366-371.

Ruder, Emil, Typography, Verlag Arthur niggli Teufen AR, Switzerland, 1967.

Scott, R. G., (1951), Design Fundamentals, McGrawHill Book Company, NY.

Sebeok, Thomas, (1991), A Sign is Just a Sign, Indiana University Press, Bloomington, Indiana.

Shneiderman, Ben, (1987), Designing the User Interface, Addison-Wesley Publishing Co., Reading MA, 336-342.

Strickland, Dara, Pioro, Barbara & Ntuen, Celestine, "The Impact of Cockpit Instruments on Pilot Exhaustion," Computers and Industrial Engineering, v31, number 1-2, October 1996, p483-486.

Travis, David, Effective Color Displays: Theory and Practice, Academic Press, 1991.

Travis, David S., Bowles, Susan, Seton, John, and Peppe, Roger, (1990), Reading from Color Displays: A Psychophysical Model, Human Factors, April 1990, 32(2), 147-156.

Tufte, Edward R., (1983), The Visual Display of Quantitative Information, Graphics Press, Cheshire CT.

Tufte, Edward R., (1983), The Visual Display of Quantitative Information, Graphics Press, Cheshire, CT.

Tufte, Edward R., (1990), Envisioning Information, Graphics Press, Cheshire, CT.

Tullis, Thomas S., "An Evaluation of Alphanumeric, Graphic, and Color Information Displays," Human Factors, v23, Number 5, October 1981, p541-550.

Tullis, Thomas S., (1991), An Evaluation of Alpha Numeric, Graphic, and Color Information Displays, Human Factors, 1991, 23(5), 541-550.

Ware, Colin and Bearry, John C., (1988), Using Color Dimensions to Display Data Dimensions, Human Factors, April, 30(2), 127-142.

Wierzbicka, Anna, "The meaning of color terms: semantics, culture, and cognition," Cognitive Linguistics, v1, number 1, 1990, p99-150.

Wilson, Adrian, The Design of Books, Peregrine Smith Publishers, 1974.

Winn, William, "Color in Document Design," IEEE Transactions on Professional Communication, v34, number 3, September 1991, p180-185.

American National Standard for Human Factors Engineering of Visual Display Terminal Workstations, The Human Factors Society, Inc. 1988.

Human Factors of Workstations with Display Terminals, IBM Corporation, 1979.

ACM Transactions on Graphics, July 1992, Issue devoted to the topic of Color, ???.

ISO 9241: Ergonomic requirements for office work with visual display terminals.

Typography and Design, United States Government Printing Office, Washington 1951.