The range of fonts that can be used for web has grown significantly over the last few years, with over 1,000 fonts now available on Typekit and 682 on Google Fonts.
With such a vast number of fonts to search through, there are a number of considerations that can help in identifying the perfect font for your website.
Font sizes
Always test a font at the smallest size it will be used on your website. Whilst you might have great content on your website, it will be useless if it is illegible. Some users also suffer from vision impairment and will appreciate the extra consideration given here.
With this in mind there will be other users who will want to increase the font size so they can digest the content better. It is also important to test your design at larger sizes as well. If your site looks bad when the font size is increased, consider adding more space to your design.
Devices and browsers
Content on your website will be read on a variety of devices including mobile and tablet screens. Make sure that your font and weight is legible on these screens and has definition and clarity across all operating systems.
Another thing to check is that the font renders well across all browsers (IE, Firefox, Chrome, Safari). Sometimes a font will look great in one browser but won’t in another.
Tone of your content
All fonts give a different emotional response. Some might be serious, some playful or informative. Always test your font with some sample content so that you can see whether the font compliments the tone of voice.
Pairing fonts
While it’s great to design with a range of fonts it’s important not to have too many. To reduce confusion and to present consistency across your design it’s important to limit the number of fonts used to around two or three.
There are generally four type of font style to choose from
• Serif
• Sans-serif
• Script
• Decorative
Pairing fonts of different styles tends to work well, for instance a serif heading and sans-serif body text. Carefully selecting a pair of fonts that are dynamic can also help set the emotional tone for the website’s design. Contrasting fonts from the same family can also pair well.
Larger heading text with smaller body text gives good contrast and reinforces their level of importance.
Test pairings
There are some great resources to quickly visualise potential font pairings.
Always experiment with fonts and font pairs before committing to your design.
Here are some great resources to help choose fonts for your website:
www.typewolf.com
www.typeinspire.com
www.awwwards.com/websites/typography/
www.creativebloq.com/web-design/choose-web-fonts-1233034
