TUTORIAL ARTICLE

Beginner

5 min

Guide: Pairing fonts

A look at font types and how to put them together in a cohesive design.

What you’ll need
Practice in the app

Overview

When creating a project in Adobe Express, it’s likely that you’ll be using typography in your messaging. To best communicate in written language, you’ll have to make some decisions about what best represents your project and gets your point across. Font is an important factor here. In this guide, we’ll look at some basics that will help you when choosing fonts for your project.

Using font type to hone in on aesthetic

It’s important to consider the project and what type of fonts are appropriate for it. This requires thinking about the feeling or aesthetic you want to evoke. One way to approach the question of aesthetic is by looking at fonts categorically, considering the major font types. Here’s a quick overview:

Serif fonts 

Serif fonts are typefaces that have small lines or pen strokes stemming from the letters. These lines not only give the characters more personality but can enhance legibility. Fonts within this family often carry an air of sophistication, elegance, and tradition. Serif fonts tend to evoke history and institutional repute.

Sans serif fonts 

 Sans serif fonts are fonts without serifs. Without the added flourish of serifs, they tend to have a sense of minimalism that comes off as crisp and clean. This simplicity also provides them with ease of pairing, especially with more eye-catching and distinctive fonts. These typefaces have a more modern association and a unique versatility.

Slab serif fonts

Slab serifs are technically a serif font with thick, block-like serifs and, typically, a monolinear or unmodulated stroke. In other words, the thickness or width of the stroke doesn’t change. This provides them with weight and impact that is not shared by the more traditional serif. While this quality makes them uniquely suited for headline and display use, they have also historically played an important role in body and editorial copy.

Script fonts

Script fonts are those that mimic handwriting, though they can range from casual to formal. A formal cursive script will typically have more flourishes and curls, making for an elegant, but less legible experience. Their casual counterparts are typically more subdued, approachable, and easier to read.

Display fonts 

Decorative or display fonts are unique and attention-grabbing. Their aesthetic range is wide, but they are characterized by their visual interest and originality. These typefaces are most typically used as primary text elements, as they are less legible as body text. With this in mind, display fonts should be used with restraint and intention.

Within these general categories there’s much visual variation to be explored and of course, aesthetic qualities and styles can exist between categories. For example, you can achieve a crisp, classic look with either serif or sans serif fonts. We naturally carry the associations of our experiences and cultures. Historical context also informs these things, especially given that certain typefaces were designed for specific application and use. Knowing your audience and how they will read your design choices is paramount in navigating this subjective reality.

Consulting the Principles of Design

Paying attention to the principles of design [link out] will also aid you in pairing fonts in ways that make for more successful design choices.

First consider emphasis and hierarchy. In most cases, you’ll want your header or primary text element to be the more eye-catching of the fonts you’re pairing. In other words, you will want the eye to go there first, as it will have the most pertinent or top-level information. Placing greater emphasis on your header font will bring eyes to it more immediately. One can do that through choosing a more distinctive font, giving it more weight, making it bold or italic. The font of your secondary text will in almost all cases be relatively more subdued, as it will contain less important information, more context, or details. It is also crucial that this font centers legibility.

Design assets that illustrate how design principles factor into pairing fonts could utilize these points in more visually compelling ways. Both fonts are sans serif, but Gravesend Sans Bold as a header is distinguished and emphasized by its weight and the case, which is all-capitals. The emphasis on the title section of the font pairing also illustrates hierarchy, by drawing your eye to the top level information.

Balance, proportion, and contrast will be important to look at when putting the fonts together. Balance and proportion are especially intertwined in this case given that font pairings do not have the same nuance that a full design does. Proportion will be a meaningful aspect of creating balance.

Look for balance. Do the fonts have an equilibrium to them? Is the greater weight of one reflected in a greater lightness in the other? Case can be a useful point of shifting the balance here. Having an all upper case font or an all lower case font can make for meaningful asymmetry.

Use proportion to your advantage. Is the secondary text scaled in proportion to the primary? Does the size and weight differential make sense? You may even consider the height and width of the characters.

In this example, the weight of the title section with its thick characters is balanced by a relatively light body text. That Aviano Future Heavy is also all uppercase underscores the asymmetrical balance further. Balance is created in part through choices that are made in terms of scale and proportion.

In terms of similarity, looking to fonts of the same family can provide for continuity. Also, ensuring that the characters are the same between paired fonts — as in the case of “a” or “g” — allows for a more intentional looking design. A design with a single-story and double-story character “g,” for example, might appear sloppy.

In this example, the relatively informal script header is meaningfully contrasted with the sans serif body text, distinguishing the title and body text. It also employs similarity by having the same single-story “g” character, maintaining a continuity that so the contrast doesn’t get messy.

On the other hand is the role of contrast. Are the typefaces meaningfully contrasted? Are the fonts distinctive enough to tell them apart? Size, weight, color, spacing, and style can all be a factor here. When considering the spectrum of contrast, it’s important to not go too far to one side, where one extreme is dull and muddled sameness and the other is high contrast to the point of no cohesion.

And finally, always look to unity to evaluate how well the fonts work together. Even if there is a significant contrast, they should complement each other and contribute to a cohesive whole. Once this step is complete, your font pairing has likely reached a harmonious place that is ready to seen!


Instruction by

Adobe Express

December 6, 2023

Try these tutorials with Adobe Express

Create web pages, social media graphics, and videos.