Typeface, design for legibility improve readability

Let me take you on a journey, let's make it a road trip where the secrets of good typeface practices are revealed from transport signage to the digital information highway. An insightful journey where we discover there are no short cuts; readers generally scan or glance which materialises to milliseconds, typeface can literally make or break engagement therefore designing for legibility and readability is essential.

Meet the typeface pioneers

Two designers in the late 1950s landed an ambitious signage project for Britain’s motorways; a landmark pioneering typeface work that helped travellers get from A to B safely and with ease.

Meet Margaret Calvert and Jock Kinneir not only solved problems but their discreet heroic design efforts have saved lives in the regions of hundreds of thousands. Their work is so revolutionary and robust the same typeface fundamentals are applied today.

Their approach to make typeface clearly legible is celebrated and has been adapted for the web and digital.

The problem; life in the fast lane

Prior to their work road signs were in a haphazard state: a jumble up of words and iconography from town to village, as opposed to clarity and consistency. A world of confusing road signs due to inconsistencies was un-legible, problematic and very dangerous. Hard to read signs with existing typefaces required a radical rethink, cars were moving faster and faster, with the opening of new motorways this needed to be resolved.

The solution; taking the driver's seat

The starting point was from the point of view of the driver. On a beautiful sunny clear day to a dull night, to the most treacherous weather conditions such as rain or fog, to travelling with family. How easy was it to read a road sign, or was it just too late that the critical turn off was missed?

What information do I need as I drive at 70 miles per hour and when do I need it? 

Crazy usability tests

Motorists only have a few seconds to react to road signs, understand and use the information to make a vital decision. The signs had to be clear and easy to read, but achieving this required a great deal of research, testing and revisions.

Legibility tests took time, considerable time to find the perfect typeface whilst travelling at 70mph. I'm proud to say they used my hometown name ‘Smethwick’.

The final lettering, a set of fonts called Transport can be defined easily whilst driving at a distance. Sentence cases (both mix upper and lower-case letters) helps people recognise words faster than only using capital letters.

The iconic Transport font

The font helps readers define word forms even from long distances. The purpose and function of signage typeface is wayfinding to provide spatial orientation as quickly, clearly and as safely possible.

Moving to the digital age

The information highway has been transported to our devices. When it comes to typography the same principles hold true.

Fonts need to be easily legible and provide a pleasant reading experience. Factors like letter shape, size, line height, and spacing is critical.

Choose clear and distinguish letterform

• Readability and legibility. Choose the correct legible typeface plus ensure correct formatting, for instance upper case reduces readability. Apply correct paragraph width (45 - 75 characters), the wider it is the more your eyes will break concentrate moving to the next line.
• Scannability. Help readers identify and focus relevant content by segmenting content with titles, introduction text, sub headings, paragraphs, bulleted listing to pull quotes. It also helps if copy is written for the web; clear, concise and engaging.  
• Accessibility. Design for inclusion, for varying levels of low vision. Support for text re-sizing online. Fonts need high contrast (dark text on light background), a decent font size, along with correct tracking and line height.
• Tone of voice. Different typefaces convey different emotions, and an essential visual identity ingredient. The BBC Reith typeface was developed with brand, accessibility and legibility in mind.

The legacy of Margaret Calvert and Jock Kinneir continues, a digital typeface version called 'New Transport' in lighter font weights is used for the gov.uk website. Major tech companies have created their own set of fonts following their principles. Calvert’s philosophy: “It’s about asking the right questions and knowing who you are designing for.” As a designer she believes: “You have the very responsible position of making things clear so that they can get from A to B”

Making it great read! Key takeaways

• Typography is a major part of design and must be easy to read.
• The right typeface is fundamental to increase readability.
• Set up a typography system that is readable, accessible, and consistent across all touch points
• Acquire best practices including writing for the web, mastering the art of micro copy to working with grids and use of whitespace to focus and engage the reader.

Reference and further reading

• The Design museum - virtual experience from Transport typeface to iconic signage Typescale helps define font scaling, heading hierarchy and contrast.
• Gridlover perfect tool to find balance with font leading and spacing
• Atkinson Hyperlegible - A free font for low vision readers
• Tips for good typography
• Explore good accessible fonts and what makes a typeface accessible