Wuizard

Font pairings for websites

Most interfaces need exactly two faces: one with character for headlines and one that disappears into long stretches of text. These pairings are tuned (weight and letter-spacing included), and every face is free on Google Fonts under the Open Font License.

20 pairings · every face free on Google Fonts · apply to your sheet in one click

Aa
Display
Instrument Serif · 400
Body
Instrument Sans

Every screen, one voice

Headlines carry the character; the body face keeps people reading.

Google Fonts · Open Font License

Instrument Serif × Instrument Sans

High-contrast serif headlines over a calm grotesk body: the magazine look for product sites.

Type pairings
Aa
Display
Newsreader · 600
Body
Hanken Grotesk

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Newsreader × Hanken Grotesk

A serious, current and trustworthy pair: a news-desk serif for headlines with a clear grotesk for reading.

Type pairings
Aa
Display
EB Garamond · 500
Body
Source Serif 4

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

EB Garamond × Source Serif 4

Classic Garamond headlines over a sturdy text serif: bookish, literary and made for long reads.

Type pairings
Aa
Display
Bodoni Moda · 600
Body
DM Sans

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Bodoni Moda × DM Sans

Razor-thin Didone contrast with a soft geometric body for fashion-week luxury.

Type pairings
Aa
Display
Fraunces · 600
Body
Figtree

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Fraunces × Figtree

A soft, wonky old-style serif with a friendly sans, warm and characterful for consumer brands.

Type pairings
Aa
Display
Fredoka · 600
Body
Plus Jakarta Sans

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Fredoka × Plus Jakarta Sans

Rounded, bubbly headlines with a clean modern sans, approachable for kids, games and habits.

Type pairings
Aa
Display
Sora · 600
Body
Inter

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Sora × Inter

A geometric display sans over the most readable UI face: precise SaaS product type.

Type pairings
Aa
Display
Hanken Grotesk · 700
Body
IBM Plex Sans

Every screen, one voice

Headlines carry the character; the body face keeps people reading.

Google Fonts · Open Font License

Hanken Grotesk × IBM Plex Sans

Tight, bold grotesk headlines with a technical body for Swiss-style clarity and grids.

Type pairings
Aa
Display
Bebas Neue · 400
Body
Archivo

Every screen, one voice

Headlines carry the character; the body face keeps people reading.

Google Fonts · Open Font License

Bebas Neue × Archivo

Tall condensed capitals over a sturdy grotesk, with poster and title-card impact.

Type pairings
Aa
Display
Archivo Black · 400
Body
Archivo

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Archivo Black × Archivo

Ultra-heavy headlines with their own family's grotesk for text: blunt and graphic.

Type pairings
Aa
Display
Unbounded · 600
Body
Manrope

Every screen, one voice

Headlines carry the character; the body face keeps people reading.

Google Fonts · Open Font License

Unbounded × Manrope

Extra-wide, rounded display type with a calm modern body, for futuristic launches and tech products.

Type pairings
Aa
Display
Syne · 700
Body
DM Sans

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Syne × DM Sans

Quirky art-school display letters with a neutral body, for creative studios and portfolios.

Type pairings
Aa
Display
JetBrains Mono · 600
Body
IBM Plex Sans

Every screen, one voice

Headlines carry the character; the body face keeps people reading.

Google Fonts · Open Font License

JetBrains Mono × IBM Plex Sans

Monospace headlines over a technical sans, unmistakably made for developers.

Type pairings
Aa
Display
Space Mono · 700
Body
Familjen Grotesk

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Space Mono × Familjen Grotesk

Typewriter-style mono headlines with a lively grotesk for indie, zine and DIY energy.

Type pairings
Aa
Display
Playfair Display · 700
Body
Lora

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Playfair Display × Lora

A high-contrast transitional serif with a gentle text serif: timeless and literary.

Type pairings
Aa
Display
Young Serif · 400
Body
Instrument Sans

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Young Serif × Instrument Sans

A chunky, soft serif with a clean sans, cosy and confident for food, home and lifestyle.

Type pairings
Aa
Display
DM Serif Display · 400
Body
DM Sans

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

DM Serif Display × DM Sans

A dramatic display serif with its sister sans, for polished magazine covers and landing pages.

Type pairings
Aa
Display
Bricolage Grotesque · 700
Body
Figtree

Read once, remember it

One face with personality, one built for long stretches of text.

Google Fonts · Open Font License

Bricolage Grotesque × Figtree

A characterful grotesk with ink traps and a friendly body, for playful SaaS with personality.

Type pairings
Aa
Display
Plus Jakarta Sans · 700
Body
Inter

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Plus Jakarta Sans × Inter

Bold, modern product headlines with a workhorse UI body: clean startup type that never gets in the way.

Type pairings
Aa
Display
Schibsted Grotesk · 800
Body
Newsreader

Small things, considered

Good type sets the pace, the tone and what people read first.

Google Fonts · Open Font License

Schibsted Grotesk × Newsreader

Heavy grotesk headlines over a reading serif, the modern editorial flip for essays and newsletters.

Type pairings

With your agent

From this page to your app in three steps

  1. 1Add the ones you like to your sheet. It holds your colours, type and motion.
  2. 2Connect Claude, Cursor or any MCP client in a click.
  3. 3Ask for the screen. Your agent pulls these exact components with your values filled in.

Are the fonts free to use commercially?

Yes. Every face is on Google Fonts under the SIL Open Font License, which allows commercial use, embedding and self-hosting.

How does my agent use a pairing?

Apply it to your sheet and the display and body variables change; your agent's CLAUDE.md lists which faces to load, and every component already reads them.

More of the library

Guides and articles

Stop shipping apps that look AI-made.

Save what you love to a sheet, connect Claude or Cursor, and every screen comes out in your style. Free for 3 days on annual plans, card needed.