When designing a website, mixing and pairing two or three fonts can easily become one of the most painful parts of a web designer’s job. No one argues with the axiom that well-matched fonts and good typography lead to beautiful, readable text and typefaces that can later be reused in any project. They become easier to modify, distort, change, and enhance.
But creating a typeface combination from scratch is usually not that simple. So what should be considered when mixing fonts? Of course, there’s no universal answer, and definitely no rule like: “this is good, and that is bad.” But there are some nuances and fine points that designers should pay attention to and keep in mind. For instance: x-height (the height of lowercase letters), contrast, shape, slant, and even the overall mood (which we previously covered).
In this article, we decided to explore in more detail the font characteristics that matter and influence why one pair looks visually pleasing, while another one looks like a complete mess.
In the beginning there was…
Some of the key principles that allow fonts to pair well are, oddly enough, the most seemingly incompatible ideas—dispersion (deviation from the norm) and comparison. For example, by selecting distinctly different fonts, you may find a pair that complement each other beautifully.
Another key factor is the number of fonts used in a project. The rule here is simple: use fewer fonts. Don’t pick five or seven. That will result in a “mishmash” on your canvas. Always start with two font families—this is usually more than enough.
But to find the right deviation (or dispersion), all you really need is contrast. You can achieve it by mixing font categories, sizes, weights—and also by paying attention to height, shape, and slant. It all may seem extremely complicated at first, but in practice, it gets easier over time.
For example, look at how studios like castirondesign, soireequinzeminutes, thelonelypixel, bucketlistly, table-wow, nejm select fonts. Each of them uses no more than two fonts, yet each typeface differs from the other—even though this may not be immediately noticeable when you first land on the site. This is where dispersion, comparison, and contrast show their true power.
Not contrast in color, but in characters
Contrast in typography can be achieved in several different ways—and all of them are equally common among web designers. For example, some use color to emphasize parts of text, while others pick fonts from different categories with varied weights, sizes, slants, and styles.
Most often, you’ll see a serif font paired with a sans serif. Typically, body text uses a sans serif, while serif fonts are used for headings. Designers also love to emphasize using italic or calligraphic styles. These tend to be more noticeable, visually engaging—yet not tacky.
This approach works great in web design. In print and logo design, the convention is usually flipped: serifs are used for body text and sans serifs for headings and brand names.
Regardless of convention, the serif-sans-serif combo is just plain readable ( lockedowndesign ). It’s easy on the eyes—period!
To see contrast examples in action, check out cellierdeschartreux, crane, bloc, analyticaprojects. In some cases, where contrast is achieved by simply bolding a font within the same family, the result is often barely visible—and the whole block of text blends together. That’s because the bold version isn’t distinct enough, visually.
Sans serif fonts pair particularly well with other font styles. Some websites demonstrate this perfectly by mixing various font styles while maintaining excellent readability. Why? Because it’s visually clear. Everything is easy to scan, and it’s immediately obvious what’s what and where. Sans serif fonts are simple by nature. But if you want to use something more decorative, it’s best to reserve it for an art-style design—or limit it to one or two words. For everything else, stick with simple, clean fonts.
Contrast can also be created through size. In this case, you’ll need to carefully consider the font sizes used across the design. A good trick is to first select the base font size for the main content, then significantly enlarge the font size for surrounding or highlighted elements. And remember: large fonts emphasize the most important information, helping to establish hierarchy in the layout. That’s why picking fonts that are too similar is basically forbidden. Everything will blur together, and the typography will become ineffective.
Thicker, heavier fonts with bold strokes and serifs always appear visually larger and more massive. That’s why they work great in contrast with thinner styles—whether italicized or not, colorful or monochrome. This is probably one of the easiest tricks for combining typefaces. You can clearly see this in: jonykrau, over, forestia, curlythemes, storiesforgood.
Web designers also often use color contrast in typography. While many projects rely on classic black and white, some use color accents that fit organically into the overall composition.
The mystery of x-height
X-height is the distance from the baseline to the top of a lowercase “x” in a given font family. What’s interesting is that every typeface has a different x-height. But there are similarities, and when you mix fonts with similar x-heights, it creates a sense of harmony, balance, and visual beauty.
But you can also “cheat” a bit by adjusting font sizes of typefaces with the same x-height—so they appear identical in height, even if the styles differ. This trick is especially useful when using different fonts within a single block of text that need to align properly. See examples on domainedirect and cellierdeschartreux.
Letterforms and shapes
Fonts with similar characteristics often naturally pair well and look good together. Let’s take a closer look at aspects like general shape, width, serif style, and slant. For examples, refer to: hatshop, authenticstyle, jhna, dixonandmoe.
How similar are the font sizes, proportions, and general shapes? Are they visually close or completely different? You’ll often see regular-style fonts paired with bold, low x-height, tall, thin, or tightly spaced letterforms on the opposite end.
Oval shapes and counter space within letters are useful visual guides—because in well-designed fonts, these characteristics appear consistently across styles or categories.
Stroke width is another interesting factor. In practice, try combining fonts with similar stroke widths—or completely different ones. The same applies to serif styles: they can be thick or thin, slanted or flat, simple or ornate.
And of course, pay attention to slant. Don’t mix fonts that lean in different directions. Some designers experiment with this, but in general, slants are subtle. A helpful tip: check the tilt of the letter “o.”
The mood of a typeface
A font’s style can be neutral or it can convey a strong mood or feeling. That’s why mixing styles allows you to achieve exactly the emotional tone you’re going for. The mood of a typeface helps create a bond between the user and your project, because it’s largely responsible for how visitors interpret and emotionally engage with your content. It creates a multi-layered connection between your design, your audience, and your own creative voice. We’ve talked a lot about mood before—but here’s one more thing:
Look at these examples and notice which font types are paired and what moods they create: dodgeandburn, peaktwo, botanistofficial, andchange, victoryadvisors.
To make font pairing easier, it’s worth following the philosophy of Hoefler & Frere-Jones: “Let one thing always remain constant, and let the other always change.”
What else to read
Some readers may find this the juiciest part... BUT.
There are two fascinating resources: 19 font combinations and 484 potential pairings —each with a unique rating. For example, Times New Roman + Helvetica is marked “1 – use at your discretion,” Times New Roman + Century is “3 – think twice before using,” and Times New Roman + Garamond is “2 – a non-conservative choice,” meaning it’s unconventional or non-standard.
These resources are truly insightful and worthwhile for everyone —whether you’re a web designer, a logo artist, or just curious about typography.
Conclusion
When deciding what works (or doesn’t) in your project, always pay attention to typography—especially font pairing. If you feel like something is missing, or on the contrary, everything looks “too perfect,” try experimenting with different font combinations. The magic of font pairing lies in the emotional tone it sets—and how it works for your project, your brand, and your audience.
Try to imagine how the examples we provided above would feel with different font pairings. Would those websites still be as fun to explore or as engaging to simply look at?