Also available to buy in a beautiful limited edition paperback and eBook.This work is licensed under a Creative Commons Attribution 4.0 International License.
It’s time to add some style to the interface with colour and typography.
I’ve heard this stage of a web project referred to as ‘colouring in’. This gives the impression that all the hard work of interface design has been completed in the composition phase and this is an inconsequential task for a monkey with a copy of Photoshop.
Of course, that couldn’t be further from the truth. The aesthetic style of an app has considerable influence on the attitudes of users towards the interface and can appreciably assist or degrade its usability. Consequently, although many user experience practitioners prototype and test black and white compositions prior to this stage, I believe that style is an intrinsic ingredient of the experience that can make or break an interface and should often be included in prototype tests.
Each topic in this chapter could fill a bookcase. For the sake of brevity, much of the history and typical preamble is omitted, so that we can concentrate on practical information for web interface design.
Although it may seem like we have absolute control of colour decisions, in reality there are a number of complexities in the transmission and interpretation of our choices.
The transmission of colour via the screen, to the eye and brain.
It is our duty as designers to take these issues into account as we choose the colours for our web app.
Examples of hue, saturation and value in the HSV colour model, plus colour temperature.
Scientists and designers use a variety of systems to classify the qualities of colour. A widely adopted model for digital colour is HSV: hue, saturation and value.
Hue is what we think of as the names of colours: blue, red, yellow, green – the different wavelengths of light. Saturation is the amount or purity of a colour. Value, also known as brightness, is the darkness or lightness of a colour.
Temperature is not part of the HSV model but is a useful attribute to consider. It is the subjective warmth that the colour emits based on the natural properties of heat and colour: the sun and fire are hot, so yellow and red are perceived as warm.
These attributes are not absolute. A colour is perceived in relation to those surrounding it, so it is important to consider how colours interact in combination.
The colour wheel model arranges colour hues in a circle, which provides a simple tool for the comparison and combination of colour schemes.
Examples of complementary, analogous and triadic colour relationships
Complementary colours are those that appear opposite each other on the wheel. They seem to vibrate or buzz when fully saturated and positioned near one another creating attention and tension. They can be made more harmonious by de-saturating one or both colours. Professional designers often allow one complementary colour to dominate, for example as a background colour, to maximise the contrast with the accent colour.
Analogous colours are adjacent on the wheel and often share the same temperature. They can feel luxurious, especially when desaturated, but offer less contrast; one of the colours should be allowed to dominate to avoid confusion between the similar hues.
Triadic colours appear at 120° angles on the circle. They provide good contrast and tension, even when slightly desaturated, and are less garish than complementary colours. Again, one of the colours should dominate the composition and at least two are usually desaturated to balance the design and avoid a gaudy feel.
Some colour combinations ought to be avoided to prevent problems for people with common forms of colour-blindness:
Quoterobot4 uses a simple complementary colour scheme with a dominant cyan background and an orange accent colour.
The colour temperature affects how distant we perceive an object to be. Cooler colours recede into the page and warmer colours, especially yellow, advance towards us.
A colour’s temperature can make objects appear closer or further away
The size of a coloured object will affect how we perceive the intensity of colour. Dark colours converge on black and bright desaturated colours on white.
Colour intensity is affected by size
In the example above, the two shapes share the same colour, yet the small line appears darker and less vivid.
Different hues affect a composition’s balance
The balance of the composition is affected by colour, with different hues assuming different weights. In this example, the dominant purple figure on the left appears stable and balanced but the dominant yellow figure on the right feels tense.
In 1810 Johann Wolfgang von Goethe published a Theory of Colours, in which he suggests a list of relative colour weights. I’ve converted this into the relative proportions required to achieve balance.
| Pure hue | Relative proportion |
|---|---|
| Red | 6 |
| Orange | 4 |
| Yellow | 3 |
| Green | 6 |
| Blue | 8 |
| Violet | 9 |
| Magenta | 6 |
| Cyan | 8 |
For example, a balanced orange and blue composition would feature twice as much blue (8) as orange (4).
Gist’s5 cool grey and blue backgrounds recede while the two important yellow elements pop to the foreground.
The use of colour to communicate meaning is powerful and complex. Our reactions are influenced by instinct, physiology and cultural experience. Red, for example, has the physiological effect of increasing blood pressure6 7, and is associated with anger, violence and danger.
Yahoo! Finance in the US and China, with opposite meanings for red and green
Web projects, with global reach, have to be mindful of potential cultural differences.
Red is an attention-grabbing colour that evokes danger, heat, love, passion, energy and hunger. It is frequently used as a warning colour to denote errors in web apps. It also induces urgency and excitement so is often used for buttons that commit to a transaction.
In China red represents happiness, success and good luck.
Yellow is a stimulating colour that can aid memory retention but can also become irritating after extended exposure. It is associated with cowardice or happiness in the west and with power and royalty in the east.
In web app design, yellow is increasingly associated with temporary information, such as notification messages and form feedback.
Green is a relaxing colour that is primarily associated with the environment, nature, growth and health. It is the colour of safety and is used in web apps for correct or satisfactory feedback.
In the west, green is used for increasing values and red for decreasing or negative values. In the east the opposite is true, and green is used for decreasing values.
Blue is a masculine, powerful colour that is associated with depression, sadness, frostiness and corporate business. Even so, it is calming and the most liked colour.
It is the default colour of hyperlinks on the web and should be used with caution for non-hyperlinked text.
Grey is a sophisticated, authoritative colour of precision industry. It also has the negative connotations of boredom, old age and seriousness.
It is usually used in web apps to display elements that are unimportant or not available to the user, such as form fields that can’t be completed.
Black is a strong, stylish, dominating colour. In the west it is closely connected to death and mourning, but in the east these subjects are associated with white.
White is pure, clean and empty. It can be luxurious, sophisticated and is almost universally recognised as the colour of truce.
Text is the principal element of many web app interfaces. It tells the user what to do, how to do it and what the result is.
Good typography communicates the text clearly and enhances the message, minimising errors and improving productivity. Poor typography stumbles through the text, undermining the message, confusing the user and ultimately leading to errors and disenchantment.
There are hundreds of typographic terms, but only a handful are needed to cover the basic concepts.
| Ascender | The part of some lowercase letters that extends above the mean line. |
| Baseline | The invisible horizontal line on which most letters sit. |
| Cap-height | The height between the baseline and the top of capital letters. |
| Counter | The area of negative space that is fully or partially enclosed by some letters. |
| Descender | The part of some lowercase letters that extends below the baseline. |
| Mean line | The invisible horizontal line that defines the top of most lowercase letters. |
| Serif | A vertical or horizontal detail added to the end of the strokes of the letter. |
| Tittle | The dot above a lower case i or j (in the Latin alphabet). |
| X-height | The height between the baseline and the mean line; usually the same height as a lowercase letter x. |
Some basic typographic elements
Our eyes skip very quickly along a sentence as we read, sometimes going back to re-read something we’re not sure of
Our eyes don’t smoothly scan sentences, but jump between words. We spend about 0.2 seconds looking at a point before jumping to the next point. The jump, known as a saccade, lasts for about 0.02 seconds and for average size screen text, skips about six to nine letters8 (our eyes clearly see about three to four letters either side of each point). A longer saccade jumps from the end of one line to the start of the next.
About ten per cent of saccades are reverse movements called regression saccades. Our eyes do this to check an ambiguous section of preceding text.
Fixation points tend to be positioned in the centre of words, and common short words are skipped. Even if they are up to fifteen letters away from the current point, our eyes can recognise and skip them.
We might recognise words by their overall shape or the shape of the individual letters
The mental process of word recognition is not yet fully understood. It may be that we recognise the shapes of words, or that we simultaneously process the features of individual letters.
In any case, we do not read each letter from left to right: it is the clarity and distinction of letterform shapes and their relationships that allows us to quickly scan lines of text. This is the essence of typography: the shape, spacing and interactions of letters and words.
A typeface can possess multiple fonts
A typeface defines the style and character of letters, and may be made available in a range of fonts: weights and variations of the typeface, such as roman (normal), bold and light italic.
Typefaces can be grouped according to their visual characteristics. For web apps, text is nearly always a functional element rather than decorative, so we only need to consider the two most basic classifications: serif and sans serif. Serif typefaces, such as Hoefler Text above, feature the serif details at the end of the strokes that make up each letter; sans serif typefaces, like Helvetica Neue, do not.
There are myriad research papers and personal proclamations about the comparative screen legibility of serif and sans serif typefaces, many of which are contradictory. For every paper or anecdote stating that long passages of sans serif text are tiring or that small serif fonts are less readable, another article presents data to the contrary9.
Typeface choice seems to follow trends as well as solving design problems. The default typefaces in early web browsers were serif fonts. As design became a more important aspect of the hypertext system, web designers began to embrace modern sans serif fonts like Helvetica, Arial and Verdana. Now it seems that serif fonts are making resurgence, in part owing to the improved rendering and clarity of fonts in web browsers, and possibly also simple nostalgia and a reaction against the previous sans serif trend.
Your decision should be based on practicality. Web apps tend to use text in small labels and short sentences rather than long blocks of text, therefore typographic decisions are different to those for websites: they should be based primarily on the legibility of the characters, rather than the readability of blocks of text.
A legible typeface, particularly one at small sizes, will exhibit the following properties10 11:
Legibility of typefaces, at 10pt (top) and 6pt (bottom) sizes
Fortunately, many of the common fonts available to us in web browsers exhibit these properties.
Of the serif fonts I prefer Georgia, which has clear counters at small sizes. In the example above, we see that Futura may have a nice consistent thick stroke and long ascenders, but the lowercase i and j are too similar. Helvetica is clearer, but short ascenders and descenders are less legible at small sizes. My preferred sans serif typeface for web app text is Gill Sans, which exhibits a consistent stroke width and longer ascenders.
The even, thick stroke of Futura makes for a good choice of reversed-out white on black text on Every Time Zone12.
The strokes and spaces of letters, words and sentences should produce a steady grey overall texture rather than gaps and clumps of pixels. In general, letter spacing (or tracking) is inversely proportional to the type size: small text should be spaced relatively further apart and large text closer together.
Letters are constructed from a variety of strokes and spaces, and so to create a constant horizontal rhythm, the spacing between them needs to take account of their individual optical characteristics: individual letter pairs need to be kerned rather than set at a uniform spacing.
Kerning individual pairs of letters creates a more pleasing visual effect
Luckily for us, the computer automatically kerns many professional fonts, but if you create an image with text in it, for example a logo or large heading, you may need to adjust the kerning manually. The practice of turning text into an image is not recommended and is increasingly unnecessary.
Leading, also known as line spacing, requires similar consideration to aid readability. The distance between the baselines of successive lines of text should always be greater than the text size (about 140% of the text size is a good starting point), but not so large that it becomes noticeable, and not so small that the reader may finish one sentence and saccade back to the beginning of the same sentence. The line spacing should increase proportionally as the width of the paragraph increases, to help guide the saccade between lines.
We saw earlier how the hierarchy of elements in a composition guides the eye by suggesting relative importance – this applies to the typographical elements within the composition too. A typographical hierarchy establishes the significance of and relationships between blocks of text.
An example hierarchy of font sizes. Measurements are in points; there are 72 points in an inch
Your hierarchy can be steered by the compositional grid. For example, if the important element of your app is a 320 pixels high chart you may decide to break this down into 20 units of 16 pixels each. These could form the baseline of your body text: the line spacing. If you use the 140% suggestion to set your text and line spacing, your body text size could be calculated as 16÷1.4 = 11px. All other components of the typography hierarchy should also align to the 16-pixel baseline grid: for example, a 24-pixel heading with 32 pixels line spacing.
In addition to using size, the hierarchy can be specified with varieties of italics, weights, colours and capitalisation (though preferably only for short heading styles). You can also use a variety of typefaces, but this needs special consideration.
Combining typefaces can easily lead to a muddled aesthetic and message, and should only be attempted if absolutely necessary for the design. There are too many subtleties to choosing complementary typefaces to cover here in detail, but be mindful of the following fundamental principles.
You usually don’t want typefaces to clash, so choose typefaces that look obviously different, for example, a serif with a sans serif. That is, unless you can identify type characteristics such as line quality, texture and mood, in which case feel free to use the Hoefler & Frere-Jones rule of “keep one thing consistent, and let one thing vary”.13
Although the typefaces should be visibly different, they should feel complementary, like colour combinations from a wheel. Choose typefaces that have similar x-heights, widths and ascender heights. For example, Verdana and Georgia are often paired because of their similar proportions.
Choose typefaces from the same historical period or designed with the same principles. For example, Futura and Bodoni share similar geometric form.
Finally, remember: if you don’t have to use more than one typeface, don’t do it. Unless you’re an expert, use no more than two.
Colour can be used to:
There are a number of web apps to help you get started with colour choices, including Adobe Kuler14 and Colour Lovers15.
Typographic choices can give a voice and clarity to interface text.
This work is licensed under a Creative Commons Attribution 4.0 International License.