The fonts you’re using on your site may feel like a bit of an afterthought but they can actually play a pretty crucial part of a successful website design.
Your content is so much more than text on a page! If you’ve spent time and effort curating content for your site then you want it to be read. If it’s dull, illegible or in an ill-fitting font then you’re asking for it to be ignored. Taking the time to consider how your content looks is just as important as the time spent checking its quality.
Here are our tips for making typography work harder for your site.
Fonts have a time and a place. A round, handwritten font may be perfect for a school or local business but it just wouldn’t fit for a big IT corporation. It’s also important to consider using a couple of fonts if your headline font doesn’t read well at a smaller body copy size.
Taking the time to consider the styling and shape of a font will really benefit how your site looks and will positively impact the users experience when using your site.
There are plenty of web-safe fonts that will meet your needs when it comes to tone, but using too may fonts all at once can undo your hard work. Ideally you should use no more than three fonts across your entire site and experiment more with font weights and sizes (although don’t go overboard on this either!). Using an excessive amount of fonts, weights and sizes can make a page look messy and unprofessional, which can greatly impact the readability of your site.
Consider a headline font, body copy font and a secondary display font, such as a handwritten style for testimonials, if it’s required.
If all the text on your site looks exactly the same then the hierarchy of your messaging will get completely lost. Newspaper and blog sites are a fantastic example of heavy content with a clear hierarchy as they use font sizes to differentiate between main headlines and less important / less urgent articles. This is a great way to make information stand out without bringing in another font or using a large amount of font weights.
You can also make messaging stand-out by using a highly contrasting colour that will help it catch the attention of the user. Try to use a colour that works with your brand colours rather than against, especially if it’s colour text on a colour background, as this will affect readability. Below is an example of a bad colour contrast versus a good colour contrast
You’ve taken time to write the copy so it’s definitely worth taking some time to design it and make it appealing. Website copy doesn’t have to be a big boring block of static text that makes you yawn just looking at it. Designing your text will not only benefit your site visually but it will make it easier for your audience to digest your content and keep them awake. Reducing bounce rates are a key part of converting leads, so creating something that is informative, easy to navigate and attractive is incredibly important.
Below is an example of how a block of text, all in the same font, can be manipulated to look much more inviting using different font weights.
