Step	Pixels	rem	Sample
4xl	48.83	3.052	Aa Gg
3xl	39.06	2.441	Aa Gg
2xl	31.25	1.953	Aa Gg
xl	25	1.563	Aa Gg
lg	20	1.25	Aa Gg
base	16	1	Aa Gg
sm	12.8	0.8	Aa Gg
xs	10.24	0.64	Aa Gg

Font Pairing Tool

Browse 68 Google Font pairs for headings and body text, filtered by mood or type of site. Preview a pair on a sample page with your own business name and headline, tune the type scale, try dark mode, then copy CSS, an HTML link tag or a Tailwind config. Every font is free under an open licence.

Code you can copy for a chosen pair
Output	Use it when
HTML link tag	You can edit the page head (loads fastest)
CSS @import	You can only add a stylesheet
Tailwind v3 config	Your project uses tailwind.config.js
Tailwind v4 @theme	Your project uses Tailwind v4 CSS config

Updated October 12, 2026

Can I test two Google Fonts that are not in the list?

You can. Type any heading and body font names from Google Fonts and the tool loads each one separately to check it exists, then previews and exports the pair. If a name is misspelled it tells you which one Google could not find. If a font has no bold weight, the heading is shown and exported in its regular weight instead.

What does the share link remember?

The chosen pairing, the base text size, the scale ratio and whether the dark preview is on. They are stored in the part of the address after #, so opening the link shows the same setup. The share button is offered for pairings from the list; for a pair you typed in yourself, copy the exported code instead.

Browse 68 hand-picked Google Font pairings for headings and body text, each with a one-line reason it works. Filter by mood and by the kind of site you are making, see the pair on a realistic page with your own words, tune the type scale, switch to dark mode, and copy ready-to-paste CSS or Tailwind config. Every font is free under an open licence.

All 68 font pairings

