Choosing the right fonts for your website can be a daunting task — there’s literally THOUSANDS to choose from.
But you shouldn’t be opening your mind to the entire library of fonts on the web, as a majority of them will not work for you specifically.
So how do you narrow it down so that you don’t go down a rabbit hole spending hours upon hours just looking at fonts?
Well, today, I’m going to help point you in the right direction!
Do this first
Before you even dare begin searching for fonts for your website, you should start with your brand style guide.
This is a document that will outline the branding for your business, which includes your brand fonts.
If you have a style guide, you should first and foremost refer to it and use the fonts outlined in that document — as this is why it exists, and brand consistency is key.
However, so many businesses don’t have an official brand style guide, so you’re left with the decision to pick your fonts.
Now, when you are doing your research, I have a hard-fast rule to never utilize more than 2 fonts for your website.
It is very difficult to successfully incorporate a third font into a design, and do it well. More times than not, it causes confusion and clutter.
The easiest method is to choose 1 font for your headings, and 1 font for your body copy. This makes it a cut and dry process for styling your typography on your website, and takes the guesswork out of it along the way.
Now, let’s dive into the steps to help you refine what fonts you should consider.
Refer to your logo
Understanding that you don’t have a brand style guide for reference, the next step we should take in picking your web fonts is by looking at your logo design.
Again, consistency is key here, and you don’t want to be mixing-and-matching fonts just for the heck of it. We need your logo to be cohesive with your website, right?
So take a look at your logo — does it have a specific font in use?
There’s a few scenarios here that can play out:
- There is a font (or two), and it’s easily identifiable for you to use
- There is a font, but you have no idea what it is
- It’s a completely custom designed font
If your logo does have an identifiable font, or two, great! You can easily start there to determine if at least one of them is usable.
Now, yes, I did say you have to determine if it’s usable — just because there is a font in your logo that you can identify, does not mean it will be a great fit to utilize across your website.
I know, this gets very confusing — but let me clarify.
If the font in your logo is very stylistic, in terms of strokes and design, there’s a chance that it is not going to translate well for use in your website headings. You have several factors to consider — and readability is a big one.
This is partially a judgement call on using your “design eye” to determine if it’s a good fit, but you can always go ahead and implement it as a test on some headings on your website and see how it looks. If it’s difficult to read at scale and length, don’t use it.
There’s a chance, though, you can work that font in very selectively so that your branding is still pulled in somewhere.
Now, if your logo does have a font, but you don’t know what it is, there are tools to help! You can visit WhatFontIs and submit a screenshot of your logo text to help determine what font is in your logo.
It’s not a 100% guarantee to work, however you can get really close most of the time.
If you come up short, with no luck, then it’s possible that either 1) the font identifier just didn’t work for you, or 2) it’s a custom font.
If your logo has a custom font, then you most certainly will not be able to utilize it in your website.
Therefore, we’ll need to get back to the drawing board and go to the next step in helping identify what fonts to use on our website.
Consider your brand
Alright, so at this point you’ve determined that you don’t have a style guide and your logo was not helpful, so we then have to start with some strategy.
In this step, we’ll want to dive deep into your branding, and ask yourself the following:
- How do I want my business to be perceived?
- What words would I use to describe my brand?
- What is my brand voice?
- How do I want my website to portray my brand?
These are all deeper questions that get you thinking further about who you are as a brand, and how people will see you.
Your fonts you choose for your website are the vehicle for your messaging, and choosing the wrong style of font can portray you in a way that you never intended.
So really consider your brand image, your voice, and how you want users to feel when visiting your website.
Look at your industry
Now that you’ve done a deep-dive into your brand, another step we can take to determine the fonts on our website is to look at your industry and competitors.
There’s no question that if you look at 50 different websites in the same industry, you will find the majority of them use the same style of fonts.
This is not just a coincidence.
You will find out quickly and easily what fonts you should not be using on your website this way, as well. For example, if you’re an industrial steel company, you’re not going to see any professional website using a font like Pacifico. It doesn’t speak “industrial”, nor does it feel trustworthy or appropriate.
So take the time to look at at least 2-3 dozen websites in your industry, and take notes.
Are they using serif or sans-serif fonts? Modern or slab? Thin or thick?
Now, I’m not saying just go copy your competitors — but instead, take this research and translate it to go with your brand.
You’ll know what kind of fonts correlate with your voice and messaging, and consequently align with your industry as well.
Finalizing your picks
At this point, we have looked at our logo, dove deep into our brand, and researched dozens of our competitors in our industry.
Along the way, you should have not even began looking for fonts yet — but instead, just done the foundational work for determining the type of font you’re looking for.
And now, you can begin the search! A great free resource to begin is Google Fonts — they have a huge library that suits just about every need possible.
If you want to take it a step further, you can find a font to purchase on a site like MyFonts. They have an even larger set of fonts to sift through, and include filtering categories like “Serif”, “Display”, “Handwriting” or go through their page of tags and categories to get even more granular on the type of font you’re looking for.
As we mentioned in the beginning, choose no more than 2 fonts that compliment each other. Font pairings can be tough to find the perfect match, but you can always utilize a body copy font like Roboto or Inter for sans-serif, and PT Serif or Lora for serif.
These are easy picks to pair nicely with many different heading fonts. Just be sure to not spend dozens of hours on picking the perfect font. More than likely, as long as you’ve followed the steps above, whatever it is you choose will align with your brand and work great.
