How to Choose Font For Your Website

One of the tasks we ask of our clients in the early stages of planning, before a web design project is underway, is to choose font for your website. This can be a fun task for some. While others dread the idea of making decisions about typeface and fonts, having no idea how to start this process. Therefore we’ve put together this useful guide on things to consider when choosing a new font or typeface for your website. As well as some hints and tips on where to find them.

Choosing A Typeface For Your New Website

Consider Your Existing Branding

If you’re an established business with logo and company branding already in place then it’s worth considering using the same fonts. Therefore creating a coherent brand image for your company or organisation online. We’d always recommend using the same font from your company logo on headers and high level text. While using a font that compliments this on lower level text and paragraphs.

Alternatively, if you do wish to choose a new font for your website, you should select one that compliments your existing branding. One that is similar and doesn’t detract from what you already have. We also offer online branding and graphic design services to our clients should you wish to re-brand.

Consider The Personality of Your Business

Based on the design of the typeface you select, your presenting a certain image to the world at first glance about your business. Before anyone has read your mission statement or learned more about your products or services. In the same way that colour evokes emotion, fonts do too. For this reason, it’s incredibly important that you choose a font for your new website that relates to the overall tone of your company or organisation and doesn’t present a false image.

It’s always important to pick a font based on the type of customer you want to attract. For example if you’re a lawyer, you’re more likely to opt for a traditional font style that represents the professional type of work that you provide. As opposed to a quirky typeface that would be more suited to a visual artist or a musician. What type of personality are you trying to convey?

Categories

There are 4 categories that typefaces fall under;

• Serif – Formal and traditional (For example Tiffany & Co, HSBC or Vogue)
• Sans-serif – Casual and playful (Facebook, Google or Netflix)
• Handwritten – Cursive fonts can be elegant or playful. (Harrods, Ford or Coca-Cola)
• Decorative – Quirky, creative and fun. (Disney, Fanta or Lego)

It’s worth considering the brand image that relate to these font styles. Deciding which your brand is closest to yours in terms of their image and personality which you hope to demonstrate to your audience online. It’s much easier to choose a font when you’ve narrowed down the category of typeface that your looking for.

How Font Can Improve The Success of Your Business Online

User Experience

This ones a biggie! User experience is extremely important. You may have the most beautiful website on the planet, and the most incredible products. However if the user can’t read the font on your web pages then you’re going to struggle to keep them on the website, never mind convert them in to customers or clients.

Yes we know modern calligraphy is so in right now. (Don’t get us wrong, we love it too!) However there is a time and a place for it. Some fonts don’t translate so well, particularly when it comes to headers and calls to action. These are the areas of your website that we need to ensure are legible and can be read with ease. Ensuring the user knows what action that we want them to take. Whether that be ‘buy now’ ‘contact us’ fill out a contact form’ or ‘get in touch’ etc. You get the idea.

Likewise it’s important to choose a font for your WordPress website that translates well in various text sizes and font weights. Therefore being successfully used throughout your branding and marketing campaigns. Some fonts look great as a bold header, while become a lot less legible when they are developed into a small logo on a business card. Your font should be compatible across the board, both digitally and in print.

Picking The Best Font For Your Website

There’s absolutely nothing wrong with opting for 1 font. Take our own Primal Space website as an example. Where Montserrat has been used from company logo and branding to headers, call to actions and body text. However, the only negative to this is that quite a lot of work has to be carried out to create contrasts within the text. In this instance, this was successfully achieved by altering the font weight, size, casing, line-height to create a contrast between the accent fonts and main body text. While colour was used to ensure that important call to actions stand out. Therefore creating a more streamlined user experience.

Using More Than One Font on Your Website

We believe a great website comprises of 2 fonts that compliment one another well. Consider the shape of a triangle. The top level is the font that’s used the least but is the one that appears in headings and call to actions. Everything you want to be a main focal point on your web pages. Meanwhile the bottom of the triangle relates to the font that is used the most throughout the website in the form of paragraphs and main body text. This should be vary slightly from that of the header font but at the same time compliment the header. Most font catalogue websites offer suggestions on what secondary font works with the header font you have chosen. More on that in a moment.

In some instances there can be an exception when a third font is used. if you consider the triangle again, this third font would become the top section and would be used only as an accent font. In a similar way that you would have an accent colour. This is often found on more creative website designs and is often a handwritten or decorative font. Which if used across all headers and call to actions would be over powering. If a third font is used, it’s often used sparingly.

We would never recommend to a client to use more than 2-3 fonts as this would negatively impact user experience.

Where to find fonts online?

There are loads of great websites out there to choose font for your website. However we recommend you use Google Fonts as your initial platform of choice. This holds thousands of up to date fonts and allows you to filter based on the category and style that you desire. It also gives suggestions of fonts that work well together and allows you to experiment with typefaces, sizes, styles and weights. As well as this, all fonts found on Google Fonts are completely compatible with WordPress. Therefore we’ll never run into technical errors which could lead to you having to pay to purchase the rights to use a custom font on your website.

In the instance that a custom font installation is required. We use custom CSS to add your desired font to your WordPress website. An example of this from our portfolio is The Hairy Coo website where we successfully used CSS to introduce a custom Adobe font within the design.

While both methods work well. A point to consider is that Google fonts is a little slower than downloading the font. Or serving it directly from the same server as the site. As an extra request needs to be puled and looked up which can slightly reduce load speeds.

The Best Fonts For Your New Website

Hopefully by now you should have a clearer understanding of the importance of choosing the right font for your website to mimic your desired brand image. As well as the categories of fonts and how they relate to the tone and personality that you’re trying to achieve. As a result of narrowing down your font choices, the main considerations are to ensure that.

1) Your font for your website is user friendly

2) That it works well digitally and in print

3) That it’s compatible with WordPress

4) That it represents your brand and the type of customer you’re looking to attract

Now that you’ve chosen fonts for your new website, why not read on to find out how to source free stock images?

If your looking to find out more about our services we’d love to hear from you. You can tell us more about your website idea by completing our website project requirements form. One of our team will get in touch with you to discuss your project and how we can help you.