Typography is more than just words on a page. The size and shape of the letters have the ability to convey mood, feeling, and attitude. That’s why you should never underestimate the power of good typography — especially when it comes to your website’s web fonts.
One analogy that I like to share is that choosing typography is like choosing a set of clothes for your copy. Just as beach attire isn’t appropriate in an office, neither is formal attire expected at the beach. Your web font selection can tell the reader whether your site is formal, hip, casual, progressive, conservative, informative, sweet, or fun.
That’s what you have to keep in mind when choosing the right web fonts for your website. Unlike Desktop fonts, web fonts are designed for use with CSS, the code language used to style websites. Choosing a web font ensures that your text will look the same on any computer or device.
Since written content generally takes up a significant portion of your site’s real estate, you have to make sure your web font choices are not only easy on the
In this article, we walk through what to consider when choosing a web font and offer up a handful of tips for mixing web fonts.
Choosing a Web Font? Ask Yourself These Questions
When deciding on the right web font(s) for your website, take the following considerations into account:
- What does this font say about your website or brand personality? Does it give the reader the right sense of what you’re about? Back to the earlier analogy — is your copy wearing beach clothes, formals or something in between?
- Is the font easy to read? Is it more decorative or functional? Fonts that are too ornate might reflect your personality, but they can be more difficult to read. If there’s an ornate font that you really want to use, it’s best to use it as more of an accent font.
- Does this font work in the language of your website? Some special characters may not display correctly in certain fonts, for example.
- Are you using more than one font? When done correctly, “mixing” fonts can pack a powerful punch. Continue below for some tips on mixing fonts.
5 Tips for Mixing Web Fonts
Given the many options and combinations of web fonts, choosing the best fonts in the best combination can be a challenge. The following tips should help guide the process.
1. Choose 2-3 visually compatible fonts at most.
Mixing too many fonts can make your website look sloppy, cluttered, and confusing to a reader. On the other hand, choosing only one font for all text may convey a boring, monotonal feel. Best practices suggest using a combination of two compatible fonts, or three at the very most. Using more than three fonts just looks messy.
2. Decide on a combination strategy.
There are two approaches designers use when mixing fonts: contrasting or harmonic.
The contrasting approach chooses fonts that differ in style but still look well together, adding a sense of warmth and depth:
The harmonic approach chooses fonts that are similar in shape/feel but different enough to provide a consistent feel throughout:
3. Choose fonts of similar proportions.
If your primary font utilizes broad spacing between letters while your secondary font scrunches the letters closer together, it presents the wrong kind of contrast — one that is confusing and visually unappealing. Likewise, if you choose two fonts with vastly different “x-heights” (comparing the height of the lower-case “x” in each font) it can make your text appear inconsistent and stunted. Whether you use the harmonic or contrasting approach, make sure your fonts are at least consistent in proportion and scale.
4. Avoid fonts that look too similar.
Certain font families are close enough in size and shape that it’s challenging to tell them apart — for example, Arial and Helvetica, or Tahoma and Verdana. While harmonic font pairings will have some similarity, if you pick fonts that resemble each other too much, your text will convey an unnerving blend of monotonality and dissonance — a combination that readers may find distasteful without even understanding why. You’d be better off choosing one font throughout instead of two fonts that look too much alike. If you decide on two different fonts, make sure those fonts offer enough contrast that the reader can tell them apart.
5. Choose a simple font for your body text.
Whatever combination of fonts you use, best practices suggest you use the simplest design for the body text, which is usually the smallest size displayed on the page. Ornate fonts can be difficult to read when they are small, and your reader may get eye fatigue while trying to read them. Your body text can still be elegant; just avoid fonts that are overly complex.
Further Reading on Web Fonts
If you’re struggling to find web font combinations that work for your site, or if you are uncertain which fonts work best and need some inspiration, FontPair can be a highly useful tool for visualizing font combinations that work well together. For additional guidance on choosing a web font, be sure to check out this excellent beginner’s guide put out by Google Design.
Have a favorite web font combo? Want to share some web typography tips or tricks with us? Hit us up in the comments!