Type readability

The ability to read quickly and to understand what is being read depends on good typographic design reducing the effort required to comprehend the text. (It also requires good writing and copyediting, but that’s for another post.)

For readability, the choice of typeface, upper and lower case (U&lc), typesize, leading, line length, margins and paper colour and all need to be combined to produce readable copy.

For instance, most books are set using a serif font rather than sans-serif, because the serifs help the reader’s eye to rapidly scan along the lines of type on a page. This gives U&lc serif faces a high readability factor for longer passages of text.

Whilst sans-serif faces generally have a relatively low readability factor when set to longer line lengths, they have high readability factor on signage and when set in shorter line lengths. Sans-serif offers a sense of urgency, enabling the reader to scan quickly down the copy and assimilate information – a more appropriate reading experience for signs and magazines.

Common text type sizes tend to be between 9 and 12 point (depending on font) with leading set automatically by design software at around 120% of the typesize. This should always be adjusted by the designer with an appropriate amount of leading determined by the design. As a rule of thumb, for normal text, leading should be increased proportionally until around 14 point, when it should be decreased proportionally until around 18 point, after which it should be set solid (ie. 18/18pt). With larger type sizes and headlines, the leading should be further reduced to avoid creating too much space between lines.

In typesetting for legibility, the leading should never be less than the spacing between words, otherwise the readers eye is drawn down rather than across the page. However headline setting can often be set solid, or even to a minus value, without affecting readability. For longer measures, the leading might also be increased so it provides stronger definition to the line of text. As a rule of thumb, the longer the line, the greater the leading required.

In English, the line length normally contains between 50 and 80 characters for readability, resulting in an average of nine to 12 words per line. Scientific and technical papers, which are likely to contain longer words, tend to need a longer measure.

Finally, the margins around the type should allow enough white space to allow the reader’s eye to rest momentarily until it scans back to the start of the next line.

Note that glossy white paper, whilst great for images, makes text difficult to read.

So, so as long as you print on a matt paper stock, readability is governed by the designers ability to structure typeface, case, size, leading, line length and margins into a compelling design.

Type legibility

Legibility is the degree to which individual letters in a typeface can be distinguished from each other. Generally, the most legible fonts have a well-balanced proportion of form (the actual letter) and counterform or counter (the ‘holes’ in the letter). The best designed typefaces tend to have larger counter spaces, and due to their frequency of appearance in text, the most helpful aid to legibility is a generous ‘eye’ for an ‘e’ and an enclosed counter for an ‘a’.

However, for any given font size, too large a counter and corresponding x-height means too short an ascender and descender for clarity between other letters. The characters most commonly mistaken for each other are I, j, l and f and t, so the most legible typefaces need to strike the right balance between the size of the counter and x-height and size of ascender and descender.

Whilst problems of legibility can exist in the design of letterforms in individual fonts (for example lowercase Garamond h and b are easily confused, as are the capital I and lowercase l in Arial), research into typographic design for children by the University of Reading suggests that there is no intrinsic difference between the legibility of serif or sans-serif typefaces. Instead, the context in which they are used assumes greater significance.

Two well-documented experiments on the legibility of type are Emile Jamal’s 1878 demonstration that showed that the top half of a line of upper and lower case (U&lc) type is more legible than the bottom half when only half of the line is exposed, and the 1960’s London Transport tests on all caps or U&lc for bus signage. These series of experiments suggested that whilst there is no definitive proof that lower case is visually superior to all upper case, a mix of upper and lower case was more popular with the public.

This fed into the development of the UK motorway network signage when the Ministry of Transport’s Design Research Unit developed one of the most ambitious information design projects ever undertaken in Britain. In tests on signage designs, sans-serif U&lc type with a wide margin was preferred for legibility.

The result of this work suggests that it is not only the visual recognition of the letterform that is important, but also the shape of the word itself and the space that it sits in that the typographer needs to take into account when designing for legibility.

Legibility and readability

Legible type and readable type seem like synonyms, but typographically they are not the same thing.

Legibility refers to the recognition of individual letters and words, whilst readability is the clarity and speed at which content can be read and understood.

The legibility of a typeface is dependent on its design (and perversely some typefaces are deliberately designed to be illegible), whilst readability depends on the skill of the typographer in choosing a typeface and arranging the type well on the page.

One of the more common mistakes designers make is to choose a typeface designed for one purpose and use it for something else for which it is unsuitable. A classic example is the use of the display face Avant Garde as a text font. Equally, you would not use a difficult to read brush script for a fire exit sign where the meaning needs to be read and decoded quickly.

Since the introduction of the Disability Discrimination Act in the UK in 1995 and the Disability and Equality Act in 2010, typographic design needs to be inclusive of people with a wide range of visual impairments. Making sure that your type is structured to be legible and readable was always a hallmark of good design, but now it is a prerequisite.

In the next two posts I'm going to look at little deeper into some of the issues around the legibility and readability of type.

Effective images

How images are framed depends on the overall look and feel that the designer is trying to achieve, but there are various ideas that photographers – and painters – have found useful in creating effective images.

The selection, sizing and cropping of images is directly related to the accompanying text, in that they are either designed to illustrate the text, or the text provides an explanatory note to the image.

A common mistake is to use an image as it is provided, resulting in the use of poorly composed shots without a clear focal point or direction. Wheras any image can be made to work harder if the composition of subject elements is manipulated to communicate effectively with the intended audience.

There should be a good reason behind every image you select. Ask yourself;

• Is your chosen image relevant and meaningful to the audience?
• Is it right for the task and does it make the accompanying words work harder?
• Will the combination of the words and pictures get the reader thinking?
• Will the choice of image provoke the reader to do what you want them to do?

