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 focused 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 fonts for your 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. 

Example 1:

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 often more decorative and best used in large sizes (think headings versus body copy). Like icons, display fonts can convey different messages. We want to make sure the fonts we choose are suitable for the message and the audience.

Example 2:

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 will notice or admire the font choice (minus designer folk – oh, hi!), but it will improve the overall aesthetic. The audience will now be focused on the message and why they came to the site in the first place; less distraction, clear next steps.

Choosing the right fonts for body copy.

If a business has a branding guideline, it’s best to stick with the font choices outlined in order to keep branding consistent.

A developer skilled in frontend development or design will typically know what to do when it comes to making font choices if no branding guideline is available. For those working without a developer, Google Fonts has a list of open-source web fonts.

To choose a body font, it’s best to go with 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 (the ones with the little feet or hats on the end of the stroke) or and sans serif (no feet or hats) to view a variety. Arial, Helvetica, Open Sans, Avenir, Roboto, and Lato are some choices to name a few.

Choosing the right fonts for headings.

Font names top to bottom: Playfair Display, Alfa Slab One, Lobster, Graduate, and Bebas Neue

Body fonts can also be used for headings, however, since the size is typically larger in headings, fonts here can be a little more decorative if desired. This is where the display fonts mentioned above can come in. Take a look at the above example. It shows how fonts can convey different moods or messages.

Keep in mind, while there are many, eclectic fonts out there, readability is most important! That lovely script font might be tempting, but it’s not helping anyone if the heading isn’t clear.

Pairing is another consideration.

If using Google Fonts as your guideline, the about section for an individual font offers suggestions for which body fonts pair best.

If not, one of the key points in pairing fonts is to create contrast. This can be achieved by:

  • Choosing different classifications of fonts – such as pairing sans serif body copy with a serif or script font for the header
  • Having a noticeable difference in header font size from the body copy (and subheaders if applicable)
  • Not mixing fonts – keeping the header font in the header and the body font in the body
  • Adding weight to the title

Not only will font combinations that have some contrast look better, it will help create visual hierarcy and make it easier for visitors to navigate a website.

Visibility

Last but not least we wanted to make a note of visibility. Body text should be at least 12pt or 16px. Dark text on a light background or light text on a dark background works best for most individuals. That doesn’t a white title can’t have an orange background (see our homepage). However, it might work best to keep things neutral or muted behind body copy.

Also, avoid animating text… Imagine that salesperson at the beginning of our post dancing around while you talk.

You’d likely go to another booth, wouldn’t you?

Summary

By now you know some basics on choosing fonts for a website. Below is a summary of items we went over:

  • Display fonts are best used in headers
  • Standard and easy to read fonts are best for body copy
  • Choose two or three fonts that will work consistently across the website
  • Create contrast to help create visual hierarchy and help with navigation
  • Like symbols, fonts convey messages and moods
  • Choose fonts with the message and audience in mind
  • Use a branding guideline to maintain consistency
  • 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.