Colorful decorative image outlining types and characteristics of typefaces, including bold, sans-serif, wide, script, slab serif, serif, italic, display, and thin.

How to Pair Fonts: A Practical Guide

by Mia Cinelli • 20 min read

752 Shares

Nearly every designer working with type has a strong opinion on the right way to combine letterforms and pair fonts. Like most things in visual communication, the best solutions are both subjectively and objectively formed, pairing what we prefer with what is most appropriate for any given use or context. Therefore, it is important to note: type-pairing ‘rules’, like all design guidelines, exist within specific cultural contexts, and are made to be practiced and challenged—as all advice cannot apply universally to all projects or scenarios.

This being said: in this article, you’ll learn important considerations to take before you begin pairing type, as well as helpful methods and useful tips for choosing and combining fonts!

A Basic Typographic Refresher

If you're reading this article, chances are you already know these terms, but in case you are new to typography, or would like a refresher: A typeface is a collection of letterforms which belong together; a font is the delivery mechanism for them—if Merriweather is a typeface, Merriweather Bold is a font. Some letterforms have serifs (tiny feet, or flanges), while some do not (these are sans serifs), and some emulate cursive as scripts, whose letterforms flow seamlessly into one another. Some typefaces are designed to be used in large amounts of text—for reading, and use at smaller sizes—while decorative display typefaces work better for grabbing attention at larger sizes. Additionally, all letterforms have differing characteristics, like their contrast (the visual relationship between the thickest and thinnest part of the letterform) weight (how thick or thin they are) or width (how condensed or wide they are).

Image of basic type terms with visual examples: typeface, font, serif, sans serif, script, text, display, contrast, weight, width.

© Mia Cinelli. CC BY-NC-ND

Before You Begin: Context and Content

The most important factor in font pairing is context. Before you begin, it’s essential to consider: in what context will this type be used? What are you designing, who will use it, and in what way? Because of differing messages, spaces, media, and interactions, the typography of a dating app will differ from the typography of a hospital website, printed novel, or hotel signage. Therefore, their respective type pairings will differ, also.

Additionally, letterforms convey social meanings through their visual qualities, social affiliations, and placement, which serve as their typographic tone or ‘visual inflection.’ Does something feel professional, campy, academic, or jarring? These connotations and meanings should always be considered first when determining type pairing.

Image of examples of varying styles of typefaces and their respective “visual inflections” including letterforms which feel eccentric, polished, powerful, curious, stylish and polite.

© Mia Cinelli. CC BY-NC-ND

Most visual information is best presented through differing levels of hierarchy, such as headlines (headers), subheaders (subheading), body copy (text), and caption text, which appropriately group information. Type choice (and consequent pairing) should be determined and prioritized by content—how much text is being set, and at what size it will live. Therefore, as a general rule, high-contrast, display, or very delicate typefaces generally do not work well at small sizes, as their legibility and readability can become easily obscured.

 Image of text set in a hierarchical manner from largest to smallest, including headline text, subhead text, body copy and caption text.

© Mia Cinelli. CC BY-NC-ND

Best Methods of Type Pairing

Once you’ve determined the context, content, and intended visual inflection of your typography—let the type-pairing begin! As you consider your options, keep in mind these helpful tips for successful type pairing:

Limit the Number of Typefaces or Fonts You Choose

While there are thousands of great typefaces to choose for any one project, it is generally best practice to limit the number of typefaces or fonts you combine: two to three is usually sufficient. Why is this? Using too many letterform styles can easily become cluttered or visually confusing, disrupting the meaning of what you are trying to effectively communicate.

However—this recommendation will inherently vary from application to application. Even with limited typeface choices, numerous font options within said typefaces can provide enough options for hierarchy and expression by using different sizes, weights, colors and styles for headlines, captions, navigation, etc. Sometimes using a plethora of typefaces and/or fonts is the right choice in the right context. However, choosing 2–3—as necessitated by context of use—is a helpful place to start.

Do: curate your typeface/font choices (based on the context of use) | Don’t: use too many variations or styles in one composition

