Picking fonts for a web project is one of those tasks that seems easy until you actually try to do it. You browse Google Fonts, find a heading font you like, pair it with a body font, and the result looks... off. The fonts clash. Or they are too similar. Or the heading font that looked great in the Google Fonts preview looks terrible in actual paragraphs.
Good font pairing is part art, part rules. The art is developing an eye for what works together. The rules give you a starting framework so you are not just guessing.
The Font Pairing Tool lets you preview combinations in real time with your own text. Try different pairings, adjust sizes, and see how they look together before committing to a choice.
The Core Rule: Contrast Without Conflict
The fundamental principle of font pairing is creating contrast between your heading and body fonts without making them look like they belong to different websites.
Contrast comes from:
- Style: A serif heading with a sans-serif body (or vice versa)
- Weight: A bold heading with a regular-weight body
- Character: A distinctive heading font with a neutral body font
- Proportion: A condensed heading with a wider body
Conflict comes from:
- Too similar: Two sans-serif fonts with the same proportions look like a mistake, not a choice
- Too different: A decorative script font paired with a geometric sans-serif feels disjointed
- Competing for attention: Both fonts are distinctive and fight for the reader's eye
The safest approach: pair a font with personality (for headings) with a font that is neutral and highly readable (for body text). The heading font sets the tone, the body font stays out of the way.
Use the Typography Tool to compare font metrics like x-height, line height, and letter spacing, which affect how well two fonts sit together on the same page.
10 Proven Google Font Pairings
These combinations are tested and widely used. They work because the fonts complement each other in style, proportion, and tone.
1. Inter + Inter - The mono-font approach. Inter is so versatile that using it for both headings (bold/semibold) and body (regular) works well. Clean, modern, and fast to load (one font family).
2. Playfair Display + Source Sans 3 - Elegant serif headings with a clean, readable sans-serif body. Great for magazines, portfolios, and editorial content.
3. Montserrat + Lora - Geometric sans-serif headings with a classic serif body. Works for blogs, news sites, and professional services.
4. Raleway + Merriweather - Thin, elegant sans-serif headings with a sturdy serif body. Good for design portfolios and creative agencies.
5. Oswald + Open Sans - Condensed, bold headings with a neutral body. Effective for news sites and content-heavy layouts where space is tight.
6. Roboto + Roboto Slab - Same font family, different styles. The visual consistency is built in. Works for tech products and documentation.
7. Poppins + Noto Sans - Geometric, friendly headings with an extremely readable body font. Good for SaaS products and web apps.
8. DM Serif Display + DM Sans - Designed as a pair. The serif version for headings, the sans for body. Cohesive and modern.
9. Space Grotesk + Work Sans - Two geometric fonts with enough contrast in weight and character width. Good for tech and developer-focused sites.
10. Fraunces + Commissioner - A variable serif with personality paired with a clean variable sans. Distinctive without being hard to read.
Preview any of these in the Font Pairing Tool to see how they look with your actual content.
These combinations are tested and widely used.
Performance: Loading Fonts Without Slowing Down Your Site
Every font you add is a network request and a file download. Two font families with 4 weights each means 8 font files. At 20-40 KB per file, that is 160-320 KB of fonts alone.
Performance best practices:
Limit to 2 font families. One for headings, one for body text. More than that is rarely necessary and always costly.
Load only the weights you use. If your headings use Bold (700) and your body uses Regular (400) and Italic (400i), load only those three. Do not load Light, Medium, Semibold, and Extra Bold "just in case."
Use font-display: swap. This tells the browser to show text immediately in a fallback font, then swap in the web font when it loads. Users see content faster, avoiding the flash of invisible text.
`css
@font-face {
font-family: 'Inter';
font-display: swap;
src: url('/fonts/inter-var.woff2') format('woff2');
}
`
Self-host your fonts. Downloading font files from Google's CDN requires an extra DNS lookup and connection. Self-hosting from your own domain eliminates this overhead. Download the WOFF2 files, put them in your public directory, and reference them with @font-face.
Use variable fonts. A single variable font file contains all weights and styles. Instead of loading 4 separate files for Regular, Medium, Semibold, and Bold, you load one file that covers the entire range. Inter, Roboto, and many popular Google Fonts are available as variable fonts.
Use the Font Size Converter to ensure your font sizes are consistent across different units (px, rem, em, pt) when setting up your typography system.
Setting Up a Typography Scale
Good font pairing is only half the equation. The other half is a consistent typography scale: a system of font sizes, line heights, and spacing that creates visual rhythm.
A popular approach is the Major Third scale (ratio 1.25):
`css
/ Base: 16px /
--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 /
`
Each size is 1.25x the previous one. This creates a harmonious progression that feels intentional rather than random.
Line height should decrease as font size increases:
- Body text (16px): line-height 1.5-1.6
- Subheadings (20-25px): line-height 1.3-1.4
- Headings (31-49px): line-height 1.1-1.2
Larger text needs less line spacing because the letters themselves provide enough visual separation. Small text needs more line spacing to prevent lines from merging.
Letter spacing follows a similar pattern: headings may benefit from slight negative tracking (-0.01em to -0.02em) for a tighter, more polished look. Body text should stay at default or slightly positive tracking.
The Typography Tool helps you experiment with these values and see the results instantly.
System Fonts: The Zero-Download Alternative
Before you reach for Google Fonts, consider whether system fonts would work for your project.
`css
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif;
`
This stack uses the default system font on each platform: San Francisco on Apple devices, Segoe UI on Windows, Roboto on Android. The result looks native on every device and loads instantly because the fonts are already installed.
Advantages: - Zero network requests for fonts (faster page load) - Feels native on each platform (familiar to users) - No font loading flash or layout shift - Automatically supports all weights and styles
Disadvantages: - Less brand differentiation (your site looks like the platform) - Inconsistent appearance across platforms (intended by design, but some designers dislike it) - Cannot use a distinctive heading font
System fonts work best for web applications, dashboards, documentation, and tools where functionality matters more than brand personality. For marketing sites, portfolios, and editorial content, custom fonts are worth the performance cost.
GitHub, Stripe's dashboard, and many developer tools use system font stacks. If it is good enough for them, it might be good enough for your project.
FAQ
How many fonts should I use on a website?
Two is the standard: one for headings and one for body text. Three is the maximum before a site starts looking messy. One is perfectly fine if the font has enough weight variation (Inter, Roboto, and other versatile families work well alone).
Are Google Fonts really free?
Yes. Google Fonts are open source, licensed under the SIL Open Font License or Apache License. You can use them in commercial projects, modify them, and self-host them without any cost or attribution requirement.
What is the best body text font for readability?
Inter, Source Sans 3, Noto Sans, and Open Sans consistently rank highest in readability studies for screen text. They have large x-heights, generous spacing, and distinct letterforms. For serif body text, Merriweather and Lora are excellent choices.
Should I use serif or sans-serif for body text?
Sans-serif is the default for most websites because it renders more cleanly on screens, especially at small sizes. Serif body text works well for editorial content, blogs, and sites where a traditional or literary feel is appropriate. The readability difference between good serif and good sans-serif fonts is minimal on modern high-resolution screens.
How do I test font pairings before committing?
Use the Font Pairing Tool to preview combinations with your own text. Test with real content, not "Lorem Ipsum." Check the pairing at multiple sizes (headline, subheading, body, caption) and on both light and dark backgrounds.
### How many fonts should I use on a website.
CSS Layout Tools: Grid, Flexbox, Gradients and Shadows
A practical guide to CSS Grid, Flexbox, gradients, and box shadows. Learn when to use each technique and how to generate CSS code quickly.
Edit Images in Your Browser: Resize, Compress, Convert, and Extract Metadata
Learn how to handle common image editing tasks directly in your browser without installing software - resize, compress, convert formats, and inspect metadata.
CSS Generators for Modern Web Design: Gradients, Flexbox, Grid, and Shadows
Learn how to use CSS generators to quickly create gradients, flexbox layouts, grid systems, and box shadows - with the CSS code ready to copy into your project.