{"id":58986,"date":"2024-10-17T15:44:09","date_gmt":"2024-10-17T19:44:09","guid":{"rendered":"https:\/\/www.cleo.on.ca\/?post_type=publications&p=58986"},"modified":"2025-06-11T14:53:24","modified_gmt":"2025-06-11T18:53:24","slug":"clear-design-tips","status":"publish","type":"publications","link":"https:\/\/www.cleo.on.ca\/en\/publications\/clear-design-tips","title":{"rendered":"Clear design tips"},"content":{"rendered":"

Structure<\/h2>\n

Overview<\/h3>\n

Organize content so that it flows logically.<\/p>\n

Put important information first.<\/p>\n

Present information in short chunks.<\/p>\n

Use clear, concise headings and subheadings to show readers what\u2019s coming up and to help them scan the information.<\/p>\n

Make information easy to scan<\/h3>\n

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.<\/p>\n

Line length<\/h2>\n

When lines of text are too long, readers\u2019 eyes become tired. Lines that are too short also affect readability as readers must move from paragraph to paragraph too often.<\/p>\n

Line length is one part of making text readable. Other factors are line height, paragraph spacing, word spacing, and letter spacing.<\/p>\n

A lot of research has been done on what\u2019s an optimal line length. An excellent article on the topic, Readability: The Optimal Line Length<\/a>, concludes that the optimal line length for body text is 50-75 characters with spaces<\/strong>. Others say that it can go up to 80 characters with spaces. This applies to print and online information.<\/p>\n

CLEO\u2019s guidelines<\/h3>\n

For our print materials, the line length must not exceed 65 characters with spaces<\/strong>.<\/p>\n

For our online information, the line length is a maximum of 80 characters with spaces<\/strong>.<\/p>\n

Alignment<\/h2>\n

Set margins left justified and ragged right.<\/p>\n

Set headings flush left and not centred.<\/p>\n

Hyphenation<\/h2>\n

Do not hyphenate or break a word over 2 lines. This makes it harder to read and understand.<\/p>\n

Highlighting<\/h2>\n

Use larger fonts, different fonts, bolded text, and boxes to highlight important content.<\/p>\n

Do not use underlining<\/u> because it cuts off the parts of letters that go below the line.<\/p>\n

On a website, underlined text is often used for hyperlinks. Using it in other ways can confuse and frustrate readers.<\/p>\n

Fonts and legibility<\/h2>\n

Use easy-to-read, sans-serif fonts.<\/p>\n

Do not use too many fonts, for example, use one font for body text and another for headings.<\/p>\n

Make line spacing at least 25 to 30% greater than the font size.<\/p>\n

Choose fonts with medium weight rather than light weight.<\/p>\n

Do not put text in italics as it\u2019s hard to read.<\/em><\/p>\n

DO NOT USE ALL CAPS, WHICH IS HARD TO READ BECAUSE THE LETTERS ARE ALL THE SAME SIZE.<\/p>\n

Use a minimum of 12-point type for body text.<\/p>\n

Use a larger font size, such as 14-point, for readers who have vision loss or low literacy.<\/p>\n

Fonts with the same point size can look larger or smaller. Below are some examples of sans-serif fonts.<\/p>\n

\n

\"Sample<\/p>\n<\/div>\n

White space<\/h2>\n

Online and in print, white or blank space breaks up dense text and makes content more readable. Do this using:<\/p>\n