As a technical writer I’m biased –  I believe that no matter what graphics you use, it’s the words that sell.  But the best words in the world are no use if they aren’t easy to read!  A great layout gives visual cues that make it easy the reader to keep reading, and to remember the key points.

For a designer, setting type effectively is a common and important task. For documentation and handouts, print designers have almost unlimited choices for typography. For digital designers, pitch decks and Websites are more limited, but we have more choices than we used to!

Too much choice is not always a good thing.

Designing with words

Good typesetting takes instinct and practice, but this quick checklist covers the basics. These are my guiding principles:

1. No more than three typefaces per page/website

Applying and setting text with a variety of typefaces (even if they are similar) creates disunity. Line spacing becomes uneven. The overall look is messy, and you can’t quiet work out why?

When selecting stylesheet fonts for a client, make sure the font you choose offers a variety of options like Bold, Condensed, Italic and Expanded. You will be glad of this flexibility when it comes to designing different types of documents for different audiences.

2. Set headlines large at the top of the page

On many projects, headings are often only a slightly larger body font size, or even just in bold. Headings are some of the very first strings of text read by the eye when navigating to a new page, and vital to skim pages.

By giving headings the size and styling they deserve, the reader is able to skim the document hierarchy quickly.

3. Body copy must be readable (duh)

• Website text – 16px
• Documentation – 12pt
• Presentations – 20 pt

Many factors influence readability – line spacing, font type, justification and colour – but size is the biggie.

If you are writing for an older audience, consider 14pt. However beyond 14pt, body text can be difficult to read because the lines are difficult to scan.

4. Text to background contrast

The well-​​established standard is to place dark text on a light background, but with greater phone use, people are more used to white on dark for headings. No clashing colors.

You can make up with a lower contrast by increasing the font size, boldness and line spacing.

5. Apply emphasis discreetly

Be intentional about underlines, bold, and italics.

Specifically for links and underlines – the line cuts through descenders (chiefly g, j, p, q, and y) and make them more difficult to read. A handy solution is to set use a border-bottom of 1px to give a gap between the underline and the word.

6. Do not set continuous text in full capitals

Ascenders and descenders exist for good reason: they allow us to easily identify words. A word that is set in upper– and lowercase is more recognizable than same word set entirely in uppercase due to the uniformity of the height and baseline of the word. For example, contrast:

‘THE RESULTS OF LEGIBILITY ANALYSES CAN BE CONTRADICTORY, BUT ONE THING IS CLEAR: TEXT SET IN CAPITALS IS HARDER TO READ’
— Hochuli, J. 2008, Detail in Typography, 3rd edition

If you need to set long strings of text wholly in uppercase give more line space, try “small capitals” (font-variant: small-caps;) and increase letter spacing slightly. Never make them bold.

7. Give the words space to breathe

Adobe InDesign default line spacing is often too much. Single line spacing is almost always too little. Give your text  the space it needs, both vertically and horizontally to ensure a good, crisp contrast.

Check that columns are not too narrow, this makes it hard for the reader to track to each following line. Avoid columns on tables that result in a single word on each line.

8. Don’t use Arial, Times Roman or Comic Sans

More of a personal note and frustration. But seriously, why would you use these overused and unattractive typefaces when there are so many others to choose from.