- Allison Ko
- Aug 27
- 6 min read
Looking for the best way to build your website? Get started with Wix →
When you’re creating a website, choosing a font can seem like a minor detail. As long as it’s legible, who cares, right?
But the reality is, the wrong typography or combination of fonts can make your website look messy or unprofessional. They can distract people from what really matters on your site or cause them to leave before they’ve even given your brand a chance.
Over the years, our team has taken note of the font pairings that tend to trip people up. Here’s what makes them some of the worst website font pairings, and what our designers advise doing instead.
01. Playfair Display + Libre Baskerville
At first glance, these two fonts may seem complementary, given that they’re both elegant and sophisticated—but their similarities are exactly the problem.
“Both are serif fonts with similar contrast and elegance,” notes Wix graphic designer Ella Joel. “There’s not enough visual hierarchy between them, making the design feel monotonous and old-fashioned without intention.”
Instead: When you want to keep that refined serif look, select one (perhaps Playfair Display for striking headlines) and balance it with a sans-serif for the body. For example, Playfair Display paired with Source Sans Pro or Open Sans works well—this combination brings structure and readability.
02. Raleway + Montserrat
“These two geometric sans-serifs are very similar in weight and character,” says Wix graphic designer Moanes Mahajna. “Designers sometimes try to use them for heading and body contrast, but it ends up looking like a mistake because there’s too little differentiation.”
On a website, this pairing can look like a formatting error instead of an intentional design choice. The body text can quickly overpower your header text and make your site hard to skim.
Instead: Use Montserrat for your headers if you love its clean lines, and pair it with something that offers clear contrast in style or shape, like Merriweather or Lora for body copy. The goal is to create visual interest by mixing a geometric sans-serif with a serif, instead of choosing two fonts that are only a little bit different.
03. Exo + Rajdhani
Even though these two fonts may have the same vibe, their different proportions and styles create friction.
“Both are futuristic sans-serifs, but Exo is wide and angular, while Rajdhani is narrow and technical. Instead of complementing each other, they feel like they belong in different sci-fi genres,” says Wix graphic designer Or Paritzky.
Instead: If you want a modern look, use one bold, unique font and pair it with something simple and understated. For example, use Exo with a neutral sans-serif like Open Sans to anchor its futuristic vibe, or pair Rajdhani with a font like Orbitron to reinforce a cohesive look.
04. Merriweather Bold + Quicksand
“There is a mismatch in weight and density,” notes Moanes when evaluating this pairing. “Merriweather Bold is heavy and authoritative, while Quicksand Light is airy and soft. There’s no harmony or visual rhythm.”
These two fonts clash, almost like wearing flip-flops with a tuxedo. And on a website, they create visual dissonance, making it difficult for visitors to know where to look.
Instead: If you want to play with bold headers, use Merriweather Bold at the top and a regular or light version of a sans-serif like Lato or Open Sans for body text. This pairing utilizes one of the easiest-to-read fonts and feels more intentional. When combining weights, make sure the difference feels supportive, not conflicting.
05. Archivo Black + Cardo
Fonts from different worlds can send mixed messages, as this pairing shows.
“Archivo Black’s bold, modern tone clashes with Cardo’s classic, academic feel, creating a mismatch in style and purpose,” states Or.
While Archivo Black’s contemporary tone brings to mind innovation and forward-thinking values, Cardo’s academic style can imply that your brand values heritage and tradition. Combining these two fonts can lead to a bit of an identity crisis; viewers might have a hard time understanding what your brand’s all about.
Instead: Try to choose fonts from similar families, or at least with similar tones. For example, match Archivo Black with a contemporary sans-serif like Roboto for consistency. Or, if you like Cardo’s scholarly edge, match it with another serif that’s understated.
06. Roboto + Playball
Similar to the last example, these two fonts tell two very different stories. They compete for attention and may lead visitors to think that your brand is indecisive or disorganized.
“Roboto is modern, utilitarian and clean,” says Ella. “Playball is a romantic, swirly script.The clash in tone makes the design feel directionless.”
Instead: Use Roboto alongside a font like Roboto Slab (a natural sibling). If you want to add more personality to your web design, use Playball or a similar script font selectively—maybe just for special accents like button text. For a more harmonious blend, you could pair Roboto with a softer sans-serif like Nunito.
07. Cormorant Garamond + Cardo
“These classic serif fonts have very similar vibes (they’re elegant and academic) but have different serif styles and contrast levels,” points out Moanes. “They don’t contrast enough to justify a pairing, and the subtle mismatch can look like a formatting mistake.”
When using these on a site, especially a text-heavy site like a blog, visitors may struggle to focus on the words in front of them. Because the differences in these fonts are subtle, yet still noticeable, your site may end up looking amateurish.
Instead: If you want to stick to an elegant, timeless theme, use Cormorant Garamond or Cardo on their own for headings, and bring in a clean sans-serif like Manrope or DM Sans for your paragraphs or navigation.
Learn more about how to start a blog.
08. Manrope + DM Sans
Minimalist sans-serifs like Manrope and DM Sans can be striking, but not when they’re paired together.
“These are clean, modern sans-serifs, but too close in weight and proportion,” says Or. “Using both dilutes the effectiveness of each font. It’s better to pick one and pair it with a serif or a display font.”
Instead: Choose either Manrope or DM Sans as your main font (they both shine on their own), then create contrast by introducing a different style. For example, pair Manrope with a classic, serif (and web-safe font) like Times New Roman for a balanced blend of modern and traditional, or with a display font for emphasis in headers. If you stick with DM Sans, try it with a handwritten or decorative style for accent elements. This can add a touch of personality without sacrificing clarity.
09. Alfa Slab One + Lato
When you look at this pairing, you get the feeling that one is yelling at you while the other is whispering. Massive style differences can work in some cases, but here it just feels abrupt.
Ella breaks it down, saying, “Lato is clean and approachable, while Alfa Slab One is bold, heavy and attention-grabbing. Together they feel unbalanced.”
Instead: If you want to use a bold display type, choose another font that can hold its own, or stick to one heavyweight font for accent. Try using Alfa Slab One for your headings and a sturdy sans-serif, like Open Sans, for the body. Alternatively, if you like Lato’s versatility, keep it as your main typeface and use a display font that feels just as open and friendly for accent text.
10. PT Sans + Righteous
Some fonts, like Righteous, have a lot of personality. It can easily overshadow quieter fonts like PT Sans, making it a bad match.
“PT Sans is neutral and clean, while Righteous is bold and stylized,” explains Moanes. “The contrast feels jarring and unbalanced.”
Instead: When thinking about pairing a strong, stylized font like Righteous, it helps to look for a supporting font that either shares some of its playfulness or quietly stays in the background without getting lost. For headings, Righteous can be a fun choice. But try combining it with a rounder sans-serif (like Nunito) or a simple geometric font (like Poppins) for body text. Alternatively, if you want to use PT Sans, keep it for both headings and body, or mix in a softer display font (like Pacifico) for smaller accents.
In summary: a few basic tips when it comes to font pairings
Choosing the right font pairings is an art that even the most experienced graphic designers still struggle with. There aren’t any clear rules, and what’s “in vogue” now might be outdated tomorrow.
That said, there are some time-tested principles and guidelines can help you stay on track:
Stick to two or three fonts. Less is more, when it comes to striking the balance between readability and style. You’ll generally want to choose one font for your headings and another for your body text—or stick to one main font family, while reserving a second for smaller accents.
Think about contrast. Pair fonts with distinct differences in style, weight or proportion. Think serif plus sans-serif, or bold plus light.
Never sacrifice readability: No matter which fonts you choose, make sure your text is still legible. Reserve fancy or fun fonts for short headlines, and avoid overusing them in body text.
Match your brand’s vibe. Choose fonts that align with your brand’s voice and personality. If you’re going for a more playful vibe, try rounded fonts. If you’re going for a professional vibe, try classic serif fonts.
Read also:
Comments