Picture this. You’re at a business conference and you come across a salesperson selling printers. They turn to greet you and they’re dressed for the beach. Without batting an eyelash, they’re talking business, showing you products, and telling you about the benefits their products offer. However, as helpful as they are, you’re so focussed on their outfit you can’t quite grasp the pitch.
Perhaps if the sales rep wasn’t dressed for the beach, the pitch would have gone better? Choosing a font for your brand / website is very much the same. You want to make sure your text is dressed for the occasion, and not going to distract or take away from the message.
Take a look at the example of a women’s fashion website with a chalkboard style title. Their target audience would be middle-class women ages 25-40.
The thought might be since the clothing is handmade, we want a font that looks as if it’s handwritten. While the example fonts aren’t inherently “bad” they simply aren’t the most readable and might not appeal to the target audience.
Another item to note is that these are display fonts. Display fonts are best used in a large size as a title. Like icons, they can convey different messages. We want to make sure the fonts we choose are suitable for the audience / message.
This image uses fonts similar to those found in fashion magazines. They might not have as much character (no pun intended) but they are clean and classic with a touch of style. The paragraph is written in a simple body font that’s easy to read and doesn’t distract from what’s being said.
It’s not likely that the audience is going to notice or admire the font choice (don’t mind us designer folk), but it will improve the overall aesthetic. The audience would now be focussed on the message / why they came upon the site in the first place, undistracted and with better visibility.
Choosing the right fonts for your website body copy
If you have a branding guideline, it’s best to stick with font choices in there in order to keep your branding consistent.
Your developer will typically know what to do when it comes to making font choices if you don’t have a guideline. If you’re working in a collaborative manner with your developer, they’ve asked for your input, or you’re designing your own you can check out a list of open source web fonts at Google Fonts.
For a body font, it’s best to choose something standard. Similar to what you would see in books, magazines, newspapers, emails, business documents etc.. Using Google Fonts, users can filter fonts and select only serif and sans serif to view a variety. Arial, Helvetica, Open Sans, Avenir, Roboto, and Lato are some choices to name a few.
Choosing the right fonts for your website titles
Since we can be a little more decorative with our title fonts, consider what would suit your audience and the message best. Take a look at this example. It shows how fonts can convey different moods or messages. In order they are Playfair Display, Alfa Slab One, Lobster, Graduate, and Bebas Neue. However, there are many others to choose from. If you’re using Google Fonts as your guideline, the about section for individual fonts offers suggestions for which body fonts pair best with display fonts. Body fonts can also be used for titles if you increase the size. Adding some bolding will help them stand out.
Keep in mind when choosing fonts it’s best to use the same ones across your website (and other marketing materials) for consistency, so choose one that will work well with your overall theme.
Last but not least we wanted to make a note of visibility. Dark text on a light background or light text on a dark background works best. That doesn’t mean you can’t have an orange background (see our homepage), just sure there’s a contrast in your colour choices so that the text is readable.
Body text should be at least 12pt or 16px and avoid animating text. Imagine that salesperson dancing around or waving a brochure you’re trying to read. You’d likely go to another booth, wouldn’t you?
By now you know some basics on choosing fonts for your website. Below is a summary of items we went over to help you choose the best fonts for your website / branding.
- Display fonts are best used in titles (a.k.a. headers) on your website
- Choose something standard and easy to read for you body copy
- If you have a branding guide, use the outlined fonts to maintain consistency
- When choosing fonts, choose ones that will work consistently across your website
- Choose fonts that work with the message and appeal to your target audience
- Like symbols, fonts convey messages and moods
- A web safe font is a font that is more likely to appear as intended to the end user
- Check out Google Fonts for open source fonts and inspiration
If you still have questions or are feeling stuck with your website, ask us for help! There are many ways to get in touch here.
Thanks for reading our article! Stay tuned for more tips and tricks.