Image of two typographic examples: one more successful example featuring limited typeface choices, the other with too many different type styles/typeface selections.

© Mia Cinelli. CC BY-NC-ND

Use Contrasting Type

Mixing type? Contrast is key. In her book Thinking with Type, acclaimed typographer, educator, and author Ellen Lupton aptly identifies specific contrast issues in type pairing in the succinct phrase “too close for comfort.” What does this mean? For best typeface pairing, consider having ample difference or contrast between weight, width, style, or size of type. This creates both visual variety and clear typographic distinction. When two styles are paired that are almost the same— but not quite— they begin to clash, like wearing two slightly different plaid patterns at once.

Successful type pairing may be achieved by combining contrasting styles of type, such as thick with thin, ornate with simple, or sans serif with serif.

Image showcasing contrast and balance with successful example type pairs: sans serif and serif, thick and thin, ornate and simple.

© Mia Cinelli. CC BY-NC-ND

Contrast is important to consider regardless of the type’s classification— serif or sans serif, text or display— because in many instances, too much is too much. Multiple display typefaces used together can mix messages, while too many similar letterforms or weights together become a visually homogeneous soup.

Do: choose contrasting typefaces or styles | Don’t: pair letterforms that are too similar

Image showcasing type examples which are visually “too close” (similar) for pairing.

© Mia Cinelli. CC BY-NC-ND

Choosing great typefaces is important, but it is essential that those typefaces pair well together. Even beautifully designed, well-crafted typefaces may feel odd if poorly set, mismatched, or used in the wrong context.

This image compares two examples of set type: the first features contrasting sizes and styles of letterforms, while the other features three examples of tall sans serif typefaces which are a bit too similar to work well together.

© Mia Cinelli. CC BY-NC-ND

Utilize Scale and Balance

Scale and balance play an essential role in type pairing, too. Scale is essential for visual balance, hierarchy, and readability: adjusting the visual weight of headlines vs. body copy helps direct a reader’s eye towards which information they should engage with, first.

Consider: two typefaces which might not work well together at the same point size may pair beautifully at contrasting sizes—or by selecting different fonts with enough contrast, creating a visual balance. Additionally, appropriate hierarchy and visual balance can be achieved by changing the tracking of the letterforms (the space between a group of letters), or the case of the letters—such as all lowercase or all-caps, as appropriate to the respective text.

Do: consider scale, balance, and hierarchy | Don’t: assume all pairings work at all sizes

Text comparing various font pairings within the same typefaces, Includes the text. “Scale and balance: two typefaces; many font-pairing possibilities— some more successful than others!”

© Mia Cinelli. CC BY-NC-ND

Additional Options for Type Pairing

If you find yourself endlessly scrolling through your available typefaces—pause and try one of these options instead!

Match Within a Family

Sometimes the best pairing options can be found within a single font family—a collection of typefaces sharing a single aesthetic through-line, with many font variations. Here, bold text might work well with a text or book weight—or an extended letterform may pair well with narrower proportions. Here, variable typefaces—or typefaces whose visual qualities can be adjusted on a sliding scale—can offer great options for typeface pairing within a family.

Text comparing examples of font-pairing within families at various sizes, including Libra Baskerville and Roboto Slab.

© Mia Cinelli. CC BY-NC-ND

Choose The Work of One Designer or Foundry

In the same ways that paintings, songs, or movies may have a similar look or feel if produced by the same artist, songwriter, or director—so do typefaces! Typefaces created by the same typeface designer or foundry may have similar inherent visual qualities and provide harmonious opportunities for type pairings. Some foundries even provide successful example pairings of typefaces and fonts from their collection!

Text comparing examples of font-pairing within typefaces designed by the same designer or foundry. Includes the work of Ryoichi Tsunekawa, Astigmatic, Huerta Tipográfica, and Nicole Fally.

© Mia Cinelli. CC BY-NC-ND

Seek Examples from History

