← Design inspiration

Google font pairings for websites and apps

12 heading and body combinations we reach for again and again. They're all free on Google Fonts, previewed live, with the CSS ready to copy or a one-click jump into the theme generator.

01 Product

Sans + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Inter · 700
Body
Inter · 400 and 600

One family doing both jobs keeps everything consistent. Inter was drawn for screens, with a tall lowercase that stays readable at small sizes, so size and weight do the work of hierarchy.

Use it for: Dashboards, SaaS apps and docs

Try it in the theme generator

02 Editorial

Serif + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Instrument Serif · 400
Body
Inter · 400 and 600

A condensed display serif at a single regular weight gives headlines elegance without shouting, while Inter keeps paragraphs and UI plain and readable. The contrast between the two is the point.

Use it for: Landing pages, portfolios and AI or design tools

Try it in the theme generator

03 Magazine

Serif + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Playfair Display · 700
Body
DM Sans · 400 and 600

Playfair Display has the thick-and-thin strokes of 18th-century printing and looks glossy at large sizes. DM Sans is low-contrast and geometric, so it calms things down in paragraphs. Keep Playfair at 32px and up.

Use it for: Fashion, lifestyle, hospitality and feature stories

Try it in the theme generator

04 Bookish

Serif + serif

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Newsreader · 500
Body
Source Serif 4 · 400 and 600

Two serifs designed for reading on screens. Newsreader has the voice of a newspaper headline and Source Serif 4 is steady and open for long passages. Two serifs work together when one is clearly the display face.

Use it for: Blogs, newsletters, publishers and long-form writing

Try it in the theme generator

05 Essay

Sans + serif

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
DM Sans · 700
Body
Newsreader · 400 and 600

This flips the usual pairing. A clean geometric sans keeps the headings modern, while Newsreader, a serif drawn for screen text, makes long paragraphs comfortable to read. Many publishing platforms set their articles this way.

Use it for: Blogs, essays, documentation and newsletters

Try it in the theme generator

06 Soft serif

Serif + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Fraunces · 600
Body
Manrope · 400 and 600

Fraunces is an old-style serif with soft, slightly wonky details that give headings warmth. Manrope is open and modern, so it keeps the body clean and leaves the character to the headlines.

Use it for: Food and drink, wellness, independent brands and vintage-leaning sites

Try it in the theme generator

07 Technical

Sans + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Space Grotesk · 700
Body
IBM Plex Sans · 400 and 600

Space Grotesk grew out of a monospace and keeps its quirky, engineered details. IBM Plex Sans shares that mechanical feel but reads better in paragraphs, so the pair feels precise without being cold.

Use it for: Developer tools, hardware, fintech and data products

Try it in the theme generator

08 Terminal

Mono + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
JetBrains Mono · 700
Body
Inter · 400 and 600

A coding font in the headings says "built for developers" straight away. Use it sparingly, for headlines, labels and numbers, and let Inter carry the reading.

Use it for: Developer tools, CLIs, APIs and changelogs

Try it in the theme generator

09 Swiss

Sans + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Instrument Sans · 600
Body
Instrument Sans · 400 and 600

One compact grotesk family gives the clean, gridded look of Swiss design. Hierarchy comes from size, weight and space rather than a second typeface.

Use it for: Studios, agencies, architecture and minimal portfolios

Try it in the theme generator

10 Friendly

Sans + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Outfit · 700
Body
Plus Jakarta Sans · 400 and 600

Outfit's round, geometric shapes feel approachable in headings. Plus Jakarta Sans is a little more open at text sizes, so the pair stays friendly without feeling childish.

Use it for: Consumer apps, education, health and onboarding flows

Try it in the theme generator

11 Playful

Sans + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Bricolage Grotesque · 800
Body
Figtree · 400 and 600

Bricolage Grotesque has ink traps and chunky heavy weights that give headlines real personality. Figtree is simple and friendly underneath, so the page stays easy to read.

Use it for: Creative tools, community products and playful brands

Try it in the theme generator

12 Scribbled

Handwritten + sans

Good design starts with good type

Give the headings some character and let the body text disappear into the reading. Two families, a few weights, and a clear job for each.

Get started No credit card needed
Headings
Caveat · 700
Body
Figtree · 400 and 600

A handwritten face reads like a personal note, so save it for short headings, callouts and annotations rather than whole pages. Figtree keeps everything else clean. It's the pair PageProofer uses.

Use it for: Callouts, sticky notes, annotations and friendly marketing pages

Try it in the theme generator

How the collections pair their fonts

Each inspiration collection comes with a theme preset. These are the free fonts closest to what those sites actually use.

Warm & Editorial

Opinionated, human, written like a magazine

Source Serif 4 + Inter

Precision Dark

Crisp, technical, quietly premium

Inter + Inter

Playful & Bold

Loud colour, chunky shapes, joy on purpose

Outfit + Figtree

Calm & Minimal

Quiet, spacious, every pixel considered

Newsreader + Inter

Old School & Vintage

Honest craft with a little wear

Fraunces + DM Sans

Fun & Funky

Weird on purpose, impossible to forget

Bricolage Grotesque + Space Grotesk

Rules of thumb for pairing fonts

  1. 1.

    Contrast, not conflict

    Pair fonts that are clearly different, like a serif with a sans or a heavy display face with a plain text face. Two fonts that are almost the same look like a mistake.

  2. 2.

    Two families is plenty

    One for headings and one for body text covers almost every site. Add a monospace only if you show code or data.

  3. 3.

    The body font does the work

    Most of your page is body text, so pick a face that reads well at 16–18px first. Then choose a heading font with more personality to go with it.

  4. 4.

    Load only what you use

    Each weight is another download. A heading weight plus 400 and 600 for the body is usually enough, and it keeps the page fast.

  5. 5.

    Check it at real sizes

    A pairing that looks great in a 64px headline can fall apart in a 14px button. Try it on a real screen before you commit.

Hand a pair to your agent

Read https://pageproofer.com/inspiration/font-pairings/ and set up typography with the [pair name] pair: load both fonts from Google Fonts with only the weights listed, set them as --font-heading and --font-body, use the heading font for h1–h4 at the listed weight and the body font everywhere else.

Font pairing questions

What is font pairing?

Font pairing is choosing two typefaces that work well together, usually one for headings and one for body text. A good pair has enough contrast that each has a clear job, while sharing enough in proportion and tone that the page still feels like one design.

How many fonts should a website use?

Two is the sweet spot: a heading font and a body font. Many great sites use a single family and create hierarchy with size and weight. Add a third, usually a monospace, only when you show code, data or labels that need it.

Are these fonts free for commercial use?

Yes. Every font on this page is on Google Fonts under the SIL Open Font License, so you can use them on commercial websites and apps for free, and self-host them if you prefer.

Do serif and sans-serif fonts go together?

They make one of the most reliable pairings. A serif heading with a sans-serif body (or the other way round) gives instant contrast. Look for similar x-heights and a matching mood, such as a warm serif with a soft, rounded sans.

How do I use a font pair with Tailwind or shadcn/ui?

Open the pair in the theme generator and export Tailwind v4 or shadcn/ui. The export sets the heading and body fonts as theme variables alongside your colours, radius and spacing. You can also copy the CSS from any pair on this page.