De-slop my design

// type_foundry

Fonts

How to pair fonts, and 27 free Google Font pairings with personality.

How font pairing works

Contrast

Mix the structure

Put a serif with a sans serif, or a slab or mono with a plain sans. A clear difference in letter shape tells readers which text is the headline. Two fonts that are almost the same look like a mistake.

The autumn collection

Both are elegant and light, like a fashion magazine masthead.

Example: Fashion Didone · Italiana + Jost

Contrast

Vary weight, width and size

A heavy, wide or condensed headline over a regular body creates hierarchy, even inside one family. If both fonts are the same weight, the page goes flat.

Facts, set in a grid

Same family, so the letter shapes and proportions match exactly.

Example: Swiss Precision · Archivo Black + Archivo

Complement

Match the proportions

Look for similar x-height (the height of lowercase letters) and width. Fonts with the same proportions sit comfortably on one line, which is why superfamilies pair so easily.

Small studio, big ideas

Designed as one family, so they share height, width and rhythm.

Example: Studio Siblings · DM Serif Display + DM Sans

Complement

Match the mood and era

Geometric with geometric, warm with warm, 1920s with 1920s. Different shapes are fine; different stories are not.

Cocktails at eight

Both are drawn from circles and straight lines, like 1920s posters.

Example: Art Deco Glam · Poiret One + Josefin Sans

Contrast

One personality, one workhorse

Let one font be expressive and keep it to headings and short labels. The other should be quiet and readable at 16px for paragraphs, forms and buttons.

Milkshakes all day

Both have round, soft curves, so the mood stays warm.

Example: 70s Diner · Shrikhand + DM Sans

Complement

Give every font a job

Decide which font handles headings, body text and small labels, then stick to it. Two families is usually enough; three is the limit.

Field notes, version 2

Both are drawn for clarity at small sizes and long sessions.

Example: Lab Notebook · JetBrains Mono + Source Serif 4

The short version

Contrast where it creates hierarchy. Complement where it creates harmony.

Contrast these
Letter structure: serif, sans, slab, mono
Weight: bold against regular
Width and size: wide or condensed against normal
Personality: one loud, one quiet
Complement these
x-height and proportions
Mood and era
Construction: geometric with geometric, humanist with humanist
Tone: both formal, or both relaxed

Sources & credit

Descriptions are written in our own words. Learn more at:

Font pairings

Quiet Luxury.ttf

Featured pairing · Serif + sans

Made slowly, by hand

Body text set in Karla. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A delicate high-contrast serif against a plain, sturdy sans.
Complement:
Both are light on the page and leave plenty of air around each word.

Cormorant Garamond + Karla

Restrained, elegant, airy · great for Luxury, Japanese

Editorial Drama.ttf

Display serif + text serif

The long read returns

Body text set in Source Serif 4. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Playfair's thick-and-thin strokes shout at headline size; Source Serif stays even and quiet.
Complement:
Both are classic serifs, so the page feels like one well-edited magazine.

Playfair Display + Source Serif 4

Magazine, literary, luxurious · great for Editorial, luxury

Swiss Precision.ttf

One family, two weights

Facts, set in a grid

Body text set in Archivo. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
All the contrast is weight: a black headline over a regular body.
Complement:
Same family, so the letter shapes and proportions match exactly.

Archivo Black + Archivo

Objective, gridded, confident · great for Swiss, corporate

Brutal Mono.ttf

Mono + mono

Plain text, no apologies

Body text set in IBM Plex Mono. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Space Mono is quirky and bold; Plex Mono is calm and engineered.
Complement:
Every letter is the same width in both, so the grid never breaks.

Space Mono + IBM Plex Mono

Raw, technical, honest · great for Brutalism, terminal

Soft Friendly.ttf

Rounded + rounded

Hello, nice to meet you

Body text set in Nunito. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Fredoka is chunky and bouncy; Nunito is lighter and built for paragraphs.
Complement:
Both have rounded ends, so the friendliness carries from heading to body.

Fredoka + Nunito

Rounded, warm, approachable · great for Playful, claymorphism

Retro Arcade.ttf

Pixel + pixel

Insert coin to continue

Body text set in VT323. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Press Start is wide and blocky; VT323 is narrow, so it reads in longer lines.
Complement:
Both come from old screens, so the era feels consistent.

Press Start 2P + VT323

8-bit, nostalgic, game-y · great for Pixel, retro OS

Neon Night.ttf

Novelty display + sans

Open all night

Body text set in Rubik. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Monoton is pure decoration; Rubik is simple enough to carry the actual words.
Complement:
Both are built on round, geometric shapes.

Monoton + Rubik

Synthwave, nightlife, signage · great for Vaporwave, synthwave

Modern Grotesk.ttf

Wide display + sans

Make it strange

Body text set in Manrope. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Syne at heavy weight is wide and odd; Manrope is narrow, neat and neutral.
Complement:
Both are modern sans serifs with open, simple shapes.

Syne + Manrope

Fresh, artsy, contemporary · great for Typographic, agency

Condensed Poster.ttf

Condensed caps + sans

Tonight only

Body text set in Barlow. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Tall, narrow capitals against a normal-width body.
Complement:
Both have the same squared-off, slightly industrial feel.

Bebas Neue + Barlow

Loud, sporty, poster · great for Maximalism, grunge

Art Deco Glam.ttf

Deco display + geometric sans

Cocktails at eight

Body text set in Josefin Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Poiret One is a thin, decorative line; Josefin Sans has enough weight for reading.
Complement:
Both are drawn from circles and straight lines, like 1920s posters.

Poiret One + Josefin Sans

1920s, geometric, gilded · great for Art deco

