The complete guide to choosing and using fonts for your website

It's not just words that make us feel things when we read. Fonts trigger an emotional response, too. Baskerville, for example, is a trustworthy font. Courier makes us reminisce about times gone by. And Helvetica often reminds us of bureaucracy and the government. 

Choosing the right website fonts can make or break your business website optimisation efforts. We work with a lot of B2B technology companies, and this is one of the first things we look at when recommending website changes. The wrong font will:

• impact your website visits;
• determine your leads, and
• sure enough, it’ll affect your sales.

In this blog post, we deconstruct the ins and outs of choosing and using website fonts, from the history of the typeface, to how you can settle on a font that represents exactly who you are as a business.

Here goes…

First things first: know the terminology

Kerning, fonts, typefaces, ascenders, descenders… woof. The world of fonts is more complex than you or I ever thought it could be. There’s a lot more to it than pretty lettering.

To understand fonts, first, you need to know how to talk like a font geek, and that means familiarising yourself with the terms. Here are a few definitions:

• Kerning: Kerning is the process of adjusting the spacing between characters in a proportional font.
• Tracking: Tracking is adjusting letter spacing to affect the visual density of a word.
• Ascender: An ascender is the part of a lower-case letter that is taller than the font's x-height.
• Descender: A descender, then, is the part of a lower-case letter that extends below the font’s x-height.
• X-height: The x-height (or corpus size) is the distance between the base line and the mean line of lower-case letters in typeface.
• Serif: A serif is a small decorative line added to the basic form of a character.
• Sans-serif: A group of typefaces that do not use serifs (like the typeface you’re reading!).

These are just a few basic definitions used in typography. We won’t bore you with them all. Instead, we’ll leave you with this chart. It’s rather self-explanatory… 

Fonts are subjective… sometimes

Fonts are about personal choice, and the notion of a ‘good’ or ‘bad’ font is entirely subjective. But with this said, there are some bad fonts out there. Really bad.

Remember this?

Oh dear!

Fonts help companies build credibility and trust. If you choose poorly, your website will become just another cyber-hungry, unprofessional and untrustworthy place.

So, let’s look at how companies use fonts to align their brand. Here are a few bad examples (not based on real clients).

Client A: the ‘friendly’ business

Client A claimed their key differentiators were their ‘people’ and their ‘friendly approach to service’. (Hint: these are everyone’s key differentiators.)

To showcase how friendly they were, they settled on Comic Sans as their font of choice. It’s rounded, it’s bubbly, and it’s friendly to read. It’s also overused, childish and wildly unauthoritative.

As a result, they failed to present themselves as a thought leader, failed to come across as a professional managed service provider, and consequently, failed to achieve the results they wanted to see.

Client B: the ‘technology-focused’ business

Client B wanted to make sure people knew they sold technology. They settled on PT Mono as their font of choice because it slightly resembles code and looks technological.

But PT Mono is a clunky font. It’s hard to digest as a reader, and much like the many, many stock photos of hooded men hacking the matrix, it lacks a heart and soul. There's something robotic and inhuman about it. Patrick Bateman would be proud.

So, you might be asking: what makes a good font? How can you decide on a font that accurately represents your business and gets you customers?

3 rules to follow when deciding on a font

Settling on a font is like trying to choose a cereal at the supermarket; there’s a criterion to follow. You don’t want anything too sugary, you want to avoid those E numbers and you need something high in fibre.

Here are the three rules to follow when choosing a font.

1.     Is it readable?

Yes. Sure enough, you need a font that’s readable. Humans tend to skim read, and difficult-to-follow fonts will slow down the intake of information, hurt eyeballs and turn people off. In short, readability is the difference between this headline:

'10 things you didn’t know about buying breakfast cereals'

And this headline:

'10 things you didn’t know about buying breakfast cereals'

2.    Does it align to your brand?

Whether you like it or not, we’re judgemental beings. Within seconds, we’ve taken superfluous factors into account and decided whether we like or dislike something.

Branding, then, is important. Really important. For today’s digital business, a website’s font is as valuable as a store front window. An ugly one will turn people away before you’ve had a chance to sell to them.

3.    Get unique, but don’t get crazy

Roboto, Helvetica, Open Sans, Times New Roman… they’re dead fonts. Deal with it.

If you have an in-house design team, task them to source an exciting font from somewhere on the internet, or if you've got the dough, hire a company to develop a font just for you. 

Your competitors are all saying they're 'different'. They might talk the talk, but you need to walk the walk.

Font suggestions for B2B technology companies

Invariably, we can’t wrap this article up without offering our two cents on what fonts we think you should use.

As we’ve said, fonts are subjective. There’s little in the way of rules, and today’s popular font is tomorrow’s laughing stock, so tread carefully.

With that disclaimer out of the way, here are a few font suggestions from our expert designers and developers at Articulate.

1.     Apercu

Apercu is an easily readable, light and human font that suits all avenues of technology. It’s a font that works in H1 tags, H2 tags and body copy alike, and more importantly, it’s the font we’ll be using in our new branding!

2.    Guillon

Guillon is another good example. Fintech company, Fintory, use this font on their site, and it’s helped them position their website as something that’s easily understood, approachable and genuinely quite helpful.

3.    Averta standard

We like Averta standard a lot. It’s slick, it’s stylish and it’s light and fluffy, all at the same time. Akasha use this font on their site, and it helps to accentuate that clean and minimalist aura they have about them.

1. HK Grotesk

HK Grotesk is an open source free font (yes, free!). It’s a sans serif inspired by grotesques, and boy is it beautiful. If you’re on a budget, we’d highly recommend this font across a website. 

Choose wisely

There’s a lot to consider when settling on a font. It’s like getting a full body tattoo for your business – you need to be sure you’re going to like it for a while to come.

Recently, there’s been a shift to lighter fonts on B2B technology websites, and many companies are opting for sans serif fonts to help make themselves more approachable. But, as explained by our in-house developer, Kyle Higgs, Serif fonts aren’t dead yet:

‘Serif fonts are making a bit of comeback, but they’re hit and miss. I really like the way Mail Chimp is using type at the moment. Dropbox did some really bold stuff with type, too, but it’s a little bit like marmite – you either love it or you hate it.'

Small change, big impact

Ever heard the phrase ‘don’t sweat the small stuff’? We think that phrase was written by the same person who designed the London 2012 Olympics logo.

You should always, always sweat the small stuff. When it comes to websites, it’s the small things like fonts, images, line spacing, white space, pop-up placements and loading speed that make all the difference to both user experience and your brand image.

In fact, whatever font you choose, whether you're a B2B technology company or a used car salesman, know that it's as important as the design for the rest of your website. Marketing is a holistic game.

You want conversions? Source a unique font, use bespoke illustrations instead of stock images, and write like you’re Orwell.