Mini Tutorial: A Guide to Font Combinations

“Typography is two-dimensional architecture, based on experience and imagination, and guided by rules and readability.” —Herman Zapf

Just a few short years ago, designers were severely restricted in their choice of web fonts. The options were generally limited to system fonts and hoping that the site’s visitors had those fonts installed.

While web fonts were technically possible in the late 90s, they didn’t become widely used until 2009, when the WOFF format became available and part of the W3C open standards. That opened up an entirely new world of typographic options for designers.

And therein lies the dilemma: now that there are literally thousands of typefaces available for web designers, how does one go about creating font combinations that work well together and support the content being presented?

Good typography and using the best font combinations elevate a design from its peers and create a more delightful user experience. Effective type combinations add visual interest to a design that can keep a visitor on the page longer.

Bad type, by contrast, can make content harder to read and less pleasurable for the person reading it.

Learning to combine fonts effectively is an important stepping stone in a designer’s education, and one that should continuously be refined and improved upon. Designers who master typography can make even the simplest design more effective. Following basic typography guidelines for combining fonts is the best place to start. Once those “rules” are mastered, designers can branch out and experiment to create typographic combinations that bend or break those rules.

Type Characteristics

With the hundreds of thousands of typefaces available, trying to figure out where to start can be overwhelming, even for advanced designers. Understanding the characteristics of different typefaces is the first step in learning how to combine them effectively.

Learning how these characteristics relate to one another allows designers to combine fonts with confidence and to experiment with unexpected combinations. Experimentation and practice are where designers can truly hone their font combination skills and create designs that set them apart from other experts. Sometimes, listening to their intuition is the best way to create a typeface pairing that really shines.

Classification

Typeface classification is one of the most fundamental concepts to understand. There are four primary classifications to learn: serif, sans serif, script, and decorative.

Serif and sans serif typefaces are suitable for both headlines and body text. Script (sometimes also called handwriting fonts) and decorative typefaces, however, are generally only acceptable for headlines and titles, or other small chunks of text.

Serif fonts are considered more readable for long chunks of text (such as body text), particularly in print designs, where the serif feature can help guide the reader’s eye along each line. But sans serif typefaces can also be highly readable and excel at smaller sizes (such as those used for captions or meta information).

Sans serifs are also more popular for use on the web and are widely believed to be more readable than serif typefaces. Part of that stems from the early days of computing, when lower resolution screens made serif fonts somewhat blurry, depending on size. With modern HD and Retina screens, this is less of an issue and serif and sans serif typefaces can both be used effectively.

Combining typefaces from different classifications is often simpler than combining within classifications, as there’s a level of contrast between fonts already built-in. That said, it’s also possible to effectively combine typefaces in the same class, as long as other characteristics are considered.

Weight

Weight refers to the thickness of a font within a typeface. Thin, regular, semibold, bold, and black are examples of weights.

Contrast between weights is essential when combining typefaces. Combining a very thick font with a very light one often feels unbalanced. But combining typefaces that are the same weight can also be a challenge.

Instead, especially when starting out with font combinations, finding typefaces that have noticeable but not extreme differences in weight is easiest. Designers can branch out from there into more prominent distinctions.

Style

While style is sometimes used interchangeably with classification, in this case, it’s referring to a font either being normal, italic, or oblique.

When combining fonts where different styles are used, it’s important to make sure that the italic or oblique styles work as well together as the normal style. Sometimes italic styles are vastly different from the normal style of the same font, which can make fonts that would otherwise work well together suddenly clash.

Contrast

Contrast in combining typefaces can be tricky. Too little contrast can make fonts clash, while too much contrast can do the same.

Contrast when combining fonts refers to any way in which the fonts are different, including classification, weight, style, and structure.

When starting out, it’s best to focus on the contrast between only one or two of those things, while making sure the others are very similar. Weight is one of the easiest ways to create contrast between fonts. As already mentioned, too much contrast in weight can be just as jarring as too little.

