Graphic Design for Programmers

Liam Quin, XML Activity Lead, W3C

Abstract

Programmers often don’t get exposed to graphic design theory; it’s easy to imagine it’s all about wishy-washy “artsy” stuff or that it isn’t important or useful.

In fact, graphic design is a mix of clear and scientifically sound principles and æsthetic judgement. An understanding of the underlying principles will help you to communicate more effectively. You can use these principles when you build dialog boxes and program windows as well as when you make Web pages or printed designs.

Introduction

Programmers and engineers are creative people, working on solving complex problems in original ways, but that creativity is often not turned towards typography, graphic design and layout. This paper is intended to introduce some of the principles of typography in such a way that programmers can quickly discover the most important principles that they can then apply themselves. Rather then focus on the tools of the trade – font formats, kerning, colour separation, rules of punctuation – I have chosen to focus on the larger picture of why it’s useful to know about typography and graphic design, and in particular to relate this to the human vision system so that you can see it’s based on real and solid principles.

The rules of graphic design are, of course, made to be broken, often with stunning success. But before you can break the rules you have to know what they are.

The following sections each describe a single basic principle. To aid memory I have given them names whose first letters taken together form a word.

The interested reader is also encouraged to see the further reading section at the end of this paper, where a short annotated bibliography describes some resources for learning more.

Grouping

The human eye tends to see things that are next to each other as related to one another, and things that are far apart as unrelated.

Figure 1 - nine shapes
Illustration 1: Nine shapes, or two separate groups of shapes? In Illustration 1, the viewer may perceive two columns of shapes, one double and one single, or may see one group of six shapes and one group of three, but will be unlikely to respond, “I see six circles and three squares.”

This effect is the result of biological vision processing, which tries to make sense of the world by clustering visual data into objects.

As a practical result, put labels on dialog controls near to the corresponding control, and not near to other labels; put headings nearer to the text to which they refer than to preceding or other text. You see Web browsers often giving equal space before and after a heading, when there should be more space above the heading than below.

The way we read text involves parallel processing, with one part of the brain recognising overall word shapes and another part controlling the motion of the eye from word to word. From the principle of grouping you won’t be surprised that the word spacing has to be less than the line spacing, because otherwise the eye tends to jump between lines when reading. A good default for word spacing is the width of a lower case “i” in most cases. Fonts usually contain a default value for this, too.

The longer the line of text, the longer it takes the eye to move back to the start, and hence the more line spacing you need. Fonts with a small x-height tend to need more line spacing too. A consequence is that whenever you let a user choose a font, a font size, a line length or word spacing, you must also let them choose line spacing. Some TrueType and OpenType fonts contain a default value, but this is almost always too small for continuous text. A good default is 120% of the font size, so that a font that says it’s ten point should have baselines twelve points apart, unless the lines are very long or very short, or the font has unusual proportions.

Since the ascenders and descenders of lower case Latin script make distinctive word shapes, you also would expect that lower case is easier to read, and experiments have confirmed this. This is why the US cigarette companies print health warnings in upper case, by the way.

Uniformity

Just as the eye perceives relationships based upon proximity, it also notices things that are treated differently from their peers, things that “stand out.” If you use a circular bullet to introduce list items in all places except one, where you use a star, people will notice and wonder why. They will assume significance to variations in style even if no significance was intended.

This means, of course, that you should treat similar things in similar ways. If you use a small arrow to indicate the presence of a pop-up “context” menu in one place, do it everywhere, and be aware that users will then be surprised if there’s a context menu somewhere that doesn’t have the visible symbol. A visible symbol whose purpose is to provide people with a clue that they can click on something is called an “affordance.” An example in the every-day world might be the row of ridges showing where you should push and slide in order to open a battery compartment.

This principle can be combined with that of grouping to say that regular layouts are to be preferred. However, the human vision system changes with age, and children tend to deal better with irregular layouts. If you play memory card-games with children, you can bias the game in favour of the children by using an irregular layout of cards, or in favour of the adult with a regular arrangement in columns and rows. Software for children needs to be designed with this in mind, as do printed books.

From a programmer’s perspective, you can encourage uniform treatment of objects, whether in printed designs or of widgets in windows, by providing high-level objects that automate the repetition. For example, a window control with a label can usually be considered as a single object, and then the spacing between the control and object can be automated.

Alignment