Searching for inspiration, or hoping to make a historical reference? Look at historical type pairings. Certain faces or type styles have become emblematic of particular decades—what type reminds you of the 1980s or early 2000s?—creating intentional (or unintentional) historical connotations. Additionally, historical references can be a useful way to find “classic” combinations, like pairing bold, tall sans serifs with thinner, academic serifs, or expressive brush scripts with geometric sans serifs.

 Historical type-pairing examples based on Western mid-century combinations, including bold gothics with academic italic serifs, brush scripts with geometric sans serifs, and slab serifs with sans serifs.

© Mia Cinelli. CC BY-NC-ND

Of course, “classic” typographic combinations are subjective, and vary by culture and decade. In Western contexts using Latin text, much of the 19th century was marked by many combinations of decorative fonts—which look quite different from typographic trends we see today.

Historical type-pairing examples based on Western 19th-century combinations, including various decorative thick slab serif typefaces, French Clarendons, and didones.

© Mia Cinelli. CC BY-NC-ND

Last Considerations

Do You Have The Rights to Use It?

Generally speaking, each typeface you use comes with an EULA, or “End-User License Agreement,” outlining how you may use the particular fonts therein. Before you commit to using a particular typeface in your work, ensure you have procured it properly— and have the rights to use it as outlined in its EULA.

Do Type Tests!

The best design solutions are the product of iteration, revision, and reflection—and type pairing is no exception. As you weight your options, set your text—or sample text—in different typefaces first, then compare them side-by-side. These type tests will give you a practical way to gauge which options look and work best for your specific project. When in doubt; try it out!

Six side-by-side comparisons show different type pairings within various typefaces, single families, and two/three typeface combinations.

© Mia Cinelli. CC BY-NC-ND

A Practice Round

Imagine you’ve been asked to design an informational app identifying trees at a local Arboretum. In these examples, text has been set at the same point size across examples for the headline, subheader, and body copy, respectively. Considering context, visual inflection, and the above methods of type pairing: which option below do you think would work best, and why? Scroll down for the author’s choice and reasoning:

Six side-by-side comparisons show different type pairings within various typefaces, single families, and two/three typeface combinations.

© Mia Cinelli. CC BY-NC-ND

In these examples, option A has the most successful type pairing. Why?

  • Context: These paired typefaces need to be easy to read at a small size on a phone or tablet, making Choice B less than ideal, given the very delicate nature of the headline and smallest text.

  • Visual Inflection: The visual inflection of any of these examples could work well, ranging from distinct to literary, creating different approaches to conveying this information. However, their combinations don’t all work successfully.

  • Contrast: Choice B features a very light headline text, moving the attention to the bolder subheader first— disrupting its intended hierarchy. Choice C features bold text at every size—with two typefaces which are a bit too similar to each other—lacking variation and creating a ‘one note’ visual ground. Choice A features a pairing which facilitates clear hierarchy, is easy to read, and has a balanced composition.

Which option did you choose, and why? How might this influence your future type-pairing decisions?

The Take Away

Consider these factors before you start pairing type:

  • Choose type informed by content and context.

  • Match your typeface’s visual inflection to your intended message.

  • Curate/limit the number of letterform styles you use.

  • Use ample contrast between weight, width, style, or size of type.

  • Consider scale and balance for hierarchy and legibility.

  • Try family matching, foundry/designer matching, or find inspiration from historical examples.

  • Ensure you have the rights to use the typefaces you’ve chosen.

  • Iterate and do type tests to compare and contrast options.

Making effective visual decisions is essential for clarity of information and interaction— but should also be fun! As you design, try novel options, engage with new typefaces, and seek feedback from users, clients, and fellow designers. There are many great combinations waiting to be discovered!

References and Where To Learn More

Interested in learning more? Mia Cinelli’s new book Giving Type Meaning: Context and Craft in Typography explores how and what type communicates through social, spatial, and temporal contexts of visual language.

 Mia Cinelli’s new book Giving Type Meaning: Context and Craft in Typography

© Bloomsbury, 2024. Cover design by Louise Dugdale.

Lupton, Ellen. (2024). Thinking with Type: A Critical Guide for Designers, Writers, Editors, and Students (3rd Edition, Revised and Expanded). United States: Chronicle Books LLC.

