Font choices are incredibly important in your branding and should not be chosen as an afterthought.
Font choice can affect not only the look and design of your website but your brand as a whole.
You are probably reading this because you know this already, but aren’t sure what design rules to be following when you choose your fonts.
You are in the right place! Read on and I’ll give you the key things you need to know when choosing your fonts.
Picking the Right Font(s)
Choosing a font should be one of the steps in your branding process. If you haven’t already fleshed out your branding in a strategic way, you need to go back a few steps and do that first.
Part of establishing your branding is settling on your brand tone and words. This is one of the steps I walk all of my branding clients through.
Once you’ve done this, it becomes easier to choose branding elements that match or represent this brand tone.
So when choosing your fonts, you need to refer back to your branding foundations.
Is your brand light, airy and modern?
Is your brand professional and trustworthy?
Maybe your brand is bohemian, down to earth and natural?
Whatever yours is, your fonts need to match this tone.
Rule of thumb when choosing fonts, is you actually want to choose 2 (at least 2, no more than 3, see note below).
Design Rules for Fonts
To be clear, you should be choosing at least 2 fonts for your branding/design or website.
One will be your header font. This is sometimes also known as the statement font. It will be used for impact, for titles, headers and important information.
The second font will be your body or your subtitle font. This font will be used for longer blocks of text and sub-headers.
The trick is that these two fonts must complement each other (see below for font combination tools you can use to figure this out).
Believe it or not, there are some fonts that just don’t work well together.
A shortcut if you aren’t sure where to start:
Make your header font a serif and your body font a sans serif. This can be a good rule to follow, but it is by no means a rigid standard.
But, take a look at the examples below (they both break this rule!)
Montserrat and Open Sans are both sans serif fonts.
Abril Fat Face and Playfair Display are both serif fonts.
It’s important to know the rules for font design and pairing, but also know that some of them can be ‘broken’ (ie. you do not need to have a serif and sans serif in order for them to be balanced).
Finding Font Pairs
Once you have settled on your first font, you can then use a font combination generator to find a font partner that goes well with your primary font.
Here are some great font combination tools to try:
Canva’s font combination generator – is there anything Canva doesn’t offer us these days?
Font Combination Tool by Bold Web Design
TypeWolf – for inspiration and ideas about what’s currently trending.
Typ.io – great site for seeing examples of fonts in play for different site focuses: portfoilo, design, agency etc. (don’t worry, even if your site doesn’t fall under one of these categories, it’s still great inspo)
Here are some more font pairing examples:
Design Rules Not To Break
The whole point of your font choices is to complement your brand. Avoid the impulse to be too different.
Choosing fonts that are obscure, complex or difficult to read will only detract from your brand aesthetic. It will also make it look amateurish.
When was the last time you saw a super professional website or branding that had crazy hand-drawn looking fonts? Or super curly script font?
Just don’t do it. There’s a reason why there are classic fonts that never go out of style!
Definitely Do Not Do Not Make These Font Mistakes
Folks, I’m going to tell you some fonts to just never use. I mean, never. Just trust me on this …
Mistake to Avoid #1:
Don’t ever use the Playscript font. (see image below). Yes, I am sure you recognize it. I know this because everyone uses this font! Don’t be that guy.
Using the Playscript font is the fastest way to make your designs look amateurish and cookie cutter. Your images and your branding will not stand out with this font.
Mistake to Avoid #2
Overly curly/scripty script font or fonts that are very ‘handwritten looking’.
There may be a place for these fonts in other types of design, but I am willing to bet, your professional branding for your website and business is not it.
These are difficult to read and look childish.
If you aren’t sure if they will work or could be difficult to read, create some headings in a normal type size and ask at least 3 people to read them. If they hesitate for even a second to read them, it’s a no.
Mistake to Avoid #3
Any fonts that look like they would be used in a ransom letter or a Halloween invitation. Equally, anything that looks like it’s trying to emulate ‘the olden times’.
Again, these have a place somewhere, but it’s not in your branding or your website!
I will emphasise again, don’t try to be too unique. It always backfires.
Things to Definitely Do
The irony in trying to stand out in your branding is that you actually do need to choose certain design elements that are common. But common because they are classic, trendless and will age well.
This means choosing fonts that have proven their longevity. Use the font tools listed above to generate some combinations, then sit on them for a few days. Try them out in different ways.
Another good idea is to test it.
Ask your friends or post it in your favourite FB group and ask people if they find it difficult to read. Or ask them what sort of words come to mind when they see this font or font pair.
(don’t ask people ‘what do you think?’ this opens the door for unhelpful ‘feedback’ and will only add to noise to your decision process)
Even though many people use fonts like Montserrat, Open Sans, Merriweather, Raleway, it’s because they are not trendy. They will look as professional and classic in 2 years time as they will in 5.
It’s always better to go for classic over trendy. And when in doubt, go for simple and easy to read over unique.
One Final Note on Fonts
If you do decide to go with a third font choice, make sure this is one that is used sparingly or as an emphasis font in a header for one or two words.
Here is a good example:
But I can’t stress enough how this should be used sparingly and not in every single header on your website.
When in doubt, less is more when it comes to design!