7 Typography Formatting Tips for Better Usability

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.

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.