The way content is created and displayed can impact the readability of your content and overall user experience.
Readability is a measure of how easy it is to read a piece of content. Oftentimes, readability is measured with a reading level index—a formula that estimates the age or education level necessary to understand your content. There are several different formulas in use, but some common ones include:
- Flesch Reading Ease or Flesch–Kincaid Grade Level: these formulas look at the average number of words per sentence and the average number of syllables per word
- Gunning Fog Index: this formula looks at the average number of words per sentence and the percentage of 'complex' words (words with 3+ syllables) in a text
- SMOG Index: this formula looks only at the number of polysyllabic words (3+ syllables) in a text
Regardless of which formula you use to calculate the readability of your content, to lower the reading level you'll generally want to shorten your sentences and use simpler words. However, because these formulas were developed before the internet, they aren't ideal for calculating the readability of content written for the web.
In order to write readable content for the web, we suggest following the recommendations below:
Writing content
Do's:
- Keep paragraphs short. Aim for around 5 sentences, or about 125 words, to avoid large walls of text.
- Write in short sentences. Aim for under 25 whenever possible.
- Keep titles short (when applicable). This will aid user experience, allowing users to read or skim content and complete tasks efficiently.
- Include critical page information within the first paragraph.
- Ensure that all links and buttons are describing the selected action. For example, a link or button linking to a news article should explain where the link is taking the user, such as "review the community plan." Avoiding the use of "read more."
- Include descriptive text alongside informative graphics (i.e. a text description below a chart graphic).
- Keep text descriptions on Cards and Quicklinks short and informative.
Dont's:
- Don’t use hard enters (i.e. hitting the Enter/Return key) to separate elements.
- Don’t hide important information at the bottom of the page.
- Don’t add unnecessary words to titles.
- Don’t include lots of links within body paragraphs. Separate the link with a button below the body paragraph text (when or if applicable).
Styling content
Do's:
- Use correct heading structure. For example, H2 should be below H1 and H3 should be below H2, etc.
- Use accordions to collapse large portions of text.
- Use buttons at the end of a paragraph for important links that are currently embedded within a paragraph.
- Include attractive and relevant imagery relating to content (when or if applicable).
- If content is copied from an external source, ensure content styling is not carried over to the website (i.e. additional spacing, colours, fonts). Paste as plain text to remove the existing styling.
- Use bulleted lists to help create space and break up content where it makes sense.
Dont's:
- Don't style content using all capitals. This can be difficult to read and can cause problems with screen readers.
- Don't use bold text as a header, use the header system.
- Don't style content with underlines to communication importance; an underline could communicate a hyperlink to users.
- Don't overuse accordions or hide critical information within accordions.
We want to hear from you!
Our team at Upanup is always striving to make this guide better and more accessible for our clients. We’d love to hear from you, so we can continue to improve this guide.