Typography - what you need to know

Use a typographic hierarchy for clarity 

A clear typographic hierarchy that considers size, weight and contrast will help guide users through key messages on your page. You might be tempted to base your typographic hierarchy on multiple fonts, but this can make your page look busy and unstructured. As a guide, two is plenty, one is often enough.

Using a font with at least 8-10 styles will give you plenty of flexibility. As a minimum, including regular, bold and italics in your font library will enable you to apply more or less visual weighting to points as appropriate throughout your body copy. 

Using a bold font, rather than an uppercase font, offers a better solution for adding visual emphasis. Research suggests that when letters are all the same height, they slow down reading speed by 13-20%.² This is because all capitals tempers the diversity of letterforms making it harder to scan large chunks of text at speed. 

^{2 - [Why letter casing is important to consider during design decisions]}

Make reading easy on the eye

As a guide, the font you select for body copy should be unobtrusive, legible, and readable. Picking a font with these characteristics will create a comfortable reading experience. Look out for generous x-height, open apertures, and distinguishable ascenders and descenders. 

Always pick a body font size above 14px - below that, your copy becomes hard to read and can cause a real headache for users. These factors will improve the readability of your content, thus enabling you to communicate effectively with your audience.

Minimising space between the lines can make it harder for the eye to track from one line to the next. Although, it should be noted that too much whitespace can also affect readability in a negative way.

Finally, make your page scannable 

Typography goes beyond font choice - it also affects alignment of text and even the length of copy. 

UX research has shown that we typically read in an F-shaped pattern.³ Starting in a horizontal movement, reading from left-to-right, before scrolling down the page from top-to-bottom. Therefore, justifying headings and body text to the left makes it easier for users to focus on headings and content, allowing them to take in information at-a-glance as they scroll.

Short, punchy copy, with a line length of 40 to 60 characters, has been proven to help readers focus their attention on your message. Whereas with increasing length, attention starts to wander, risking high bounce and exit rates.

^{3 - [F-Shaped Pattern of Reading on the Web: Misunderstood, But Still Relevant]}