There are 5 font mistakes you don't want to make on your website; they include:
- Using too many fonts
- Using all the same size fonts
- Using illegible fonts
- Using the wrong fonts for the mood
- No typographic contrast
Choosing the best font for a website can feel like playing the memory game. Numerous choices but only certain fonts seem to match. If you make the wrong font choices it can hurt the usability of your website. You don’t want that to happen because the entire point is to make your website easy to use for potential customers.
What criteria should you use to pick the best website fonts? To start, here are 5 mistakes you DON’T want to make with your website font choices.
Mistake 1: Too Many Fonts
Don’t be the website someone immediately leaves because it’s too busy to read. A website should use no more than two different font families. More than that will begin to look too busy and your user will leave and find an easier to read website and never turn back. Tragic. Woo them with the beautiful simplicity of your thoughtful font choices. Your user will appreciate how easy it is to read your content by sticking around to learn more about you, thus beginning a wonderful relationship. Notice I said choose two different font families, not just fonts. A font family can include multiple weights of the same font, offering you more choices without adding chaos or clutter.
Mistake 2: Same Size Fonts
Don’t be the website where size doesn’t matter. It does. Font size hierarchy is very important in guiding your user to the most significant information on a page. You’re able to give them a tour of the page without even being there. A well designed page will have a nice flow with the more important billboard text larger, then flowing down to the details that should be smaller. This helps your user’s eye to know immediately what the page is about, then continue reading to learn the specifics. If there is no size variation in fonts used on the page, it can seem chaotic and the user’s eye darts around the page and misses the message you wanted them to learn. Most websites will use no more than 3-4 different sizes for headlines and paragraph text. And hey, I’ll admit...I like big fonts and I cannot lie, you other designers can’t deny (but only in moderation).
Mistake 3: Illegible Fonts
Don’t be the chicken scratch website your user can’t read. Picking a legible font seems like common sense but you’d be surprised how many websites out there make this mistake. If you have to ask if a font is illegible, then it probably is. One way to test out if your font is legible is to ask someone over the age of 55 if they can easily read your text. If they struggle, you may need to choose a different font. There are many fancy fonts out there that seem to be the fun, perfect fit for your website, but be sure to keep it simple when dealing with a lot of text on a page. Fonts with a lot of decoration on them are very hard to read in large quantities and small sizes. If it’s just a few large words, the fancy font is probably fine. If it’s a sentence or paragraph, go more simple for easy reading.
Mistake 4: Killing the Mood
Don’t be the website that kills the mood after you’ve wooed your customer. You’ve started a relationship with a customer and maybe they haven’t seen your website yet. It’s the big moment, the big reveal, and your website font kills the vibe. The fonts on your website can set a certain mood or feeling. This feeling should match your brand and company’s personality. For example, a spa’s website would use delicate, light fonts versus very thick, textured fonts that seem aggressive. This would certainly kill the zen-like spa vibe if the wrong font choice was made. Determine the mood your website should have and find fonts you think express that feeling. Poll your friends and family by asking how a specific font makes them feel if you're unsure. This input will help you pick the best font for your website.
Mistake 5: No Typographic Contrast
Don’t be the website that looks as monotone as Ben Stein sounds. The fonts you use on a website should have some visual contrast to them. Create a combination of fonts (remember, no more than 2 font families) that have visual differences like thick and thin, serif and sans-serif, italicized and non-italicized, etc. It really helps to choose a font family that includes multiple weights (boldness) of the same font. This way you can mix that one font in different weights with another font throughout your website. Also, for easier page scanning, use bullet lists, section headers and short paragraphs to add contrast.
If you’re amped about making sure your website is in tip-top shape to drive traffic and engage users, we're ready to help. Request a free website assessment for some free tips on what you can do to improve your visitors' experience. Or sign up for a free assessment of your website to see if it meets the latest mobile-friendly requirements.
Originally published February 2015. Updated December 2018.