Hunt, Richard. (2020). Advanced Typography: From Knowledge to Mastery. United Kingdom: Bloomsbury Publishing.

Typefaces

All typefaces showcased in this article’s images are available via Google Fonts. They include:

  • Alegreya and Alegreya Sans by Juan Pablo del Peral and Huerta Tipográfica

  • Alfa Slab One by JM Solé

  • Barlow by Jeremy Tribby

  • Bebas Neue and Sometype Mono Medium by Ryoichi Tsunekawa

  • Besley, Bodoni Moda, and Jost by Owen Earl

  • Big Shoulders Stencil Display by Patric King

  • Cambo and Telex by Huerta Tipográfica

  • Comfortaa by Johan Aakerlund

  • Dela Gothic One by artakana

  • Fira Sans by Carrois Apostrophe

  • Fjalla One by Sorkin Type, Irina Smirnova

  • Grand Hotel, Sacramento, Smokum, Stint Ultra Expanded, and Yellowtail by Astigmatic

  • Gruppo, Monoton, and Trocchi by Vernon Adams

  • Inter by Rasmus Andersson

  • Itim by Cadson Demak

  • Jaro by Agyei Archer, Celine Hurka, and Mirko Velimirović

  • League Gothic by Tyler Finck, Caroline Hadilaksono, and Micah Rich

  • Libre Bodoni by Pablo Impallari and Rodrigo Fuenzalida

  • Libre Franklin and Libre Baskerville by Impallari Type

  • Lora and Prata by Cyreal

  • Merriweather and Plaster by Sorkin Type

  • Old Standard TT by Alexey Kryukov

  • Orbitron by Matt McInerney

  • Pathway Gothic One by Eduardo Tunni

  • Pinyon Script, Rye, Ovo, and Vast Shadow by Nicole Fally

  • REM by Octavio Pardo

  • Roboto, Roboto Mono and Roboto Slab, by Christian Robertson

  • Rubik Bubbles by NaN, Luke Prowse

  • Sofia Sans by Lettersoup, Botio Nikoltchev, and Ani Petrova

  • Teko by Indian Type Foundry

  • Urbanist by Corey Hu

  • Work Sans by Wei Huang

Historical Type References:

  • ​​https://peoplesgdarchive.org/

  • https://fontsinuse.com/

  • https://letterformarchive.org/

  • https://woodtype.org/

Images

Images designed by Mia Cinelli. © Mia Cinelli. CC BY-NC-ND (Attribution-NonCommercial-NoDerivs) This license enables reusers to copy and distribute the material in any medium or format in unadapted form only, for noncommercial purposes only, and only so long as attribution is given to the creator.

Learn More in This Course:

Visual Design: The Ultimate Guide

Course Closed
100 % booked
View Course