Playfair Display + Source Sans 3 (editorial, luxury): High-contrast serif headlines bring the drama while a plain humanist sans keeps long paragraphs calm.
DM Serif Display + DM Sans (editorial, modern): Made as companions, so their proportions already line up; the serif adds warmth to a tidy sans.
Fraunces + Inter (editorial, friendly): Fraunces has soft, slightly wobbly serifs full of personality; Inter is neutral enough not to compete.
Instrument Serif + Inter (editorial, luxury): A narrow, light display serif that looks elegant only at large sizes, so Inter handles everything small.
Inter + Newsreader (editorial): Sans headlines over a serif body is the classic long-read setup; Newsreader's sturdy serifs stay comfortable for many paragraphs.
Libre Franklin + Libre Baskerville (editorial): A bold gothic headline over a book-style serif: the clear difference in shape makes the hierarchy obvious.
EB Garamond + Inter (editorial, luxury): Garamond headings feel bookish and trusted; it is too delicate for small interface text, which Inter covers.
Karla + Spectral (editorial): Karla's slightly quirky grotesque adds character to headlines above Spectral, a light serif drawn for screen reading.
Work Sans + Crimson Pro (editorial): Wide, plain sans headings over a Garamond-style text serif that reads well at a generous body size.
Schibsted Grotesk + Source Serif 4 (editorial, modern): A heavy, compact grotesque for headlines over a crisp text serif gives a modern newspaper feel.
Alegreya + Alegreya Sans (editorial, friendly): A calligraphic serif and its own sans partner: lively headings, and the same flavour carries into the text.
Epilogue + Literata (editorial, modern): Sturdy grotesque headings sit over Literata, a serif designed for long reading on screens.
Montserrat + Merriweather (editorial, modern): Geometric sans headlines with a large x-height serif body that stays readable even at smaller sizes.
Abril Fatface + Lato (editorial, playful): A fat display serif that looks like a magazine cover line; Lato's quiet, rounded sans keeps the rest calm.
Zilla Slab + Source Sans 3 (editorial, technical): A contemporary slab serif feels crafted and confident in headings; Source Sans is a clear, unfussy reader.
Bodoni Moda + Jost (luxury, editorial): Bodoni's hairline contrast reads as fashion; Jost's geometric shapes echo its round bowls without copying its contrast.
Cormorant Garamond + Proza Libre (luxury): Cormorant is a display Garamond with long, elegant serifs; Proza Libre is sturdier, so 16px body text stays readable.
Cinzel + Lato (luxury): Roman inscription capitals make short headings feel ceremonial. Cinzel has no lowercase, so keep it to a few words.
Marcellus + Mulish (luxury): Marcellus has flared, carved-looking strokes that feel upmarket without hairlines; Mulish stays out of the way.
Prata + Lato (luxury, editorial): A high-contrast serif with chunky serifs that holds up better at mid sizes than most fashion faces; Lato softens it.
Gloock + Figtree (luxury, editorial): A heavy, high-contrast serif with lots of presence, balanced by Figtree's clean geometric forms.
Italiana + Lora (luxury): Thin, fashion-label letters for headings, with Lora carrying enough weight for comfortable body copy.
Playfair Display + Lato (luxury, editorial): Heavy Playfair gives poster impact; Lato's rounded details keep the page warm rather than stiff.
Josefin Sans + Cardo (luxury, editorial): Josefin's vintage geometric capitals feel 1920s, and Cardo's classical serif suits that period mood.
Libre Baskerville + Montserrat (luxury, editorial): A transitional serif reads established and trustworthy; Montserrat brings a modern, clean body.
Inter Tight + Inter (modern, technical): The same design with tighter spacing for big text, so headlines stay compact and the page looks consistent.
Space Grotesk + Inter (modern, technical): Space Grotesk's quirky letter endings give headlines character, while Inter keeps body text neutral.
Manrope (modern): One family where weight does the work: 800 for headings, 400 for text. Very hard to get wrong.
Plus Jakarta Sans (modern): A slightly geometric single family; the heavy cut looks confident without needing a second typeface.
Sora + Inter (modern, technical): Sora's wide, geometric letters stand out in headings; Inter's narrower forms fit more words per line in text.
Outfit + Source Serif 4 (modern, editorial): A clean geometric sans for headings over a sturdy serif made for reading long pages.
Bricolage Grotesque + Inter (modern, playful): Bricolage has ink-trap details that show at large sizes and give headlines texture; Inter keeps paragraphs quiet.
Syne + Inter (modern, playful): Syne's stretched, expressive shapes are pure display. Use it big and sparingly and let Inter do the reading.
Poppins + Inter (modern, friendly): Round, geometric headings with a neutral workhorse body: a safe, friendly product look.
Raleway + Lato (modern): Raleway's elegant, airy headings pair with Lato, which is warmer and easier to read at small sizes.
Red Hat Display + Red Hat Text (modern, technical): Display and text versions of one design: tighter shapes for headings, more open ones for small sizes.
Figtree (modern, friendly): One clean geometric family with friendly curves; extra-bold headings give enough contrast on their own.
Hanken Grotesk + Literata (modern, editorial): A crisp, modern grotesque in headings over a book serif makes a calm, readable article page.
Bebas Neue + Roboto (modern, playful): Tall, condensed capitals fit big words into little width for sport and events; Roboto stays neutral below.
Oswald + Open Sans (modern): Condensed, assertive headings for gyms and trades, with Open Sans as an easy-reading body.
Anton + Barlow (modern, playful): Anton's heavy condensed letters are made for loud headlines; Barlow's slightly rounded grotesque is calm underneath.
Archivo Black + Archivo (modern, technical): The black cut and the text family share the same structure, so heavy headlines never feel out of place.
Geist + Geist Mono (technical, modern): Sans and mono from one family share proportions, so code snippets sit naturally inside running text.
IBM Plex Sans + IBM Plex Serif (technical, editorial): Plex was built as a system: the sans and serif share a skeleton, so mixing them looks deliberate.
IBM Plex Mono + IBM Plex Sans (technical): Monospaced headings feel like a terminal; Plex Sans shares their proportions, so the switch is smooth.
JetBrains Mono + Inter (technical): A coding font used for headings signals a product made for developers, while Inter keeps documentation readable.
Space Mono + Work Sans (technical, playful): A retro geometric mono with lots of personality, balanced by a plain, wide sans.
Chivo + Chivo Mono (technical): Heavy grotesque headings plus a matching mono for code, numbers and labels.
Roboto Slab + Roboto (technical, friendly): Slab serifs on Roboto's skeleton make headings sturdier while body text stays familiar.
Barlow Condensed + Barlow (technical, modern): Condensed and regular widths of one family: headlines fit tight spaces and the text keeps the same look.
Bitter + Hanken Grotesk (technical, friendly): Bitter's slab serifs were drawn for screens and look solid in headings; Hanken Grotesk is clean underneath.
Atkinson Hyperlegible (technical, friendly): Designed to keep look-alike letters distinct for low-vision readers. A strong pick when legibility comes first.
Nunito + Nunito Sans (friendly): Rounded Nunito headings over its non-rounded sibling: soft personality, crisp body text.
Quicksand + Mulish (friendly): Quicksand is light and round for gentle headings; Mulish has a bit more weight, so text stays readable.
Rubik + Karla (friendly): Rubik's softly rounded corners feel approachable, and Karla adds a little character in the text.
Lora + Roboto (friendly, editorial): Lora's brushed-curve serif reads warm and personal, while Roboto keeps body text familiar.
Young Serif + Figtree (friendly, editorial): Young Serif has a warm, old-print look with chunky serifs; Figtree is friendly and clean underneath.
Arvo + Lato (friendly): Arvo's geometric slab looks solid and approachable, like a shop sign, and Lato is warm in body copy.
Lexend (friendly, technical): Lexend was designed with wide spacing to help reading; one family keeps a learning site calm and consistent.
DM Sans + Newsreader (friendly, editorial): A low-contrast, friendly sans for headings with a serif body that adds some editorial warmth.
Fredoka + Nunito (playful, friendly): Fredoka's chunky rounded forms feel like toys and stickers; Nunito is rounded too, so the mood carries through.
Baloo 2 + Open Sans (playful, friendly): Bubbly, heavy headings for kids' brands and treats, with Open Sans as a plain reader underneath.
Bungee + Rubik (playful): Bungee is built like street signage and has capitals only; Rubik's rounded corners echo its blocky friendliness.
Righteous + Poppins (playful): Righteous has a retro, art-deco arcade look, and Poppins shares its round geometric shapes.
Lilita One + Nunito (playful): A heavy, rounded display face that feels cheerful at any size, paired with soft Nunito body text.
Pacifico + Quicksand (playful): A surf-style script for a logo-like headline; Quicksand is light and round, so it never fights it. Keep Pacifico to a few words.
Caveat + Karla (playful, friendly): Handwriting for short headings adds a personal touch; Karla stays clean for real reading.
Unbounded + Manrope (playful, modern): Unbounded's extra-wide letters turn short headlines into posters; Manrope keeps body text compact.

