7 Typography Formatting Tips for Better Usability
We see it time and time again in the usability labs: users skim content as they interact with websites. Of course, there are exceptions to every rule, and some users will take time to read content word for word, but the majority of users scan. They scan the page for keywords, scan headers, and read a sentence here and there as they look for information they are seeking or need to know.
If the content on a page is well formatted, users have an easier time reading and scanning it. However, when content is poorly formatted, users struggle with reading and comprehension and often miss key information.
We’ve created a list of seven typography formatting tips to help your users scan, read, and understand your content more effectively.
1. Create Hierarchy
Organize and format your content with headers, sub-headers, and paragraphs to create hierarchy. Doing so helps users visually scan the page and quickly understand the structure and content of the page. Visually, content hierarchy is achieved using: font family, font weight, font size, and/or color.
Accessibility Tip: You will need more than visual formatting to create hierarchy since screen readers and other assistive technologies ignore it and focus on semantics and structure. The semantic coding of content headers, sub-headers, and paragraphs is a must for accessibility to enable screen reader users to tab through content and understand the structure and content of the page. This technique resembles the way visual users scan read the page. In coding, content hierarchy is achieved using the heading elements in HTML (<h1>,<h2>, and so on).
2. Keep Paragraphs Short
Long paragraphs of content are overwhelming and difficult to read. To make content more engaging and easier to read and scan, keep your paragraphs short. On the web, three to four sentences per paragraph is often enough.
Want more Insights?
Don't miss a single Point of View! Receive our articles and podcasts in your inbox.
3. Use Adequate Line Height
In terms of online typography, line height refers to the distance between two lines of type. When lines of content are too tight, content is difficult to read. When there is an adequate amount of space between lines of content, readability and comprehension increase.
4. Limit Line Lengths
When blocks of content are too wide, they became more difficult to read. When line length is long, eyes need to track a further distance to read each one, and it is difficult for eyes to quickly return to the start of the next line. As a result of the extra effort it takes to track from line to line, it slows reading speed and comprehension. Research has shown that the optimal line length is 50-75 characters per line. That is the equivalent of 12-16 words per line. The optimal line length adjusted for mobile is 25-40 characters per line.
5. Use Bulleted or Numbered Lists
The use of bulleted or numbered lists help highlight important information and present instructional (stepped) information more effectively. When content is formatted in a list it is more scannable, quicker to read, and easier to comprehend.
Accessibility Tip: Avoid making lists by typing the numbers or bullets manually. The problem is that technologies like screen readers will not know it’s a list. If formatted correctly, it will announce something like, “list with four items” before announcing the rest of the content. To ensure it does, use the list button in your editing software or use list elements in the HTML (<ul>, <ol>, or <dl>).
6. Bold Important Information
The occasional bold word or sentence within a paragraph makes it stand out from the surrounding text. It creates emphasis and helps draw the eyes to key information you want to highlight. The keyword here is occasional—if everything is emphasized, then nothing is emphasized so use bold text within paragraphs sparingly.
Accessibility Tip: The bold tag is ignored by most screen readers. Use the strong tag rather than the bold tag to provide the same experience to all users; the formatting will look the same when viewing the content in a browser, but will provide an equivalent experience to screen reader users.
7. Limit the Number of Font Families
Using several different font families on a website can make an experience look unstructured and create visual noise. In general, limit the number of font families on your site to three or less and use them consistency throughout the entire website. If you do use more than one font family, use font families that pair well and complement each other.
Deciding which fonts to use on your website is up to you (and perhaps your brand guidelines). Some will debate whether a serif or sans serif font is easier to read on the web, or which one is best suited for headers and paragraphs. Ultimately, we think both serif and sans serif fonts work well on the web.
All seven tips are geared toward the formatting of content. Formatting is a key component of content, but it can only do so much. You need to ensure you start with relevant, useful, and usable content as a foundation.
If you’d like to learn more, get in touch with us to start a conversation.
By Tony Johnson The guidelines that are used to check websites and applications for accessibility compliance recently got an update. Find out what you need to know and how will this change affect your organization.
020Latest Crux of It Podcast
Hosted By Mahtab Rezai In episode 020 of The Crux of It, we go into some next-level nerd territory and talk about keyboard-only accessibility.
By John Golden With so much focus on the functionality and limitations, we often see the visual guidelines for web application development suffer and result in inconsistency. Learn how to be sure your guidelines and pattern libraries are always focused on usability.