Web typography: A guide to choosing fonts for your website

Web typography: A guide to choosing fonts for your website

View profile for Joe Dyer
  • Posted
  • Author

Typography plays a vital role in the overall look and user experience of your website. With thousands of free and paid-for fonts to choose from, deciding on which one to use can be a little daunting.

This guide will give you an overview of the main factors to consider if you're on the hunt for a new font. There are some handy tips sprinkled in along the way to help you with your decision - or to see if there’s any room for improvement if you are happy with your current font!

Think about your brand personality

Fonts are a subtle communication of your firm's overall character. Depending on the type of business you are and the types of clients you work with, you'll need to think about a font which will best align with you and sets the correct tone.

Legibility

You wouldn't believe it, but the average website page is around 90% typography. Coupled with the fact that users will skim read content to get to the bits they're interested in - it's vital to choose a font that works well on all screen sizes, with a good choice of weights to help create hierarchy.

A rule of thumb: Your body content's font size should be at least 16px - but don't be afraid to go bigger, your users will thank you!

Serif, sans serif and script

Serif

Serif, originally used in books, magazines and newspapers, is regarded as having a more traditional feel. Each letter features extended decorative lines or strokes. These evoke feelings of reliability, trust and integrity. Some well-known examples include Times New Roman, Garamond and Georgia.

When would I use Serif fonts?

They are a good choice for headings, especially when paired with a Sans Serif font for body content. This is a popular combination to create contrast and harmony.

Sans Serif

As well as a more modern look, Sans Serif fonts are also generally regarded as having much better legibility due to their minimal and clean appearance - especially for children or visually impaired readers. Some well-known examples are Arial, Helvetica and Verdana.

When would I use Sans Serif fonts?

These are a solid all-rounder for both body content and headings - just be sure to use the same font family across both.

Script

Script fonts look handwritten or calligraphic. They can have a classical or even playful feel.

When would I use Script fonts?

For body content, it's best to avoid script fonts, as they're generally harder to read – but they could work well as a heading or in other marketing materials, depending on their legibility.

Popularity

With a choice of over 1,400 free fonts on Google's font library, you could be tempted to pick one from the top ten - but it's important to strike a balance between selecting a font based on its quality and how widely used it is.

There's nothing wrong with choosing a popular font, but if you'd like to be different to your competition, then consider choosing one which is still good quality, but isn't as commonly used.

If you want to get the best of both worlds, then consider purchasing a font from a premium font foundry, such as https://www.myfonts.com/. Here you'll find the best quality fonts, which won't be used by many (if any!) of your competitors.

Performance

The majority of websites use custom or third-party fonts, which are usually a big contributing factor to website performance - websites with more fonts, are typically slower to load and thus affect your Core Web Vitals score.

A good rule of thumb is to limit the number of fonts on your website, I would recommend no more than three (weights – bold, light, regular or families e.g. Arial), but less is better.

If you'd like to lower your website's carbon footprint even further, then you might consider using a system font - they have no impact on page weight and load instantly!

Licensing

As a marketer in a law firm, we’re sure you won't forget the legal stuff!

Typically, anything hosted on Google's free font library, is fine for commercial use, but premium font foundries will require you to purchase different licenses depending on the medium (e.g. an extended license for web use).

Ready to choose a new font for your website?

Your website's font choice is an often overlooked but important thing to consider. Aim for something that's legible - be sure to test it on longer-form content - and conveys your firm's personality - think about the first impression of the user.

You should also consider how versatile the font is - how might it look on extended mediums such as print and signage?

Lastly, keep site speed in mind and be sparing with the number of fonts used on your website. Typically, a regular and bold font weight is good enough to create a typographic hierarchy.

If you think it’s time for a new font or a new website, get in touch with our design and web development team today on 0117 325 0200 or email sales@conscious.co.uk.