How it works

Filter the list by mood (editorial, modern, friendly, luxury, technical, playful) or by use case, or search for a font you already like.
Pick a pairing to see it on the sample page. Type your own business name, headline, text and button label so you judge the fonts on your real words.
Set the base text size and the scale ratio. The headings, subheadings and small print all resize together, and the scale table lists every size in pixels and rem.
Switch the preview to dark mode to check that thin strokes still hold up on a dark background.
Copy the code you need: CSS with an @import, an HTML link tag (faster), a Tailwind v3 config or a Tailwind v4 @theme block. The address bar keeps your choice so you can share it.
Want a font that is not in the list? Type any two Google Font names into Try your own pair.

What makes a font pairing work

Good pairs share a mood and differ in structure. A high-contrast serif like Playfair Display and a plain sans like Source Sans 3 are clearly different shapes, so readers can tell headings from text at a glance, yet both feel calm and considered. A pair that differs in mood, for example a playful rounded heading over a formal book serif, sends mixed signals even when each font is good on its own.

The safest pairings use two weights of one family (Manrope, Figtree, Plus Jakarta Sans) or a family built as a system, such as IBM Plex Sans with IBM Plex Serif, or DM Serif Display with DM Sans. The proportions already match, so all you choose is the contrast in weight or style. Mixing families gives you more character but needs more care: compare the x-height (the height of lowercase letters) and how wide the letters are, and avoid two fonts that are almost but not quite the same.

