Type Pairing Guide
Practical strategies for combining typefaces—with proven pairings including Inter, Source Serif, Geist, Instrument Serif, and IBM Plex.
Pairing typefaces is one of typography's most visible skills—and one of its most anxiety-inducing. The fear of clashing fonts leads many designers to play it safe with a single typeface, missing the richness that well-chosen pairs provide. A successful pairing creates contrast without conflict, guiding readers through hierarchy while maintaining visual cohesion.
Principles of Type Pairing
Before examining specific combinations, understand the principles that make pairings work.
Contrast, Not Conflict
Effective pairs differ in at least one significant dimension—classification, weight, structure, or era—while sharing at least one point of harmony. Two similar sans-serifs compete for attention; a serif heading with a sans-serif body complement each other because their differences are intentional and functional.
Role Assignment
Every typeface in a pair needs a defined role: headings, body, captions, code, or display. Roles prevent visual competition. A typeface used for both headings and body must be exceptionally versatile; most pairs work best with clear role separation.
Shared DNA
The strongest pairs share hidden connections: similar x-height, compatible proportions, overlapping designers, or complementary historical origins. Superficial similarity (both are "clean") is insufficient; structural harmony matters more.
Limit Your Palette
Two typefaces cover most projects. Three is the practical maximum for complex systems. Each addition increases cognitive load and maintenance cost. Start with one pair and add a third only when a specific role demands it (typically monospace for code).
Inter + Source Serif Pro
This pairing has become a modern classic for web publishing and product design. Inter, designed by Rasmus Andersson, is a neo-grotesque sans-serif optimized for screen readability at small sizes. Source Serif Pro, designed by Frank Goudy and adapted by Adobe, is a transitional serif with sturdy serifs and open counters.
Why it works:
- Complementary classification — Sans for UI and navigation; serif for long-form reading
- Matched x-heights — Both typefaces have generous x-heights, so size transitions feel natural
- Shared designer lineage — Both were developed for Adobe's open-source ecosystem with screen performance in mind
- Open source and free — No licensing friction for web and product use
Best for: Documentation sites, blogs, SaaS products with editorial content, design systems.
Building better products
Great typography doesn't announce itself—it creates an environment where content feels effortless to read and navigate. The pairing of a neutral sans-serif with a warm serif achieves exactly this balance.
Implementation Notes
Use Inter at 400–600 weight for UI elements, navigation, and short-form text. Reserve Source Serif Pro at 400 weight for body copy longer than two paragraphs. For headings, Inter at 600–700 weight provides clean hierarchy without needing the serif.
:root {
--font-sans: "Inter", system-ui, sans-serif;
--font-serif: "Source Serif 4", Georgia, serif;
}
h1, h2, h3 { font-family: var(--font-sans); font-weight: 600; }
.prose p { font-family: var(--font-serif); font-weight: 400; }
.ui-label { font-family: var(--font-sans); font-weight: 500; font-size: 0.875rem; }Geist + Instrument Serif
Geist, developed by Vercel, is a neo-grotesque sans-serif designed for developer tools and modern web applications. Instrument Serif is a contemporary serif with sharp details and elegant contrast—a display-oriented serif that pairs beautifully with Geist's technical precision.
Why it works:
- Tech meets editorial — Geist signals developer credibility; Instrument Serif adds warmth and sophistication
- Weight contrast — Geist's even strokes against Instrument Serif's high contrast creates clear visual separation
- Contemporary pairing — Both typefaces feel current without being trendy
Best for: Developer platforms, startup marketing sites, portfolio websites, tech publications.
Ship with confidence
Modern tools deserve typography that matches their precision. A geometric sans keeps interfaces crisp while a refined serif elevates marketing pages and long-form content.
Use Geist Sans for all interface elements and short-form content. Deploy Instrument Serif for hero headlines and pull quotes where editorial elegance matters. Avoid Instrument Serif below 18px—its contrast is designed for display sizes.
IBM Plex Pairings
IBM Plex is a comprehensive superfamily designed by Mike Abbink and Bold Monday for IBM. It includes Plex Sans, Plex Serif, Plex Mono, and Plex Condensed—a complete type system with shared design DNA.
Why it works:
- Designed as a system — All Plex variants share proportions, x-heights, and design philosophy
- Engineering heritage — Plex carries IBM's legacy of precision and innovation
- Four-variant coverage — Sans, serif, mono, and condensed cover every typographic role
Best for: Enterprise applications, data-heavy interfaces, documentation, design systems requiring monospace integration.
Recommended Plex Configurations
Plex Sans + Plex Serif: The default pairing for IBM's own properties. Sans handles UI and headings; serif handles long-form content.
Plex Sans + Plex Mono: Ideal for developer tools and data platforms. Sans for prose and navigation; mono for code blocks, data tables, and technical labels.
Plex Sans Condensed + Plex Serif: Condensed sans for space-constrained UI (tables, sidebars); serif for content areas.
Enterprise-grade typography
When your product handles complex data and critical workflows, typography must be as reliable as your infrastructure. A unified superfamily ensures consistency across every touchpoint.
Pairing Strategies Beyond Specific Fonts
These frameworks help you evaluate any potential pairing:
Contrast by Classification
Pair a serif with a sans-serif. This is the most reliable strategy because the classification difference provides instant contrast. Match eras for harmony (both contemporary) or contrast eras deliberately (Modern serif + geometric sans).
Contrast by Weight
Use a single typeface at dramatically different weights. A bold 700 heading with a regular 400 body creates hierarchy without introducing a second typeface. This works best with versatile families like Inter, Source Sans, or IBM Plex Sans.
Contrast by Size and Case
Display size itself creates enough contrast that typefaces can be more similar. A large uppercase sans-serif headline can pair with a smaller serif body because the size differential prevents competition.
Pairing Montserrat headings with Open Sans body—both geometric/humanist sans-serifs with similar weights create monotonous texture.
Pairing a serif heading (Playfair Display) with a sans-serif body (Inter)—classification contrast with shared contemporary feel.
A three-role system: sans for UI, serif for content, mono for code—each from a harmonized superfamily with defined size and weight scales.
Interactive Exploration
Use the pairing explorer below to preview combinations with your own text. Adjust heading and body fonts, compare sizes, and evaluate readability before committing to a pairing in your project.
Final Recommendations
For most web projects, start with one of these proven configurations:
- Inter + Source Serif 4 — Best all-around pairing for content-rich products
- Geist Sans + Instrument Serif — Best for developer-facing and tech brands
- IBM Plex Sans + Plex Serif + Plex Mono — Best for enterprise and data-heavy applications
Define roles, set a type scale, and test across devices. A good pairing feels invisible—readers notice the content, not the fonts.