Font Pairings

What Makes a Pairing Work

A pairing earns its place when the two faces divide the work without arguing. The heading sets the voice, the body sets the pace, and the reader never has to wonder which is which. Three mechanics do most of the heavy lifting.

The first is form contrast. A serif heading over a sans body, like the Playfair Display and Inter pairing, separates display from reading by category, so even a modest size difference reads as a clear hierarchy. The second is x-height. Faces with similar x-heights swap cleanly, which is why the humanist pairs in this library feel calm next to each other. The third is weight. A single family in two weights, DM Sans at 500 for headings and 400 for body, carries hierarchy on weight alone, with zero risk of a mismatch.

None of these are rules you must obey. They are the reasons the combinations in this library were chosen, and they are what the designer notes on each card explain.

The Categories, Decoded

The filter bar groups the library into structural categories. Serif + Sans is the classic editorial shape: a voicey serif on top, a neutral sans below, best for blogs, magazines, and brand sites. Sans + Sans covers the modern UI space, where both faces are grotesques or geometrics and hierarchy leans on weight and scale. Serif + Serif is the literary corner, for long-form publications that want a full serif system, like Playfair Display and Merriweather or Fraunces and Lora.

Display + Sans pairs a condensed or decorative face with a reading sans, which is the Bebas Neue and Open Sans combination: a poster voice for landing pages and sports media. Monospace + Sans is the developer corner, with JetBrains Mono or Space Mono set over Inter, for docs, tools, and tech brands. Handwriting + Sans is the warm corner, Caveat or Satisfy over Open Sans, for personal brands and social content.

Reading a Pairing Card

Each card is a complete preview, not a screenshot. It loads the two real fonts from Google Fonts on demand, renders a heading and body sample in the pairing, and labels it with a contrast score out of 100. That score is a designer's subjective note, useful for sorting rather than for certifying a ratio. For real WCAG numbers, every color combination should go through the WCAG contrast checker.

Below the preview, the card shows mood chips, use cases, and the recommended weights for heading and body. That is the fastest way to judge fit before opening the detail page, where the designer's reasoning and the copy-paste code live.

Using the Filters

Start with the sort menu set to Popular and scan the first page; that order tracks the contrast score, so the loudest, most separated pairings surface first. Then narrow by mood: editorial, elegant, technical, friendly, bold, minimal, or luxury. The use-case menu narrows further, to website, blog, saas, branding, editorial, or app. The search box matches font names, descriptions, and tags, so typing monospace or luxury behaves like a filter of its own.

Filters persist in your browser between visits, and the address bar stays clean. To share a filtered view, the page honors category, mood, use, sort, and q parameters in the URL on load. Clearing a filter is one click on its chip, and Clear all resets everything.

Pick by Use Case

If you are here with a specific project in mind, these clusters are the fastest way in.

• Website and branding. The Plus Jakarta Sans and Inter pairing, Montserrat and Open Sans, and Barlow as a single family all read confident at the top and stay approachable below.
• Blog and long-form. The Lora and Inter pairing, Bitter and Inter, and Playfair Display and Merriweather are serif-led systems built for sustained reading.
• SaaS and apps. The Manrope and Inter pairing, Space Grotesk and Inter, and JetBrains Mono and Inter combine characterful headings with bodies tuned for screens and dense UI.
• Editorial and magazines. The Playfair Display and Source Serif 4 pairing, Spectral and Plus Jakarta Sans, and Archivo and Source Sans 3 carry the newsroom voice without slowing the reader down.
• Luxury and fashion. The Cormorant Garamond and Raleway pairing, Cormorant Garamond and Lato, and Fraunces and Inter lean on high-contrast serifs for a refined, expensive feel.

When a Single Family Is the Better Answer

Three pairings in the library pair a font with itself: DM Sans, Barlow, and Ubuntu. A single family removes the two hardest problems in pairing, mismatched x-heights and clashing voices, and it cuts the font payload in half because the browser loads one family instead of two. It works best for product UI and documentation, where consistency outranks personality. The tradeoff is hierarchy by weight and size alone, which is why these pairings carry lower contrast scores. The score measures separation, not quality.

From Pairing to Production

Open any pairing to get the production details. Each detail page explains why the two faces work together, lists the recommended weights for heading and body, and provides copy-paste snippets: a Google Fonts link, CSS font stacks, and a Tailwind config entry. From there the rest of the toolkit picks up. The typography playground tests the pairing on a full layout with real text. The contrast checker verifies that your text colors clear AA and AAA. The brand kit bundles the pairing with a palette and a type scale into exportable tokens. When you want something new, the font pairing generator builds fresh combinations from the same catalog in one click, and the best Google font pairings article rounds up the strongest combinations with the reasoning behind each one.

Frequently Asked Questions