Last updated
Typography Pairing Tool Examples
The Typography Pairing Tool helps find complementary font combinations for web projects. Below are practical examples of effective font pairings, CSS implementation, and typography best practices.
Classic Serif + Sans-Serif Pairing
/* Heading: Playfair Display (serif) + Body: Source Sans Pro (sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Source+Sans+Pro:wght@400;600&display=swap');
h1, h2, h3 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
}
body, p, li {
font-family: 'Source Sans Pro', system-ui, sans-serif;
font-weight: 400;
line-height: 1.6;
}
Modern Sans-Serif Pairing
/* Heading: Inter (bold) + Body: Inter (regular) — same family, different weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');
h1 { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 2.5rem; }
h2 { font-family: 'Inter', sans-serif; font-weight: 700; font-size: 2rem; }
h3 { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.5rem; }
p { font-family: 'Inter', sans-serif; font-weight: 400; font-size: 1rem; }
Editorial / Magazine Pairing
/* Heading: Merriweather (serif) + Body: Open Sans (sans-serif) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@700;900&family=Open+Sans:wght@400;600&display=swap');
h1, h2 {
font-family: 'Merriweather', serif;
font-weight: 900;
letter-spacing: -0.02em;
line-height: 1.2;
}
p, li, blockquote {
font-family: 'Open Sans', sans-serif;
font-weight: 400;
font-size: 1.0625rem;
line-height: 1.75;
}
Tech / Developer Blog Pairing
/* Heading: Space Grotesk + Body: DM Sans + Code: JetBrains Mono */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@600;700&family=DM+Sans:wght@400;500&family=JetBrains+Mono:wght@400;500&display=swap');
h1, h2, h3 {
font-family: 'Space Grotesk', sans-serif;
font-weight: 700;
}
p, li {
font-family: 'DM Sans', sans-serif;
font-weight: 400;
}
code, pre, kbd {
font-family: 'JetBrains Mono', 'Courier New', monospace;
font-weight: 400;
}
Elegant / Luxury Brand Pairing
/* Heading: Cormorant Garamond + Body: Raleway */
@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;600;700&family=Raleway:wght@300;400;500&display=swap');
h1, h2 {
font-family: 'Cormorant Garamond', serif;
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
}
p {
font-family: 'Raleway', sans-serif;
font-weight: 300;
letter-spacing: 0.02em;
line-height: 1.8;
}
Friendly / Approachable Pairing
/* Heading: Nunito (rounded) + Body: Nunito Sans */
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@700;800&family=Nunito+Sans:wght@400;600&display=swap');
h1, h2, h3 {
font-family: 'Nunito', sans-serif;
font-weight: 800;
}
p, li {
font-family: 'Nunito Sans', sans-serif;
font-weight: 400;
line-height: 1.65;
}
Type Scale (Modular Scale)
/* Modular scale with ratio 1.25 (Major Third) */
:root {
--text-xs: 0.64rem; /* 10.24px */
--text-sm: 0.8rem; /* 12.8px */
--text-base: 1rem; /* 16px */
--text-lg: 1.25rem; /* 20px */
--text-xl: 1.563rem; /* 25px */
--text-2xl: 1.953rem; /* 31.25px */
--text-3xl: 2.441rem; /* 39px */
--text-4xl: 3.052rem; /* 48.8px */
}
h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); }
h4 { font-size: var(--text-xl); }
p { font-size: var(--text-base); }
small { font-size: var(--text-sm); }
Variable Font (Performance Optimized)
/* Variable fonts load one file for all weights */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap');
/* Use any weight without additional HTTP requests */
.light { font-weight: 300; }
.regular { font-weight: 400; }
.medium { font-weight: 500; }
.semibold { font-weight: 600; }
.bold { font-weight: 700; }
.extrabold{ font-weight: 800; }
Google Fonts Performance Best Practices
/* 1. Preconnect to Google Fonts CDN */
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
/* 2. Load only the weights you use */
/* Bad (loads all weights): */
@import url('https://fonts.googleapis.com/css2?family=Inter&display=swap');
/* Good (loads only 400 and 700): */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap');
/* 3. Use display=swap to prevent invisible text during load */
/* Already included in the URL above */
/* 4. Self-host fonts for best performance */
/* Use google-webfonts-helper.herokuapp.com to download */
@font-face {
font-family: 'Inter';
src: url('/fonts/inter-400.woff2') format('woff2');
font-weight: 400;
font-display: swap;
}
Popular Font Pairings Reference
- Playfair Display + Source Sans Pro — editorial, classic
- Merriweather + Open Sans — readable, professional
- Lora + Lato — warm, approachable
- Raleway + Raleway (weights) — elegant, minimal
- Montserrat + Merriweather — modern + traditional contrast
- Inter + Inter (weights) — clean, tech-focused
- Space Grotesk + DM Sans — developer/startup aesthetic
- Cormorant Garamond + Raleway — luxury, fashion
- Nunito + Nunito Sans — friendly, rounded
- Roboto Slab + Roboto — Google Material style
Typography Pairing Principles
- Contrast: pair a serif heading with a sans-serif body (or vice versa)
- Harmony: use fonts from the same family with different weights
- Limit to 2-3 fonts maximum per design
- Ensure sufficient size contrast between heading and body (at least 1.5×)
- Test readability at small sizes — body text should be comfortable at 16px
- Check that fonts support all required characters (especially for non-English)
Browse the font library in the Typography Pairing Tool, preview combinations with your actual content, and copy the generated CSS import and font-family declarations.