Good typography brings hierarchy and focus to the right places. This quick guide will teach you how to avoid ineffective typography and how to bring the right emphasis to the written words in your design.
1. Consider Accessibility, Please
Good typography means designing not just for ideal circumstances, but also for non-ideal scenarios, for example where someone is vision impaired or reading under low light conditions. Aim to have a high contrast ratio between the background and the text color. There are many online tools available to make sure your text is readable.
WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text. Level AAA requires a contrast ratio of 7:1 for normal text and 4.5:1 for large text.
Text with too much contrast can also be hard to read. For example, light-colored text against dark backgrounds.
2. Reduce Distractions
A good rule of thumb is to reduce distractions for reading text. Whether it be the use of too many fonts, too many styles and variants, too little or too much spacing between lines. Reduce such distractions by setting a limit on the number of font styles or weights that you have in one layout.
For example, using two or three fonts can work on a web experience but more than that and you risk making the page look disorganized and cluttered.
3. Optimize Line Length
The average line length (or “measure”) for optimal reading is 8-12 words per line or approximately 50-60 character per line. This will help ensure that the readers eye isn't jumping too frequently from the start to the end of a sentence, and also a good tip to ensure that the reader will stay engaged.
Pay close attention to this where you’re designing fluid layouts, as the measure is likely to change with the viewport size. Typography is a great point of reference when deciding on breakpoints for your designs.
Conclusion
With these guidelines as a starting point, you can avoid bad typography and clearly communicate the message of your design with minimal distractions.
