DESIGN/TYPE
Font Pair Generator
Preview curated Google Font heading + body pairings for websites and apps, randomize combos, and copy ready-to-use CSS.
1 / 12 · Editorial
Playfair Display
Source Sans 3 · The quick brown fox jumps over the lazy dog. Typography sets the tone before a single word is read.
Headings: Playfair Display · Body: Source Sans 3
Import + apply
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+3:wght@400;700&display=swap');
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; }
body { font-family: 'Source Sans 3', sans-serif; }All pairs (click to preview, 🔒 to lock out of randomizer)
Playfair Display
Source Sans 3 · Editorial
Space Grotesk
Inter · Modern SaaS
DM Serif Display
DM Sans · Elegant
Archivo Black
Roboto · Bold
Bebas Neue
Montserrat · Poster
Lora
Nunito · Friendly editorial
Fraunces
Manrope · Warm serif
Syne
Inter · Techy
IBM Plex Serif
IBM Plex Sans · Corporate
Cormorant Garamond
Proza Libre · Classic
Rubik
Karla · Playful
Outfit
Figtree · Clean UI
Related tools
All →DESIGN/COLOR
Color Picker
HEX/RGB/HSL picker with contrast ratio tool.
DESIGN/PALETTE
Color Scheme Maker
Build and preview palettes: analogous, complementary, triadic, mono, shades.
IMAGE/OPTIMIZE
Image Compressor
Client-side JPEG re-encoding to shrink images.
DESIGN/CSS
CSS Gradient Generator
Design linear and radial CSS gradients with live preview and copy-ready code.