Hand Made.ttf

Script + handwriting

Notes from the kitchen

Body text set in Kalam. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Caveat is a fast, joined script; Kalam is upright and easier to read in a block.
Complement:
Both look written by a real hand with a felt pen.

Caveat + Kalam

Sketchy, personal, informal · great for Hand-drawn

Newsprint.ttf

Display serif + text serif

Late edition: all the news

Body text set in Libre Baskerville. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Old Standard is sharp and formal; Baskerville is wider and comfortable at small sizes.
Complement:
Both are traditional book serifs from the age of print.

Old Standard TT + Libre Baskerville

Broadsheet, trustworthy, classic · great for Newspaper

Cyber HUD.ttf

Techno display + square sans

System online

Body text set in Rajdhani. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Orbitron is wide and heavy; Rajdhani is narrow and light.
Complement:
Both have squared-off curves, like lettering on a control panel.

Orbitron + Rajdhani

Sci-fi, angular, futuristic · great for Cyberpunk, 3D

Warm Humanist.ttf

Serif + sans

Grown, picked, baked

Body text set in Work Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A soft, chunky serif over a clean sans.
Complement:
Both have generous proportions and a friendly, unfussy tone.

Young Serif + Work Sans

Organic, warm, crafted · great for Organic, earthy

Studio Siblings.ttf

Superfamily

Small studio, big ideas

Body text set in DM Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Serif headline against a sans body.
Complement:
Designed as one family, so they share height, width and rhythm.

DM Serif Display + DM Sans

Warm, modern, made-for-each-other · great for Studios, portfolios

Plex Family.ttf

Superfamily

How the system works

Body text set in IBM Plex Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Serif for headings, sans for reading and interface text.
Complement:
Same skeleton underneath, so they sit perfectly side by side.

IBM Plex Serif + IBM Plex Sans

Engineered, clear, credible · great for Product docs, research

Gallery Label.ttf

Condensed serif + sans

The quiet art of looking

Body text set in Libre Franklin. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A tall, narrow serif against a broad, open sans.
Complement:
Both are crisp and understated, like a museum wall label.

Instrument Serif + Libre Franklin

Curated, cultured, calm · great for Galleries, culture

Quirky Grotesk.ttf

Characterful sans + plain sans

Good things, made weird

Body text set in Figtree. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Bricolage has ink traps and odd quirks; Figtree is smooth and plain.
Complement:
Both are friendly, modern sans serifs with similar letter heights.

Bricolage Grotesque + Figtree

Cheeky, confident, indie · great for Indie products, zines

Old-Style Classic.ttf

Serif + sans

Chapter one: the archive

Body text set in Hanken Grotesk. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A centuries-old book serif against a clean modern sans.
Complement:
Both are moderate and calm, nothing fights for attention.

EB Garamond + Hanken Grotesk

Bookish, timeless, trusted · great for Publishers, law, finance

Warm Editorial.ttf

High-contrast serif + sans

Strong coffee, stronger opinions

Body text set in Source Sans 3. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Gloock is heavy and dramatic; Source Sans is light and very readable.
Complement:
Both have warm, open curves rather than cold, mechanical ones.

Gloock + Source Sans 3

Bold, warm, opinionated · great for Food, culture, newsletters

Slab Workhorse.ttf

Slab serif + sans

Built to last a lifetime

Body text set in Libre Franklin. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Blocky slab serifs on the heading, none on the body.
Complement:
Both are solid and straightforward, with similar widths.

Zilla Slab + Libre Franklin

Sturdy, practical, honest · great for Outdoor, trades, local

Geometric Wide.ttf

Extended display + sans

Next stop: everywhere

Body text set in Manrope. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Unbounded is extra wide; Manrope is compact.
Complement:
Both are geometric, built from circles and clean straight lines.

Unbounded + Manrope

Futuristic, bold, digital · great for Web3, tech launches

Condensed News.ttf

Condensed sans + sans

Results are in

Body text set in Public Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Tall, tight headlines against a wide, comfortable body.
Complement:
Both are plain grotesques without decoration.

Antonio + Public Sans

Urgent, civic, no-nonsense · great for News, civic, sport

Fashion Didone.ttf

Didone + geometric sans

The autumn collection

Body text set in Jost. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
Hairline serifs and sharp contrast against a smooth, even sans.
Complement:
Both are elegant and light, like a fashion magazine masthead.

Italiana + Jost

Fashion, beauty, high-end · great for Fashion, beauty

Humanist Calm.ttf

Reading serif + accessible sans

Answers you can trust

Body text set in Atkinson Hyperlegible. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A serif with soft personality for headings; a sans designed for low vision for body text.
Complement:
Both put readability first, with open shapes and clear letters.

Newsreader + Atkinson Hyperlegible

Clear, caring, accessible · great for Health, education, public services

Lab Notebook.ttf

Mono + serif

Field notes, version 2

Body text set in Source Serif 4. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
A coder's monospace for headings against a bookish serif for reading.
Complement:
Both are drawn for clarity at small sizes and long sessions.

JetBrains Mono + Source Serif 4

Curious, technical, thoughtful · great for Dev blogs, research notes

70s Diner.ttf

Retro display + sans

Milkshakes all day

Body text set in DM Sans. Good type gives a page its voice before anyone reads a word. 0123456789

Contrast:
One loud, heavy italic personality; one quiet workhorse.
Complement:
Both have round, soft curves, so the mood stays warm.

Shrikhand + DM Sans

Groovy, sweet, nostalgic · great for Food, drinks, events

Get the newsletter

Great designs and de-slop tips. What's in it

Great designs, de-slop tips, now and then. Unsubscribe any time.