Choosing by mood and by site

Editorial pairs suit blogs, magazines and anyone selling expertise; they lean on serifs and generous text sizes. Modern pairs are mostly clean sans serifs for product, agency and startup sites. Friendly pairs use rounded or soft shapes for local services, wellness and community sites. Luxury pairs rely on high-contrast or classical serifs and plenty of space. Technical pairs bring in monospaced or grotesque fonts for developer tools and documentation. Playful pairs use chunky, rounded or handwritten display faces for kids, food and events.

Moods overlap, so many pairings carry two tags. Use the use-case filter to narrow the list to fonts that suit your kind of site, then judge the last few on your own headline. Fonts that look great with sample text can feel wrong with your real business name, especially very wide or condensed display faces.

Using the code on your site

The CSS export defines --font-heading and --font-body plus a set of size variables from --text-xs to --text-4xl, then applies them to body text and to h1, h2 and h3. Change the ratio here and copy again rather than editing the numbers by hand, so the sizes stay in proportion. Each family is requested only in the weights the tool uses, which keeps the download small; add weights to the URL if your design needs more.

For Tailwind CSS v3, paste the fontFamily and fontSize blocks into theme.extend in tailwind.config.js and load the fonts with the link tags from the HTML export. You can then write font-heading text-4xl on headings and font-body on the body. Tailwind v4 reads theme values from CSS: put the @theme block in your main stylesheet and the same classes appear. If you are building with We.Inc, you can send the pairing into the builder from the button under the tool and ask for it in plain words.

Tips

Two typefaces is enough for almost every site. If you want more variety, use more weights of the same two.
Contrast one thing at a time: a serif heading with a sans body, or a heavy heading with a light body. Two fonts that are similar but not the same usually look like a mistake.
Choose the body font first. Visitors read far more body text than headlines, so it has to be comfortable at 16 to 18 pixels.
Keep body line height around 1.5 to 1.7 and lines roughly 60 to 75 characters wide.
Load only the weights you use. Each extra weight is another file to download before text looks right.
Display faces such as Bebas Neue, Cinzel, Pacifico or Abril Fatface are for a few large words. Never set paragraphs in them.

Frequently asked questions

Are these fonts free for commercial use?

Yes. Every font here comes from Google Fonts, which only publishes fonts under open licences (mostly the SIL Open Font License, a few under Apache or Ubuntu licences). You can use them on client and commercial sites. If you plan to resell the font files themselves, read the licence for that font first.

How were these pairings chosen?

By hand, for contrast and mood. Each pair either contrasts in structure (serif with sans, condensed with wide, mono with proportional) or uses two weights of one family. Each card says in one line why the two fonts work together. They are starting points, not rules: always check a pair with your own words in the preview.

What is a type scale and which ratio should I pick?

A type scale multiplies a base size by a fixed ratio to get each larger size, so headings relate to each other in a consistent way. With a 16px base and a 1.25 ratio you get 20, 25, 31.25, 39.06 and 48.83 pixels. Smaller ratios (1.125 to 1.2) suit dense apps and dashboards; larger ones (1.333 and up) suit marketing pages with big headlines.

Should I use @import or a link tag?

A link tag in the head of the page is usually faster, because the browser sees it straight away and can start fetching the fonts. An @import inside a CSS file is only found after that CSS file has downloaded. Use @import when you can only edit a stylesheet.

Does this tool send my text anywhere?

Your words stay in your browser. To show the fonts, the page asks Google Fonts for the font files, as any site using Google Fonts does, so Google sees that request and your IP address. If that matters for your own site, you can download the fonts and host them yourself.

How do I self-host Google Fonts?

Download the font from its Google Fonts page or use a tool such as the open-source google-webfonts-helper, put the WOFF2 files on your own server, and write @font-face rules that point to them. Keep the same family names and the CSS from this tool still works.

Why does a preview look different for a moment?

Fonts load only when a pairing scrolls into view or is selected, to keep the page fast. Until the files arrive, the text shows in a fallback font from the same category. The exported code uses font-display: swap, which does the same on your site.

Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.