Designer and editor should work with a selection of close-ups, mid and long-range images. They should look to engage more directly with the subject matter and create interest through cropping, using orientation, symmetry or asymmetrical composition and the rule of three.

Cropping
Cropping is the easiest and most effective way to edit an image. This can change the whole emphasis of the shot by removing extraneous or distracting subject matter and manipulating the relationship between the subject elements and the edge of the frame.

Conversely a poor crop can ruin a good image. Be careful not to end up with a crop that is just slightly rectangular, as this communicates a sense of indecision.

Orientation
Picture shapes are normally dictated by the natural arrangement of elements. Landscape images tend to emphasise the relationship between subject elements to the left and right of the frame, whilst portrait images tend to relate background to foreground.

Choosing a landscape format for an image of a person, or using a portrait format for a landscape can produce an unexpected effect or pleasing juxtaposition.

Composition
People are predisposed to prefer symmetrical composition and this is the starting point for editing any image, placing the subject central in the frame. This signifies stability and strength.

However, symmetry can become monotonous and can lack movement. Asymmetrical composition places the subject off centre to create a more dynamic image with tension between the contrasting spaces around the subject.

The rule of three
The rule of three is a useful rule of thumb for asymmetric composition. Dividing the frame into vertical and horizontal thirds creates four ‘sweet spots’ at the intersections of the gridlines. Placing the most important elements of the image on or adjacent to these intersections can transform an ordinary image into one with a stronger composition.

Original image

Image divided into thirds

Image recropped with the subject positioned adjacent to the top right gridline intersection

Using these simple tools, a designer and editor can manipulate images in a structured way and get the most out of their pictures.

The quest for order

A cautionary tale about an obsession with structure
by Tony Pritchard

Wim Crouwel at the Design Museum

If you get the chance, take an afternoon out to visit the Design Museum where the Wim Crouwel retrospective is showing until July.

Regarded as one of the leading designers of the twentieth century, Crouwel embraced modernist principles, producing a wide range of typographic designs that influenced the course of graphic design through the 50s and 60s and continues to have resonance today.

Heavily influenced by the Bauhaus and the modernist design work of Jan Tischold and Josef Muller-Brockmann, Crouwel’s initial work as an exhibition designer gave him a great sense of spatial awareness that he brought to his poster and programme designs, first for the Van Abbe Museum in Eindhoven, and later for the Stedelijk Museum in Amsterdam.

Wim Crouwel's work at the Design Museum

Gifted with a sympathetic museum director who allowed him the freedom to develop a signature look, Crouwel developed a structured grid system which acted as a unique template for the Stedelijk Museum's graphic identity. The logic of his designs distil the subject down to its absolute essence, yet often the poster layouts contain an experimental element or visual pun, playing off the exhibition title or the subject artist's style.

In 1963 Crouwel founded the multi-disciplinary design agency Total Design creating the identity for numerous Dutch companies, working for clients such as IBM, and typeface commissions for Olivetti. He was instrumental in leading a controversial redesign of the dutch telephone book using only lowercase letters - offering major savings on ink and paper - but one which failed to find favour with its audience.

New Alphabet (redrawn)

Whereas his strength lay in designing one-off grid-based posters and wordmarks, primarily supported by easily readable sans serif type, his interest in letterforms as graphic objects led Crouwel to design the radical New Alphabet typeface as a visual experiment. Based on the look of type as seen in emerging computer systems, it appeared almost alien, a cipher script of vertical and horizontal lines. This almost Illegible font challenged the design establishment and provoked debate amongst modernists - a debate which Crouwel was happy to engage in - openly admitting to placing visual aesthetics above function.

(Although never meant to be really used, New Alphabet was subsequently redrawn by Brett Wickens and Peter Saville for the Joy Division album, ‘Substance’ in the late 80s.)

Some of his work has dated, but there are many pieces that still retain a freshness and vitality and demonstrate a clarity of thought. Set beside contemporary work by design groups 8vo, Cartlidge Levine, Studio Myerscough and Peter Saville, the influence and legacy of Wim Crouwel can be clearly seen.

Structured writing

Be clear what you want your writing to say before you start to write it.

What impression are you trying to create? Are you just giving information, or do you want your readers to do something? Who is your audience? Who will read your writing? Think about these groups, what interests them and what you want to say to them. How do they like to receive and use information? Is the visual impact important to them or not?

Inverted pyramid writing
Most people are taught to write by setting up a proposition, building an argument and coming to a conclusion.

However, this presupposes that your reader has the time to read your content all the way through to the end. However, most people skim and scan text in order to extract the salient points as quickly as possible.

Journalists and web editors recognise that their readership is transient and have adopted the concept of inverted pyramid writing to communicate with a time-poor audience.

This style places the most newsworthy information at the beginning of the story and orders the remaining content based on relative importance.

• Story lead (who, what, why, where, when) > Supporting information > Details

Using this structure enables the viewer to grab the core message quickly. In turn, your design should clearly frame the content and enable skimming and scanning.

Writing for the web
People don’t read websites in the same way as they read books or newspapers. They tend to scan, looking for the information they want, and ignore long documents and large blocks of text. You can make it easier for your users by following a few simple pointers:

• Put the most important information at the top of the page
• Use sub-headings, bullet lists and links, so people can find topics easily
• Use plain English and avoid jargon (remember, you are writing for everyone, including people whose first language may not be English)
• Keep it brief – internet users like short bites of text
• Keep pages short – don’t make people scroll down too far on any page. 
• Use short sentences
• Make sure your content is relevant – do I really need to include this?