Duet - Font Pairing Tool
Find font pairings that sing together. Preview with your own text, then export as CSS.
Export
How to Pair Fonts
Font pairing is the art of choosing two (or more) typefaces that complement each other. A good pairing creates contrast without conflict - each font has a distinct role while feeling like they belong together. Using a font pairing tool like Duet lets you experiment with combinations quickly, previewing how heading and body fonts interact before committing to a choice.
The Basic Rule: Contrast, Not Conflict
Pair a serif with a sans-serif. Pair something geometric with something organic. The contrast between the fonts is what creates visual interest. Two fonts that look too similar will clash in subtle, uncomfortable ways. A good font pairing tool helps you see this contrast side by side so you can judge the result at a glance.
Serif + Sans-Serif
The classic combination. Use the serif for headings (authority, elegance) and the sans-serif for body text (clean, readable). Or flip it - sans-serif headings with serif body text works beautifully for editorial layouts. This combination works because serif fonts carry visual weight and personality in display sizes, while sans-serif fonts maintain legibility at smaller body sizes.
Match the Mood
A playful rounded font paired with a formal serif sends mixed signals. Make sure both fonts agree on the tone. Are you professional? Friendly? Technical? Creative? Both fonts should answer the same way. Consider the x-height, letter spacing, and overall rhythm of each typeface - fonts that share similar proportions tend to pair well even when they come from different families.
Limit to Two
Two fonts is almost always enough. One for headings, one for body text. If you need a third, consider using a different weight or style of one of your existing fonts instead of introducing something new. Every additional font adds page weight and visual complexity, so restraint pays off in both performance and design cohesion.
Test at Real Sizes
A font that looks great at 48px might fall apart at 14px. Always preview your pairings at the actual sizes you'll use. That's what this font pairing tool is for - adjust the sliders and see how your pairing holds up across heading and body sizes. Pay attention to line height and letter spacing at small sizes, as some typefaces become cramped or difficult to read below certain thresholds.
Typography and Web Performance
When choosing web fonts, consider loading performance. Each font family and weight you add increases page load time. The Google Fonts guide to using web fonts recommends loading only the weights and styles you actually use. Duet's export feature generates optimized import statements that request only the weights needed for your chosen pairing, helping keep your pages fast.
- Use the curated pairings above as starting points - they're proven combinations
- Click any text in the preview to edit it with your own content
- Test both light and dark backgrounds - some pairings work better on dark
- When in doubt, pair fonts from the same designer or type foundry - they often share subtle proportions
- Export your pairing as CSS, HTML imports, Tailwind config, or SCSS variables