What You Should Read Next

  • Read full article
    Use Circular Design To Reverse Harm - Article hero image
    Interaction Design Foundation logo

    Use Circular Design To Reverse Harm

    Nature is circular. Nothing ever goes to waste. The banana peel we discard degrades into nutritious compost for plants. Even the remains of deceased animals and humans disintegrate into the soil. Human engineering and design, on the other hand, are linear processes. And that has put us on a one-way

    Social shares
    425
    Published
    Read Article
  • Read full article
    Recycling is Not Enough. Let's Design for Reuse - Article hero image
    Interaction Design Foundation logo

    Recycling is Not Enough. Let's Design for Reuse

    “We live in the age of technology and luxury, but we also live in the age of waste,” Don Norman explains. In this video, the grandfather of User Experience Design, Don Norman unpacks the world of waste we have collectively generated. He examines aspects of our daily lives that we take for granted an

    Social shares
    458
    Published
    Read Article
  • Read full article
    Tree Testing: A Complete Guide - Article hero image
    Interaction Design Foundation logo

    Tree Testing: A Complete Guide

    Tree Testing reveals where users lose their way in your navigation. It’s a focused approach to evaluate a site's navigational structure. But it’s more useful in certain scenarios—so, you need to understand where you’ll benefit from tree testing the most. Learn about the pros and cons of testing tool

    Social shares
    687
    Published
    Read Article
  • Read full article
    How to Design Ethically: Expert Advice from Guthrie Weinschenk - Article hero image
    Interaction Design Foundation logo

    How to Design Ethically: Expert Advice from Guthrie Weinschenk

    As UX designers, we wield immense power to influence our users’ lives. We have the dual responsibility of catering to the interests of our users, as well as that of our sponsors (employers, clients and other business stakeholders). This can sometimes put designers in uncomfortable situations and rai

    Social shares
    546
    Published
    Read Article
  • Read full article
    Anything Artificial We Can Design Better - Article hero image
    Interaction Design Foundation logo

    Anything Artificial We Can Design Better

    If you look out the window, you’ll realize many things you see are artificial—buildings, cars, parks, electricity posts, water pipes, etc.—and most of those things were designed by humans. Founding father of UX, Don Norman introduces you to artificiality and how designers shape the world.[[video:142

    Social shares
    411
    Published
    Read Article
  • Read full article
    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche - Article hero image
    Interaction Design Foundation logo

    Stop the Generic Portfolio Trap! Design a Stand-Out Portfolio for Your UX/UI Niche

    Your UX/UI portfolio is your ticket to your dream job, brief or client. It’s your opportunity to show off your expertise, creativity, and the tangible impact of your work. No matter your niche, your portfolio should be as innovative and polished as the projects it represents.Think of your portfolio

    Social shares
    291
    Published
    Read Article
  • Read full article
    Enter the World of Social VR - Article hero image
    Interaction Design Foundation logo

    Enter the World of Social VR

    Our metaverse is big—as in massive and expanding, to be more exact—and there’s plenty of room to trailblaze inside of all of that digital space, so if virtual reality (VR) can teleport, catapult, and integrate human users into brand-new worlds of excitement, discovery, and learning (which it can, by

    Social shares
    561
    Published
    Read Article
  • Read full article
    8 Talks by Women to Inspire UX Designers - Article hero image
    Interaction Design Foundation logo

    8 Talks by Women to Inspire UX Designers

    User Experience design, like so many other disciplines, has a lower representation of women as compared to men. Things are changing now, though. Slowly, but surely. From strategy to tactics and from ideas to actionable tips, here is a curated playlist of talks by, and stories of just some of the mos

    Social shares
    658
    Published
    Read Article
  • Read full article
    UX Storyboards: Ultimate Guide - Article hero image
    Interaction Design Foundation logo

    UX Storyboards: Ultimate Guide

    In user experience design, we use techniques like workshops and interviews to understand users. We turn our research into user stories and process flows. We use personas and wireframes to share our ideas with our teams.But it’s important to remember the real people we design for. We need to know wha

    Social shares
    782
    Published
    Read Article
  • Read full article
    Top 6 Tips to Make Your UX Portfolio Stand Out - Article hero image
    Interaction Design Foundation logo

    Top 6 Tips to Make Your UX Portfolio Stand Out

    Whether you’re a UX designer looking for your first UX job or a seasoned designer looking to further your career, your UX portfolio is arguably one of the most important projects you’ll work on. Your portfolio is the first touchpoint you have with the recruiters; it’s your chance to make an impactfu

    Social shares
    708
    Published
    Read Article

Top Articles

Top Topic Definitions

Feel Stuck?
Want Better Job Options?

AI is replacing jobs everywhere, yet design jobs are booming with a projected 45% job growth. With design skills, you can create products and services people love. More love means more impact and greater salary potential.

At IxDF, we help you from your first course to your next job, all in one place.

See How Design Skills Turn Into Job Options
Privacy Settings
By using this site, you accept our Cookie Policy and Terms of Use.
Customize
Accept all

Be the One Who Inspires

People remember who shares great ideas.

Share on:

Academic Credibility — On Autopilot

Don't waste time googling citation formats. Just copy, paste and look legit in seconds.

Feel stuck? Want Freedom?

Get one powerful email each week, like 322,594 others.

Learn to design a life you love.

Next email in: