Alright, you’re ready to hunker down and start designing your website. Go you! Except.. wait! You’re not a designer… and omg there are a million fonts out there to choose from.
What do you do?
I don’t blame you for freaking out a little. I find choosing fonts can be one of the most time consuming parts of the design process, because there’s just so many options!
And there is indeed a lot of things to consider if you don’t want a site that looks glaringly amateur.
Ok so let’s break it down…
The Font Hierarchy
So, on a website, you’re going to want around four different font styles (at least that’s how many I choose when designing a site). More than that, and things start looking messy and home-made… less than that and there’s no visual interest.
These four font styles you choose should have a general hierarchy of being the largest on the page to the smallest on the page.
You’re going to want to choose an:
- Accent font – the largest font on the page (usually. And accent fonts are optional.)
- Headline font – the second largest font on the page
- Subheadline font – the third largest font on the page
- Body font – the smallest font on the page, used for longer paragraphs
Now, each of these don’t have to be their own font, per se… but they should be distinct and you can do that by changing any of the following: the size, capitalization, italicization, boldness, or letter spacing of the font.
So for example, your headline and your subheadline could both be Montserrat font, but maybe your headline is all capitals, bolder, more spacing between the letters, and larger font size. And your subheadline is lowercase, smaller font size, and italic. This makes them very distinct from each other.
Here is an example from my client Melissa Turner’s site Endo Empowered (re-launching soon!)
Here’s more about each one:
An accent font is like a fancy dessert for your page. It’s not the main event, but it just adds a little oomph.
This should be the most unique font on your site… could be something fancy, unusual, or just generally quite distinct.
For me, most of the time my accent fonts on the sites I design are handwritten script fonts. These should be used SUPER sparingly.. usually script fonts are hard to read and get overwhelming in longer sentences.
I usually reserve my accent fonts for word snippets that are 1 to 4 words long – this is how they look the best.
Here’s an example.. this is the same font from the example above. It looks amazing when used in a large size for only two words, but look at what happens when you try to use it for long sentences:
Your headlines are your main event. It’s the thing that people are most likely to read as they scan a page, so they should stand out and grab their attention. They should also be highly legible – aka really easy to read.
Subheadlines are the second course. They’re there to add emphasis and more information to back up your headlines. They are smaller than headlines, but stand out more than the body font.
Body fonts are the smallest and least distinct. Whatever you choose here is rarely critical.
Here are some more visual examples of font hierarchies.
Where to Get Fonts
I highly recommend purchasing a premium font for your accent font, mainly because free options get way overused.
See, accent fonts are generally the most distinct font on your site and so they’re more recognizable. People start to see the free ones over and over… and like any popular trend, they will eventually be looked upon as overdone and outdated.
The sad truth is that if your fonts (and your brand / website in general) look outdated or like a bad overused trend, get ready for people to subconsciously judge that your biz is low quality. Probably not what you want them to think, right?
A quick and dirty rule to know if a font is overdone is simply to be wary of any font that looks just a weeeee bit too familiar…. wouldn’t hurt to ask some friends and family their opinions too just to make sure.
Make sure to only purchase ones that have a web font licensing option, otherwise you can’t legally use it on your website.
For the headlines, subheadlines, and body font – there is less risk of the font looking outdated because you’re generally choosing fonts that aren’t quite as distinct or recognizable – so they’re not going to create a trend or become overdone in people’s minds. So don’t stress too hard about it.
For these, I almost always just choose free ones from Google Fonts.
Now Back to Actually Choosing the Fonts…
So, now you understand a little bit about how many to use, where to get them, and what to do with them. But let me guess… you’re still pretty lost on exactly which ones to choose?
Well, I’m not saying this task is ever going to be easy, probably because there’s no “right” answer to choosing the actual fonts. Guidelines, yes… but right answers… no. There’s an art to it.
I suggest starting with your headlines, subheadlines, and body text… have a browse through Google Fonts, and download a bunch that appeal to you.
Then in a Word document, choose three fonts to start and set them up in the hierarchy I was talking about so they’re sized largest to smallest. And start playing around … test out different fonts and font styles.
It simply takes some playing around with different fonts and font styles to hit on a combo that looks and feels right.
Then you can go check out MyFonts or CreativeMarket and browse premium accent fonts that will work with your font combo.
Make Sure Your Font Suits Your Brand’s Personality
Before you’re dead set on a particular font (especially your accent and headline fonts), ask yourself … does this font match my brand personality?
See, fonts have personalities, especially handlettered, specialty, or script fonts (because they’re so distinct).
But other fonts do too… for example serif fonts (the fonts that have the little extra bits on them) generally have more of a formal personality to them than sans-serif fonts.
We’ll use ol’ Comic Sans as an example. There’s nothing inherently wrong with Comic Sans, but it has a very playful, childlike personality. It’s appropriate to use in schools or children’s books.
However, it’s ended up being so reviled because people everywhere started using it for very serious notices in hospitals, police stations, and that passive-aggressive sign in your office’s kitchen that says “Clean up after yourself. We’re not your mom”.
A font with a more serious personality would be more appropriate for these situations, you know? Ambulances aren’t fun and games.
Basically if you use a font, particularly for your accent and headline, that doesn’t match your brand’s personality, your potential customers are going to think WTF about your brand, which obviously doesn’t lead to sales.
I know you might be thinking I’m just being a stuck up designer right now, but all of this stuff happens subconsciously… people don’t even realize they’re judging you about your terrible font choices, they just are. It’s not my fault! I’m innocent!
Let’s take an extreme example to show you what I mean. Imagine you’re a feminine, bubbly, self-love coach. And then you go and use this font on your website:
Uh… weird, right?
I assume no one’s really going to do that, but you get what I mean. Use the underlying principle of WHY that doesn’t work, and use it as a filter to your own font choices.
Other Random Font Tips:
- Uppercase font looks more professional and easier to read when you add some space between the letters. Lowercase font looks better when set to default letter spacing or even a little less.
- Legibility is important. Like I said, that’s why I don’t use script fonts for long sentences. And don’t make your body font so small that it’s uninviting to read.
- Use the four fonts you choose not only on your website, but EVERYWHERE your brand shows up. Social media, print, graphics, promotions. Consistency creates credibility with your audience.
Still Just Can’t Even?
You need a designer! This stuff might just seem like ‘hey, whatever, may as well just pick something.. how much does it really matter?”. But as mentioned, those little snap judgments people make about your brand’s credibility have real business consequences.
So get in touch and I’ll sort you out. Because I know you have better things to do with your time than compare Helvetica to Times New Roman while ripping your hair out in clumps!