To be able to use fonts appropriately, so that they complement the design rather than clash with it, designers need to master some of the skills of the typographer.
Font Basics
As a digital designer, fonts are a basic tool of your trade. The decisions that you make about which fonts or typefaces to use, and how to use them, can have a profound effect on the appearance and readability of your documents.
Since the advent of page-layout applications and the ready availability of a huge array of fonts, it often seems that many of the finer skills of the typographer have fallen by the wayside.
The choice of font tells your readers a lot about a publication before they even begin reading it. The mark of the true designer is knowing how to use – and, equally important, how not to use – fonts to give your documents the maximum possible impact.
What is a font?
The particular design of a set of characters – including all the letters of the alphabet, Arabic numerals, punctuation marks, and other symbols, such as accented characters – makes up a font or typeface. It’s worth remembering that in today’s world of page-layout applications, computer fonts are software.
This will help you to understand the different formats that fonts can take, the ways they can be bought and used, and how to deal with the problems and cross-platform issues that may arise when using them.
How fonts work
Computers encode each character in a font in the form of a number, turning the alphabet into a set of numbers that all applications can then interpret. On screen, however, what you see are graphic shapes of the members of the character set, which are reproduced by the particular font software you have chosen.
Fonts are distinguished by various graphical aspects that each font’s set of characters shares. For example, all the lowercase letters of the alphabet in a particular font share a common ‘x-height’ (see diagram below). Further variation comes from the different styles and weights that may be produced for each font ‘family’, such as italic and bold.
Font types and qualities
There are three main categories of font: serif, sans serif, and decorative.
Serif fonts
These fonts are distinguished by the short counterstrokes, or serifs, on the ends of their letters. Very generally, serif fonts add authority and classicism, while sans serif fonts convey modernity and immediacy. Serif fonts are considered easier to read for extended periods, so they tend to be used for the body text of books and newspapers.
Sans serif fonts
These give a clean visual image and are especially good for headlines and boxed text, although their uniformity tends to make them less legible in long passages of text. Having said this, these qualities are not always so clear-cut. For example, the large x-height of Helvetica – a sans serif font – makes it easily readable when used for body text.
Decorative fonts
As the name implies, these fonts should be reserved for decoration and do not make for easily read blocks of text.
Corporate environments
Designing documents for corporate use brings its own set of complicating factors, demanding fonts that combine functionality with the appropriate aesthetic qualities to reinforce the company image or brand.
- If you are creating documents for other people to use, you will need to consider compatibility. Are they using PCs or Macs? What software do they use? Which fonts do they have pre-installed?
- Establish a clear set of rules for the use of corporate fonts in different situations and make sure that these rules are agreed with other departments, such as marketing and editorial.
As you’ll see above what distinguishes one font from another are the different graphical characteristics of its set of glyphs – the slope of its ‘counters’, the relative size of its ‘x-height’, the shape of its ‘descenders’ and height of its ‘ascenders’, for example – all of which will have been carefully designed to make a specific impression.
Further variation comes from the different styles and weights that may be produced for each font ‘family’: plain (often called ‘Roman’ or ‘normal’), italic, semibold, bold, extra bold, condensed, thin, light, and so on. The differences between fonts, and among styles and weights, can be marked, or they may be very subtle.
Although these words (above) are all set in exactly the same size type, the differences in their appearance are pronounced. Note particularly the relative sizes of the x-heights: Verdana’s (Every) large x-height is the main reason why that font looks bigger than the others.
Fonts and design: basic rules
- Before you start designing a publication, read the text and think about the readership
- Begin any job with just two fonts. Use more only if you are sure you need them
- Invest in a specimen book showing the characteristics of different fonts or compile one yourself. Use a font utility program to print out custom specimen sheets for the fonts already on your computer
- Use tried and tested combinations – for example, a serif font such as Bembo for body text, with a sans serif such as Franklin Gothic Heavy or Gill Sans Extra Bold for headings. Some font families, such as Adobe Stone, contain a combination of well-matched serif and sans serif versions
- Keep body text between 9 point (for books) and 12 point (for newsletters and marketing materials)
- Use leading (the spacing between lines of text) to aid legibility. One rule of thumb is that body text should have leading around 2 points greater than the size of the type. For example if the text is set in 9 point, then the leading should be at least 11 point. Most design software automatically applies leading 120 per cent of the type size, giving 12 point leading with 10 point type
- Do not use ALL CAPS or underlining to highlight text. Bold or italics (but not both together) are better for emphasis. However, avoid using any of these devices for long blocks of text – it makes the text harder to read
- Ensure your chosen fonts have all the cuts, styles, and weights necessary to set the text. For example, an animal encyclopedia will probably require an italic cut in which to set Latin species names
Follow the conventions of colour composition to create better images.
Within a scene, we tend to see relatively large, plain elements as a backdrop to smaller, more distinct ones. The latter catch our attention first and seem closer. This principle is known as ‘figure and ground’, and is important for several reasons.
First, it contradicts the assumption that smaller items will necessarily seem less significant: in fact, they may well dominate.
Second, it tells us that a composition in which figure and ground are not immediately distinguishable may seem lifeless and uninvolving. Elements should be differentiated by size and colour.
Third, the principle of figure and ground combines with our knowledge of colour theory to help us understand the impressions created by colour within a composition.
Warm hues (in the red part of the colour wheel) tend to advance towards the viewer, while cool (blue) hues recede. Therefore, applying a warm colour to a figure will accentuate its tendency to jump out, and cool colours will encourage a ground to recede; reversing this will tend to negate the effect, giving a more balanced and less striking impression.
A small splash of warm colour on a cool background will be more pleasing than the reverse.
It might be assumed that figure elements should also be brighter than grounds, but in fact dark figures against a bright ground are much more acceptable to the human eye. We write in black on a white background, despite having long had the technology to do the reverse, because it seems more natural.
Changing the value (lightness) of the ground can have a strong effect on an image as a whole, especially in graphical compositions made up of uniform colour fields. Light figures on a dark ground seem to emerge from shadows or darkness, making them seem luminous and often mysterious or foreboding, an effect that was fully exploited in Renaissance painting.
A midtoned background either forces figure colours into a narrower range of values (all lighter or all darker than the ground), resulting in a muted or hazy effect. Or, by allowing some figures to be lighter and others darker than the ground, prevents the composition being interpreted in terms of spatial recession, an effect that is visually disorienting but can be graphically rewarding.
Elements that differ most in value from the background will always draw the eye first, almost regardless of differences in hue.
Colours are intensified by being placed on a very dark or very light ground, but their temperature and tendency to advance or recede may also be affected: blue on white can advance, while red always advances against black, even in extremely dark shades, as is powerfully demonstrated in the well-known paintings by Mark Rothko.
Repetition, or rhythm, is an important feature of many compositions. The use of colour can contribute to the effects of repeating lines and shapes: graduation of lightness and saturation can tell us which way movement is going, or reinforce the impression of forms fading off into the distance.
More distant objects appear lighter, less saturated, and less distinct, an effect that can be created by blurring or ‘feathering’ elements or reducing the detail with which they are drawn.
Progressive sequences of colour lead the eye and make the composition more dynamic, while repetitive sequences give a sense of order and balance. Closely spaced repetition of hues creates optical mixing, giving the overall effect of a continuously coloured surface. Similarly, exact repetition of lines, shapes or colour fields – pattern – can allow an area to appear uniform even though it may contain a large amount of detail.
We instinctively interpret colour and form as if they are part of a real-world scene. The photo above shows an interior receding into the distance. Reduced to a few simple colour fields (below), the image gives a similar impression of perspective and recession. Such effects play a part in how we ‘read’ any graphical composition, whether or not it aims to depict reality.
This carefully judged composition sets warm, advancing earth tones against cool, receding blues to give an immediate impression of scale and distance, despite comprising only simple forms. Note the use of repetition and leading lines.
Agent: Digital Vision;
Artist: Nigel Sandor
Top left: A natural figure/ground relationship. A large field of cool hue is interrupted by darker, smaller fields of warm hue.
Bottom left: With the colours reversed, the cool figures are equally well distinguished, but appear more numinous.
Defeating expectations of figure/ground colour relationships can create a more harmonious composition.
Top centre: Normal temperature relationship, reversed value relationship.
Bottom centre: Normal value relationship, reversed temperature relationship.
Playing with proportional relationships.
Top right: Because the large shapes are more regular, darker and warmer than the negative space, they tend to appear as figures in front of a ground.
Bottom right: With figure/ground cues now thoroughly confused, we flip between seeing blue discs and a red arch.
Progressive colour sequences are dynamic, suggesting motion or depth.
Top left: Increasing values lead the eye towards the centre of the composition.
Bottom left: Deprived of a contrasting ground, the dark central figure appears to recede into shadow. The lighter rings at the outside also recede, giving a less dynamic effect than above.
Repetitive colour sequences are static, discouraging the eye from travelling in any direction.
Top right: Contrasting shades preserve some of the depth effect created by the rings. Note the slight optical illusion of a spiral, which occurs when rings are broken or partly concealed.
Bottom right: Complementary colours further reduce any dynamic effect.
The repetition of colour and form within patterns such as this tartan creates a sense of order and balance which prevents them seeming garish or distracting.
Author’s URL: Alistair Dabbs and Alastair Campbell – www.ilex-press.com/digit.
