Clear design tips
Structure
Overview
Organize content so that it flows logically.
Put important information first.
Present information in short chunks.
Use clear, concise headings and subheadings to show readers what’s coming up and to help them scan the information.
Make information easy to scan
Online, people tend to skim over web pages quickly and generally scan in an F pattern. They read information at the top or left-hand side of the page more often than anything else.
Line length
When lines of text are too long, readers’ eyes become tired. Lines that are too short also affect readability as readers must move from paragraph to paragraph too often.
Line length is one part of making text readable. Other factors are line height, paragraph spacing, word spacing, and letter spacing.
A lot of research has been done on what’s an optimal line length. An excellent article on the topic, Readability: The Optimal Line Length, concludes that the optimal line length for body text is 50-75 characters with spaces. Others say that it can go up to 80 characters with spaces. This applies to print and online information.
CLEO’s guidelines
For our print materials, the line length must not exceed 65 characters with spaces.
For our online information, the line length is a maximum of 80 characters with spaces.
Alignment
Set margins left justified and ragged right.
Set headings flush left and not centred.
Hyphenation
Do not hyphenate or break a word over 2 lines. This makes it harder to read and understand.
Highlighting
Use larger fonts, different fonts, bolded text, and boxes to highlight important content.
Do not use underlining because it cuts off the parts of letters that go below the line.
On a website, underlined text is often used for hyperlinks. Using it in other ways can confuse and frustrate readers.
Fonts and legibility
Use easy-to-read, sans-serif fonts.
Do not use too many fonts, for example, use one font for body text and another for headings.
Make line spacing at least 25 to 30% greater than the font size.
Choose fonts with medium weight rather than light weight.
Do not put text in italics as it’s hard to read.
DO NOT USE ALL CAPS, WHICH IS HARD TO READ BECAUSE THE LETTERS ARE ALL THE SAME SIZE.
Use a minimum of 12-point type for body text.
Use a larger font size, such as 14-point, for readers who have vision loss or low literacy.
Fonts with the same point size can look larger or smaller. Below are some examples of sans-serif fonts.
White space
Online and in print, white or blank space breaks up dense text and makes content more readable. Do this using:
- space between paragraphs
- short paragraphs
- bulleted lists
- larger margins
Spacing with headings and lists
Leave more space above headings than below so it’s clear they’re connected to the text that follows.
Leave less than a full paragraph space between the lead-in phrase and the first item in a bulleted list. Put a bit of extra space after the last item in a list. This shows that the list and lead-in are a unit.
Colours and contrast
Use colours sparingly and in a purposeful way.
Make sure that colours are colour-blind safe.
Video and online content
Always have sufficient colour contrast.
Use captions and create a transcript for audio and video resources.
Use alternative text, or alt text, for images, links, and charts. Alt text describes what an image looks like or what its function is on a web page. It’s read aloud by screen-reading software.
Create Portable Document Format (PDF) documents that are accessible. If possible, present the content in HTML as well.
Design resources
Editing for Accessibility: Basic Best Practices
Editors Canada
Why Does a Design Look Good?
Nielsen Norman Group
AccessAbility 2: A Practical Handbook on Accessible Graphic Design
Association of Registered Graphic Designers (RGD)
Colorblind Safe Color Schemes
NCEAS Science Communication Resource Corner