The human eye has a conscious resolution of approximately 10-4 radians. It is not difficult to construct experiments to measure this. In practice, this means that a misalignment of under a tenth of a point (1/720th of an inch, or about 1/2th of a millimetre, is consciously detected by the human eye. A person may be subconsciously aware of even smaller misalignments, of course.

This means that if two things almost line up, the design will generally be made stronger if they exactly line up with each other. For text, you should normally align baselines, the imaginary line upon which Western characters sit. For non-Latinate scripts there are other conventional alignment points. If two adjacent words are in different size fonts, the baselines must still align perfectly. Approximate alignment is very noticeable.

Illustration 2: Example of a drop cap, using a decorative initial Note the alignment with the baseline of the third line of text, and with the cap height in the first line. If you have a text field where users can enter information, and an associated label next to it, the baselines of the text in the label and in the text field should align perfectly. If you have multiple text entry boxes one above the other, align the left-hand edges (if Western) of the boxes. Since you need the labels as near as possible to their boxes, this means you end up right-aligning the text of the labels. This means it’s harder to skim down the list of labels, but if you have a dialog box with several hundred text entry boxes you should reconsider the design altogether! With fewer than ten items, the right alignment gives a huge improvement in appearance for little or no loss in speed, and with more than ten items, the loss in ability to skim down is balanced by the fact users are less likely to lose their place within the list when filling in data.

Designs in which things are precisely aligned tend to look slick. Designs in which things are almost aligned tend to look sloppy. Illustration 2 shows a drop capital done right. Notice how the top of the large initial aligns with the top of the first line of text, and the baseline of the initial (the feet, if you will) aligns with the baseline of the third line of text. Getting this right involves careful control of the line spacing, and then taking the cap height of the first line of text into account. It’s not simply a matter of multiplying the text size by the number of lines.

Illustration 3: Redesigned dialog: labels are close to the corresponding controls. Fields have also been grouped to bring out their meaning. Illustration 3 shows a dialog box done in two ways: the same information is made available in both cases, but one looks slicker than the other, and less distracting. People can interact with it without noticing its layout, which is a hallmark of clear and effective design. It could easily be improved upon, and is not HIGified, but I hope it’s clear that the principles of alignment and grouping have already made the dialog more effective.

Differentiation

Just as the principle of uniformity says that if two things are the same, they should look the same, the principle of differentiation says that if you want two things to be different, you should make them clearly different. This principle is moderated by the principle of elegance, which will be discussed in the next section.

You can differentiate using colour, size, boldness, style, position, and on the screen with animation; a text reader can use pitch, volume, speed and even voice gender. Do not, however, overdo things. If a page of text contains a single word in a bold font and a larger size, the reader’s eye will immediately be drawn to it. If it’s a heading this might not be a bad thing, as it helps the reader to find the start of a section. If it’s a word in the middle of a sentence, you don’t really want the reader to notice how you’ve differentiated it from the test of the text, but only to notice that it’s different. The user shouldn’t read all the emphasised words on a page first, and then all the keywords (like uniformity) and then the rest of the text. They should notice the emphasised words only when they reach them in a sentence. For these reasons, use italic to stress a word. In Gemany it’s common to use letterspacing for emphasis, perhaps because this slows down the reader, but in other countries this is not usual and will most likely be perceived as a printing error.

However you choose to differentiate design elements, try to do so uniformly (of course) so that the user isn’t distracted. Our ability to perceive differences in style, in colour, in alignment, are very finely-tuned, and we may subconsciously notice a difference that we aren’t consciously aware of.

Elegance

This principle is also sometimes called proportion or scale or even fitness. If you take a large sheet of paper (A3, say) and put in 7pt (so small it’s hard to read) the words “White Socks Not Allowed Here”, and pin the sign to your office door, people will be confused. Similarly, overly large text can startle people. The warning labels on cigarette packets in the USA use small text, often smaller than the brand name, and this subconsciously communicates a degree of unimportance. The labels in Canada and the UK are much larger, communicating a sense of urgency.

A sense of scale, then, sounds very subjective. There’s certainly a large cultural part of it, but there are constraints on scales and proportions that appear to be innate to the human vision system across all cultures.

If you draw rectangles of varying proportions and ask people which ones are most pleasing, you might expect pretty random answers, but in fact there are fairly constant answers world-wide. People prefer rectangles in the Golden Proportion to all others. Next to that they prefer ratios with simple whole numbers such as 3:4, so that a piece of paper nine centimetres on one side and twelve on the other will be found more pleasing to most people than one that’s nine centimetres on one side and eleven on the other: 9:12 is the same as 3:4, and is a harmony, but 9:11 is a dissonance. A few other proportions are also found pleasing, although less than the golden ratio. One in particular is 1:√2, and this ratio is the basis for the ISO metric paper sizes used in most countries outside North America.

Illustration 4: Margins in this duoble page are in the ration 1:1:2:3, with a division into ninths. [Tsichichold p. 36ff] If you have chosen paper of a pleasing size, you then need to realize that the outline of the body of text on that paper also makes a rectangle which should, where possible, be in a pleasing ratio, and ideally the same ratio as that of the paper. This constrains the corners of the text area to be on the leading diagonal of the page, a fact known to mediæval scribes but forgotten when typography passed into the hands of engineers who did not have the formal training given to apprentices. This does not reflect badly on the engineers, but rather on the secrecy of the guild system used at the time to control knowledge and power. Illustration 4 shows the diagram of page proportions, which was rediscovered by Jan Tschichold by studying construction marks still visible on old books.

I have seen very few windowing systems that consider proportions of windows or dialog boxes at all. This is unfortunate, as it’s clear that a mixture of mismatched proportions creates needless tension and discomfort on the part of most users.

Just as page proportions are important, so is the use of proportion in other aspects of work. One should try to aim for the minimum amount of contrast necessary to achieve a goal. Consider, for example, chapter headings. If you have a single level of heading, so that a document contains headings and text, and if the headings are short, there may be no need to do more than put them in a bold font and have extra space before them (not after, see grouping). If the headings are numbered, you might not need the boldness. If you have headings and sub-headings, and you want readers to be able to skip quickly from section to section, skipping over sub-headings, you’ll need to use two forms of differentiation. You might make the chapter heading slightly larger (e.g. 14pt instead of 12pt) with an extra line or two of space before it, for example, or you might use bold for headings and italic (not bold-italic!) for sub-headings. A common error is to make headings too large. Mosaic and Netscape Navigator both had this problem, and for this reason, before the advent of CSS, graphic designers avoided the h1 element entirely. It was out of proportion, too big for the screen, and entirely unusable.

I’ve lumped proportion and scale under Elegance, because in an elegant design the proportion and size of all the elements is such that all elements relate to each other by the degree of their overall importance. In other words, you can make a design that is both slick and elegant by paying attention to all the principles described in this paper. A beautiful design also requires art, which is another matter entirely, of course.

Colour

There are two main senses in which the term colour is used in typography and graphic design. The obvious meaning (chromatic colour) refers to hue, of course, such as yellow, red, chartreuse and puce. The other meaning is found in the term typographic colour, and this refers to how light or dark a block of text appears. I’ll take them in reverse order.

Typographic Colour is affected by word spacing, letter spacing, kerning (which should always be turned on by default, Microsoft Word and OpenOffice notwithstanding), line spacing and of course choice of font. In well-designed pages the colour is even from one page to the next. There are no obvious unintended light or dark spots to distract the reader, and if you flip through a book quickly you don’t see some light and some dark pages where the text was uneven. Because the eye is good at detecting differences and patterns, this evenness is the result of careful hard work. The Further Reading section mentions a couple of books that will help you if you need to learn more about this.

Chromatic Colour in general is often used on computer screens, but it should not normally be used only for decoration. Use it to convey meaning, but be aware that people perceive colour differently. Some people can’t distinguish red from black, others can’t distinguish colours from each other at all. There are also cultural differences. In China, red is used to indicate good fortune, so that if a button appears with a red label, people will probably click on it in preference to a green label. In the West, red is more often used to mean danger, and green safety. A user interface that employs colours needs to be customizable both for individuals and for cultural preferences.

When you use colour to differentiate elements of a design, remember not to overdo it: one or two yellow lines or bold words can be much more effective than a whole page gaudily blinking. Time Square in New York might be an interesting experience but few people would call it restful or say that the lights and sounds did not distract them at all.

Careful, limited use of colour can make a design much more effective.

Summary

The principles of Grouping, Uniformity, Alignment, Differentiation, Elegance and Colour are not arbitrary. Although they all have aesthetic aspects, they are also governed by the nature of human perception. There are many other important principles in typography, but this paper must be presented in only a short session, and in any case the acronym ran out of letters. In her book The Non-Designer’s Design Book, Robin Williams describes Contrast, Repetition, Alignment and Proximity, which correspond closely to Differentiation, Uniformity, Alignment and Grouping, but the terms I have chosen work slightly better for user interface design. Kevin Mullet and Darrel Sano in Designing Visual Interfaces also talk about proportion and scale, which I have put together under the result of applying them; Elegance.

Above all else, I hope that I’ve given readers an insight into the way that typography and graphic design – the user interface of text and idea – are based on scientific principles that can be fairly easily explained, understood and applied. It should be admitted that the art and skill lies not only in how to apply the rules, but in when and how to break them.

Further Reading

Dowding, Geoffrey, Finer Points in the Spacing & Arrangement of Type, Hartley & Marks Publishers Inc., 1966, reprinted in 1995 with a foreword by Crispin Elsted. This excellent volume has many clear examples, together with rules of thumb such as `A round and generously formed letter like Baskerville can be set to a wider measure [line length] than a condensed face like Fournier.’

Williams, Robin, The Non-Designer’s Design Book, Peachpit Press, 1994. Robin uses a different mnemonic than I chose: Contrast, Repetition, Alignment, Proximity, with a less Gnomish but more memorable acronym. Her book is a definite classic: it’s also short and easy to read. Anyone involved in layout, typography or graphic design at any level is likely to have a copy of this book.

Bringhurst, Robert, The Elements of Typographic Style, Hartley & Marks 1999 (Second edition). Robert’s writing is steeped in folklore and anecdotes of printing, but if you decide you’re interested in typography this is a splendid and useful book to get. It’s more advanced than Robin Williams’ The Non-Designer’s Design Book, and if you only get one book, get Robin’s. But if you get two, let this be your second.

Tschichold, Jan, The Form of the Book: Essays on the Morailty of Good Design, Hartley & Marks 1981. An English translation (the original is in German) of a collection of essays on book design. The diagram showing page proportions is from this book. I don’t expect any except the utterly fascinated to explore this book, but I list it because I used his diagram and mentioned his discovery of page ratios. Jan was one of the foremost graphic designers and typographers of the 20th century.

2004-05-23T20:29:41