Make it boldA serif heading over a clean sans body reads as confident and calm.
Contrast one thing
Pair a serif with a sans, or a heavy face with a light one. Change one quality, not five, so the pair still feels related.
Free typography tool
Font Pairing Suggester
Find heading and body fonts that work together, see them on the thing you're actually making, then copy the CSS.
Pairs for you
Headings
Body text
Click any text in the preview to change it.
The basics
What is font pairing?
Font pairing is choosing two typefaces that work together: one for headings and one for body text. A good pair looks different enough to create hierarchy, but similar enough in proportion and mood to feel like one design.
Most websites, decks and brands need only two fonts. The heading font carries personality; the body font does the hard work of being easy to read at small sizes for long stretches.
The rules
How do you pair fonts that look good together?
Five rules cover almost every good pairing. Each example below is set in real fonts.
Readable firstBody text is where people spend their time, so it has to be comfortable at 16 to 18 pixels.
Pick the body font first
Choose a body font that's easy to read in long paragraphs, then find a heading font with more character to sit on top.
Similar shapesMontserrat's round letters and Lora's soft curves share a feel, even though one is a sans and one a serif.
Match proportions
Fonts with similar letter widths and x-heights (the height of a lowercase x) sit comfortably together on the same line.
Same familyRoboto Slab and Roboto were designed together, so they match without any effort.
Use a superfamily
Many fonts come in serif and sans versions made to work together, like IBM Plex, Roboto or Source. It's the safest pair there is.
Two is enoughWeights and sizes create all the hierarchy most pages need, without a third font.
Stop at two
A third font usually adds noise. Use bold, size and colour to separate headings, labels and captions instead.
Quick answers
What fonts go well with popular fonts?
Pairings for the fonts people ask about most. For paid fonts like Avenir and Proxima Nova, we've listed a free Google Font with a similar feel.
| If you're using | Pair it with | How it looks |
|---|---|---|
| Montserrat | Lora or Merriweather for body text | Montserrat with Lora body text |
| Poppins | Lora, or Inter for a fully modern look | Poppins with Inter body text |
| Playfair Display | Source Sans 3, Lato or Inter | Playfair with Source Sans body text |
| Merriweather | Open Sans or Lato | Merriweather with Open Sans body text |
| Inter | Fraunces or Lora for headings, or Inter alone | Fraunces with Inter body text |
| Avenir Paid | Free alternative: Nunito Sans. Pair with Lora or Merriweather | Nunito Sans with Merriweather |
| Proxima Nova Paid | Free alternative: Montserrat. Pair with Merriweather or Source Serif 4 | Montserrat with Source Serif body text |
| Caslon | Libre Caslon Text is a free Caslon revival. Pair with Source Sans 3 or Lato | Libre Caslon with Lato body text |
| Times New Roman | Arial or Inter for headings; or switch to Libre Baskerville for a warmer serif | Inter with Libre Baskerville body |
“Similar feel” is a judgement call, not a perfect match. Compare them on your own content before you switch.
By project
Which font pairing is best for websites, blogs and presentations?
Starting points for the most common projects. Pick your project type in the tool above to see every pair ranked for it.
Plan less. Ship more.For product and SaaS sites
Websites and apps
Inter for everything, or Inter with a serif like Fraunces for headings. Clear at every size, on every screen.
The long readComfortable over many paragraphs
Blogs and editorial
Playfair Display with Source Serif 4 or Source Sans 3. A high-contrast heading over a body built for reading.
Q3 RESULTSBold titles, calm notes
Presentations
Montserrat or Poppins for slide titles that read from the back of the room, with Lora or Open Sans for supporting text.
SAVE THIS POSTShort, punchy, scannable
Social posts
A condensed display font like Bebas Neue for the hook, with Inter or Roboto for captions and details.
Using Canva
How do you pair fonts in Canva?
Pick a pair here, then use the same fonts in Canva. Most Google Fonts are in Canva's font list: select a text box, open the font menu and search by name. Set your heading font on titles and your body font on everything else.
- Choose a pair abovePreview it on your format and note the two font names.
- Set the heading font in CanvaSelect your title, open the font menu, search the name and pick a bold weight.
- Set the body font and save itApply the body font to the rest of your text. With Canva's brand kit, you can save both so every design uses them.
FAQ
Font pairing FAQ
Are these font pairs free to use?
Yes. Every pair uses fonts from Google Fonts or Fontshare, which are free for personal and commercial use, including on client work.
Can I use two serif or two sans-serif fonts together?
Yes, if they're clearly different in weight or width. Two very similar sans-serifs side by side look like a mistake; a condensed bold sans over a regular sans looks intentional.
How many fonts should a website use?
Two is plenty for most sites: one for headings and one for body text. Every extra font is another file to load, which slows the page down.
What size should body text be?
16 to 18 pixels for most websites, with a line height of about 1.5. Headings can then step up in clear jumps, for example 24, 32 and 48 pixels.
How do I add the fonts to my website?
Click “Copy <link> tag” and paste it into your page's <head>, or “Copy CSS” for an @import and ready-made rules. In WordPress, Webflow or Squarespace, choose the same fonts in your theme's typography settings.
More free tools
Finish your visual system
See great type in the wild
Browse hand-picked designs from brands with typography worth borrowing from.
Browse the design library