How To Choose Website Fonts

We've talked about planning your new site and the colours to use, but what about typography? The fonts on your site need to suit your brand. 

Font
Noun

Often confused with 'typeface' (the style of lettering) which can be a family of related fonts. 'Font' actually means the specific widths, weights and styles of the text, so 14pt Arial Bold is a font whereas Arial is a typeface. Most commonly in terms of websites, everyone refers to fonts. So we won't be pedantic, either term works for us. 

Does The Font Even Matter?

Some fonts look distinguished and official, some are childlike or friendly and plenty of fonts are fancy and elegant. You need to get the right feel for your brand to help reinforce the brand image you're trying to create with things like colours and copywriting.  

The best thing about choosing a font is if there's no one right answer, there are lots of fonts to choose from. There are however plenty of wrong answers, you should never use comic sans for a funeral directors website, for example, it looks like you find burials amusing.  

Think about what customers associate with your brand, if you can come up with some descriptive words then any designer worth their salt can swiftly give you the most appropriate font options. 

Find Your Style

No one is going to pick the robotic fonts of yesteryear, but some top tips to help guide you in the right direction:

  • Pick a font that matches your brand, don't let your personal preferences get in the way. Your personal taste and your brand identity are not always going to align perfectly. 
  • Websites like Font Squirrel and Da Font are great for ideas. Try downloading some fonts and testing your brand name and some likely page titles to see what you think.
  • This infographic from Crazy Egg shows some of the different attributes your font could bring to your brand. 

Not sure what you want? Do some competitor research! 

  • Use this chrome extension 'WhatFont', enable the tool and hover over the text you like, it'll give you the font, style and size.
  • If the font that you like isn't online then try out What The Font to upload an image of the fone and discover the kind they're using. 

Serif Fonts 

Serif refers to the little "hooks" hanging off the ends of letters. These fonts are easier to read when printed, especially at small font sizes or where there may be a variety of sizes. Serif fonts are not great for online body text, but work for titles (our titles use Serif).

Sans Serif Fonts 

Sans is French for without, so these fonts do not have the little hooks serif refers to. These fonts are more modern. Most sans-serif fonts are easier to read on screens which is why it's a common body font choice (this body text is Sans Serif).

Monospaced Fonts 

Every character, from a big N to a tiny full-stop, gets the same horizontal space. Ideal for programmers who need to be able to see every character clearly, these fonts aren't that pretty, but they are sometimes used to add a certain 'techie' style.

Display Fonts

A beautiful script heading, a handwritten look or a title that looks like calligraphy, these are display fonts. You would write a whole page of content in them but they are useful for decorative, eye-catching headings and titles. Sample

Best Font Size for Websites

As with our website, you'll need a variety of sizes for different headings and design specific items around the site.

Body Text

In terms of body text, the standard paragraph text on your website, you want it to be both readable and scalable, so it isn't too big - giving the impression of endless paragraphs. The industry-standard best font size for your main body text is 16px. Having said that, your specific typeface may have larger text than others, so 16px in a 'standard' font may be larger for you, so you may wish to venture to 15px or even 14px. 

Another, often overlooked, aspect of the font size is your target audience. It's a sad but true fact that the older your target audience is, the more likely they'll struggle to read small or overly ornate fonts. If you're targeting an older audience you might consider a pixel or two larger on the font size, this will naturally lead to shorter paragraphs and more spacious layouts from your website designer, which can make the text much easier to read. 

Captions and Labels

We recommend if you're going to use this kind of supplementary text around the site you go at least 2 px smaller than your body text, so 14px if you're using 16px for the body. If you go down just one size your likely to visually confuse this text with the body content, you want the secondary text to be clearly distinguished. 

Headers

This is the fun part, you're probably going to need one really big H1 header option, to identify the content of a page and capture attention, then a few smaller H2 and H3 styles. Ensure your H2 and H3 are distinctive from one another either by font size and/or by using a different font or colour. 

Once Upon a Time

Different browsers and operating systems support different fonts, so back in the day something which might look beautiful on a Macbook in Safari could be changed to a very different font on a Windows machine via Google Chrome. 

We have come along way since then and now have a wonderful system where we embed the font so this isn't as much of an issue. Once we've picked the font you like it will appear as it was intended to everyone that visits your website.

The font has to come from either Google Fonts or Adobe Typekit Fonts, but there are 15,000+ fonts on there so we're sure to find something that you like! 

What The Font?

We're here for you. Picking fonts isn't for everyone. If you don't know your Times New Roman from your Georgia then just leave it to us. 

We can work with you to find the brand properties that you want to reinforce with your font choice. We'll make sure you've got all the fonts that you need, from the page headings to the CTAs at the bottom. 

We'll set up your website with all your new typefaces and the font styles in place. In our CMS you can copy and paste styles around the website so should you want to play around with your site after it's built you can keep your fonts consistent on your new pages. If you don't want to do it yourself you can always send any updates or additions to your dedicated website manager and they'll do it for you. 

If you'd like us to find the perfect fonts for your company website then just get in touch

Posted by Becky Cockman on July 6th 2020

Loading... Updating page...