How to choose the right fonts for your website
If you read my article “How to choose a color scheme for your website,” you’ll know that this month I am talking all about how to create a pitch-perfect style guide for your brand, and ultimately your website! Last week we talked about color; next up - fonts!
Fonts can be a bit overwhelming. There are an endless number of fonts to choose from - many of them great (and many of them not so good). Today I’m sharing some practical tips for diving into this font search, and coming out with a cohesive and beautiful font scheme that will leave a great first impression to your website visitors.
So let’s keep it simple, put on our blinders to less-than attractive fonts (I’m looking at you, comic sans!), and get ready to nail this thing down. You ready? Read on!
Pin this!
Save this article to read later
Serif or Sans-Serif, that is the question…
Let’s start with the basics. First and foremost, try and decide whether you like serif or sans-serif fonts best (or if you want to try a combination of the two - we’ll get to that next!). Not sure what the difference is? Take a look:
Traditionally, serif fonts tend to have a more serious tone to them, while sans-serif fonts can seem more casual or modern. If you’re not quite sure which to use, explore some inspiration websites and see what feels good to you!
Fun fact: Serif fonts can be a bit easier for the eye to read as body text, as the little decorative strokes on them help guide the eye through the sentence. This is why most book publishers use serif fonts as their typefaces!
The serif + sans-serif combo
One trend we’re seeing a lot right now in the world of design using a combination of serif and sans-serif fonts. For example, you could use a bold serif font for your headlines, but then opt for a clean sans-serif font for your body text. Or vice-versa. This look can feel really fresh, and allow you the flexibility to include a couple of different styles of fonts you make like.
Add an accent font!
I love adding an accent font to every style guide or website I create. This is an opportunity to use that fun script font you found while browsing the web, that may not be super easy to read or practical to use as your headline font.
Places you can use this font? Maybe as a little caption next to your intro photo saying “Hello,” or as a call to action you especially want to emphasize. Using a bold differentiation in font in strategic places on your site can act just like that POP of color I spoke of in my color blog post - it’s a great way to lead your visitor’s eyes through the site and nudge them to go where you’d like them to go.
How many fonts should I use on my site?
The more fonts you have installed on your site, the longer it may take to load. And as with our color scheme, it’s good to keep things cohesive and simple. We don’t want to have a different wild font and completely different set of colors on every page of our website, as it may leave visitors feeling confused or uneasy.
I suggest selecting up to 3 fonts for your website:
Headline font
Body font
Accent font
From there, you can play with font size, weight, and italics to add variety throughout your design.
Where to find fonts for your website
There are millions, probably billions of fonts you could go download right now for your website. Whew, it can be so overwhelming!
I first suggest taking a look at what fonts Google Fonts has to offer. The nice thing about these is that they are free to use, and if you are using Squarespace, there’s usually no need to install them as a custom font - you can literally select them right from the site styles panel.
If you’d like something a bit more custom, you can dig around on FontSquirrel or DaFont - just be sure to only use fonts that are free for commercial use. The problem I find with these sites, however, is that there are literally SO many fonts to look through, and quite frankly many of them are just a bit too weird for me to want to include in my designs.
That’s why I personally like to utilize Creative Market or MyFonts - particularly for my accent fonts - as I feel there is a much higher quality material to browse through. I also love the fact that I can pop in some of my own text to truly see how it will appear in the font before I commit to purchasing it.
How to find out what font a website is using
There are a few ways to find out what font they’re using, but I’ve found one of the simplest ways is to take a screenshot and upload it to What the Font! Yes, that’s a real website, and it can tell you pretty quickly what the name of a certain font is, or at least give you some similar options. I’ve used this countless times over the years - it’s a pretty handy tool to have in your toolbox. :)
Another way is a bit more tech-y but you can use the Inspect tool on your browser to scroll through the code and determine the fonts used. I’ll shoot a video tutorial on that sometime!
The emotions of fonts
Selecting fonts that speak to you and your unique brand is super important. Think about what impression you want to leave your customers with. Are you playful or practical? Are you bold or more understated? A font can literally make a customer feel they are being screamed at (I’m looking at you bold, all-caps, Impact font!) or being whispered to, so try to think about what message you want to deliver, and what emotions are brought up by looking at certain fonts. If it feels a bit much to you, chances are it will feel the same to your ideal customers.
Need a little guidance?
I have a deep love for typography, and would love to point you in the right font direction if you’re feeling stuck! Feel free to leave me a comment or shoot me an email, and tell me what you’re looking for - I’d love to help. Chat soon!