Another easy way to create contrast is by combining different classifications of fonts, such as sans serif and serif or script and serif, etc. In these cases, making sure the mood of the two fonts matches up is essential.

For example, combining a more casual font like Amatic SC with a very formal font like Baskerville will clash rather than contrast. But combining something like Amatic SC with another casual font like Josefin Slab works beautifully.

X-height

X-height refers to the height of individual characters within a typeface, specifically the lowercase x. Typefaces with similar x-heights will work better together than those with varying x-heights.

Structure

The underlying structure of a typeface includes all its characteristics, plus things like the basic shape of the characters and their spacing. Creating contrast with the structure of fonts is an established method of combining fonts. But it’s a good idea to pick fonts that have at least some structural elements in common (such as x-height or the weight of the “normal” style) rather than those that are wildly different.

Mood

Mood is one of the more subjective areas of typography. It refers to how formal or informal a typeface is, as well as whether it’s playful, feminine, masculine, casual, serious, etc.

For example, Comic Sans is an extremely informal font that’s inappropriate for use in most situations. Bickham Script, on the other hand, is very formal but gives the wrong impression for things like business correspondence.

When combining fonts, it’s important to find typefaces with similar moods. Combining a playful font with a very serious one is going to be jarring to the eye.

Decoration, Color, and Texture

These things aren’t inherent characteristics of typefaces, but they are useful when combining fonts. Unifying (or creating more contrast) through color, decoration (such as underlining), and texture can be a very effective technique.

Using Variable Fonts to Create Flexible Type Systems

One of the challenges of font pairing is creating enough visual distinction between elements without making a design feel disjointed. Variable fonts give designers more flexibility as they provide multiple weights, widths, and styles within a single font file. Instead of loading separate files for regular, bold, condensed, or italic variations, designers can adjust these attributes within the same typeface.

This can simplify the process of creating hierarchy and visual interest. A designer might use different weights and styles from a single variable font to distinguish headings, subheadings, and body text while maintaining a cohesive visual identity.

Variable fonts don’t eliminate the need to consider characteristics such as mood, structure, and x-height when creating font combinations. They do, however, offer greater control over how those characteristics are applied, making them a valuable addition to a modern typographic toolkit.

Effective Font Combinations

There is a seemingly endless supply of sites with beautiful typography out there, along with an equally endless supply of those with bad or just lackluster type. Studying sites that get it right is a great way to learn how to combine fonts when designers are starting out or trying to take their skills to the next level.

Adjuvant Capital uses the modern, slightly whimsical serif typeface Orpheus Pro combined with the modern GT America sans serif typeface. For a financial services firm, this is a very modern choice but works well with their mission of socially responsible global investing.

Bloomscape uses the casual serif typeface Morion along with the sans serif Raisonné to create a striking, modern typographic design. Morion’s decorative letterforms work particularly well at display sizes, where they add personality and warmth without compromising readability. Raisonné complements the serif with similarly distinctive details, creating a pairing that feels cohesive while still providing clear contrast between headings and supporting content.

Vogue uses the modern, elegant Savoy serif typeface paired with the grotesque sans serif Franklin Gothic, which was originally designed in 1902. The combination of the two creates an upscale type design that appeals to the cultured audience the magazine targets.

Studying effective typography remains one of the best ways to develop an eye for strong font combinations, but designers can also utilize AI-powered tools to generate pairing ideas and explore alternative approaches. Regardless of how a combination is discovered, it should be evaluated against the principles discussed in this guide, including mood, structure, contrast, and readability.

Your choice of typeface is as important as what you do with it.

Bonnie Siegler

Conclusion

Effective font combinations are a hallmark of good design. Designers must master this skill if they want to create exceptional designs that set them apart from their contemporaries.

Consider the guidelines included here as jumping-off points to explore how to combine type effectively. A solid foundation allows for more efficient experimentation, without spending hours on completely unsuitable combinations. From here, designers can practice creating their own style and methods for effectively combining fonts, deviating from the guidelines as necessary with more confidence that their final product will be a delight to users.