Typography makes its argument before the reader processes a single word. The font combination you choose signals whether you’re a law firm or a yoga studio, a fintech startup or a family bakery — before the headline is even consciously read. Most websites get this wrong not because they chose bad fonts, but because they chose fonts without a system.
Why Typography Pairing Matters
Font combinations work at a pre-linguistic level. Research from MIT’s Media Lab has shown that typeface personality affects reader perception of the content’s credibility and tone. A medical practice using a casual display font will feel less trustworthy to visitors — not because of what the text says, but because of what the letterforms communicate before the text is processed.
The practical implication: your font pairing is part of your brand positioning. Getting it right means selecting fonts whose personality matches what your business actually delivers — and then making them work together structurally, not just aesthetically.
Font Classification — A Working Reference
Understanding what each classification communicates lets you make deliberate choices.
Serif
Authority, tradition, editorial depth. The serifs (the small strokes at the ends of letterforms) evolved from stone carving and hand lettering — they carry historical weight. Works for: law firms, financial services, editorial publications, premium healthcare, hospitality. Sub-types matter: Old Style serifs (Garamond) feel classical; Transitional serifs (Times New Roman) feel institutional; Modern serifs (Bodoni) feel fashion-editorial.
Sans-Serif
Clean, modern, accessible — but the subcategory dramatically changes the personality:
- Geometric sans (Futura, Montserrat, Poppins): rational, constructed, slightly cold. Good for tech, architecture, luxury goods.
- Humanist sans (Gill Sans, Nunito, Muli): warm, approachable, organic curves. Good for healthcare, education, community-focused brands.
- Grotesque sans (Helvetica, Inter, Arial): neutral, functional, Swiss-influenced. Good for corporate, SaaS, data-heavy interfaces.
Display / Decorative
Maximum personality, minimum versatility. Use only for large headings or short bursts of copy. Never set body text in a display font — it’s unreadable at 16–18px and exhausting at scale.
Monospace
Technical, precise, developer-associated. (Courier, DM Mono, Fira Code.) Appropriate for code blocks, pricing displays, or any context where the “technical precision” association is an asset.
Script / Handwritten
Personal, artisanal, handcrafted. (Great Vibes, Pacifico.) Rarely appropriate for web body text — readability degrades quickly. Acceptable for logo treatments, short pull quotes, or event-specific designs. Overused in the food and wedding industries to the point of cliché.
The Two Rules of Effective Font Pairing
Every successful font pairing follows two rules. Violate either one and the combination fails.
Rule 1 — Contrast in Classification
Never pair two fonts from the same stylistic subcategory. Two geometric sans-serifs, two old-style serifs, two humanist sans — even if they have different names, they’ll compete without differentiating. The heading and body will feel redundant rather than complementary.
Correct: Serif heading + Geometric sans body. The formal weight of the serif gives the heading authority; the clean lines of the sans make the body effortlessly readable. They contrast, so each has a distinct role.
Incorrect: Montserrat (geometric sans) + Poppins (geometric sans). They’re too similar — same proportions, same personality, different names. The pairing looks indecisive.
Rule 2 — Harmony in Personality
Contrast in classification is not enough if the fonts’ personalities conflict. An aggressive, high-contrast modern serif can’t be paired with a loose handwritten script without creating visual noise. The heading says “precise and formal”; the body says “casual and personal” — the visitor’s subconscious registers the contradiction even if they can’t name it.
A working test: describe each font in three words without naming it. Do the two descriptions belong to the same brand? If yes, the personalities are harmonious. If they belong to entirely different businesses, rethink the pairing.
Specific Pairings by Industry
These are working combinations using Google Fonts — all tested in production web contexts.
Professional Services / Legal / Finance
Playfair Display (heading) + Source Sans Pro (body)
Why it works: Playfair Display’s high-contrast strokes and editorial weight signal authority and tradition — exactly what a law firm, accounting practice, or financial advisory needs to convey. Source Sans Pro was designed by Adobe specifically for UI readability and body text — it’s clean, neutral, and doesn’t compete. The serif-to-sans contrast is textbook, and the personality match (serious, established, professional) is exact.
Technology / SaaS
Inter (heading, 700 weight) + Inter (body, 400 weight) OR DM Sans (heading) + DM Mono (body for code/data)
Why it works: Inter was designed by Rasmus Andersson specifically for screen readability at all sizes. Using a single well-designed typeface at different weights is a legitimate strategy — it creates cohesion without monotony. The DM Sans + DM Mono pairing adds a technical signal through the monospace body, appropriate for developer tools, API documentation, or any product where precision is the value proposition.
Health / Wellness
Cormorant Garamond (heading) + Lato (body)
Why it works: Cormorant Garamond brings elegance and calm — its generous, slightly romantic letterforms feel considered rather than clinical. Lato’s rounded terminals give the body text warmth and approachability that a strict grotesque would lack. Together they communicate sophistication without sterility — ideal for premium wellness clinics, integrative medicine practices, or high-end spa brands.
Food / Hospitality
Libre Baskerville (heading) + Nunito (body)
Why it works: Libre Baskerville’s sturdy Baskerville-influenced strokes bring quality and tradition — appropriate for a restaurant or boutique hotel that wants to communicate craft. Nunito’s rounded, friendly letterforms make menus and descriptions feel warm and inviting rather than formal. The combination sits at the intersection of quality and accessibility.
Fashion / Lifestyle
Josefin Sans (heading) + EB Garamond (body)
Why it works: Josefin Sans is geometric and art-deco influenced — its even strokes and sharp geometry feel fashion-forward and restrained. EB Garamond brings editorial depth to the body text, which gives long-form content (lookbooks, brand stories, product descriptions) a magazine-quality feel. The geometric-cool heading + editorial-warm body contrast creates sophisticated tension.
Creative Agency / Portfolio
Space Grotesk (heading) + Fraunces (body or accent)
Why it works: Space Grotesk has a slightly quirky, technical character that feels modern without being anonymous — it signals that the team has a design perspective. Fraunces is a “soft-serif” optical variable font with genuine personality and warmth in its curved strokes. Together they communicate “we are designers with a point of view” more effectively than any generic sans pairing.
Type Scale for the Web
A type scale is a mathematical progression of sizes that keeps your typography visually consistent across a whole site. Without a scale, you end up with arbitrary sizes that create visual noise.
Base: 16px body text. Scale ratio: 1.25 (Major Third) — produces sizes that feel related without being too compressed or too spread.
| Level | Size | Use for |
|---|---|---|
| Body | 16px | Paragraph text, body copy |
| Caption | 12–14px | Captions, labels, fine print |
| H4 | 20px | Small section headings, card titles |
| H3 | 25px | Section subheadings |
| H2 | 31px | Major section headings |
| H1 | 39–49px | Page headlines (hero, landing page) |
Line height:
- Body text: 1.5–1.7. Anything tighter causes line collision for readers; anything looser loses the paragraph as a unit.
- Headings: 1.1–1.3. Large text needs tighter leading — too much space between heading lines makes the heading feel like separate sentences.
Letter spacing:
- Headings: –0.02em to –0.05em. Tighten large type slightly — at display sizes, default letter spacing is too loose and looks airy.
- Body: 0 to +0.01em. Don’t tighten body text — at 16px, default spacing is calibrated for readability.
- All-caps labels or UI elements: +0.05em to +0.08em. Uppercase sequences need wider spacing to maintain legibility.
What to Avoid
Using more than two typefaces. Each additional typeface is a potential inconsistency. Three is a maximum and requires a disciplined system. Four or more is almost always a symptom of indecision, not personality.
Pairing fonts that are too similar. Two geometric sans-serifs, two humanist serifs — they’ll look like a mistake, not a system. If you can’t explain why both fonts are needed, use only the stronger one.
Setting body text below 16px. At 15px, readability starts declining for a portion of your audience. At 14px, it’s exclusionary for older readers and users with visual impairment. 16px is the WCAG-informed minimum.
Using display fonts for body copy. Display fonts are designed for headlines — their features are exaggerated for impact at large sizes and become noise at body sizes. Set “Bebas Neue” at 16px and observe how quickly it becomes unreadable.
Choosing fonts by popularity alone. Roboto and Open Sans appear on roughly 30–40% of the web. They’re competent, but they won’t differentiate your brand. Consider whether that’s acceptable for your client’s positioning.
Quick-Reference Pairing Table
| Industry | Heading Font | Body Font | Personality |
|---|---|---|---|
| Professional Services / Legal | Playfair Display | Source Sans Pro | Authority + clarity |
| Technology / SaaS | Inter (700) | Inter (400) | Precision + readability |
| Tech / Developer Tools | DM Sans | DM Mono | Modern + technical |
| Health / Wellness | Cormorant Garamond | Lato | Elegance + warmth |
| Food / Hospitality | Libre Baskerville | Nunito | Quality + friendliness |
| Fashion / Lifestyle | Josefin Sans | EB Garamond | Geometric cool + editorial |
| Creative Agency | Space Grotesk | Fraunces | Distinctive + characterful |
Need a typography system built for your brand? Free consultation →
References
- Google Fonts — Google Fonts Library and Knowledge
- Smashing Magazine — A Comprehensive Guide to Font Loading Strategies (reference only)
- Typescale — Visual Type Scale Calculator
- Fonts In Use — Typography in Practice, by Industry
- Nielsen Norman Group — Legibility, Readability, and Comprehension: Making Users Read Your Words
Web Typography — Common Questions
Can I use more than two typefaces on a website?
In most cases, no. Two typefaces — one for headings, one for body — is the professional standard. A third can occasionally work as an accent (a monospace for code, or a display font for pull quotes) but it requires a clear system and strong rationale. More than three almost always reads as inconsistency, not personality.
What body text size should I use for readability on web?
16px is the baseline minimum for body text on web. Many well-designed sites use 17–18px for long-form reading comfort. Never go below 16px for body copy — at smaller sizes, readability drops for a significant portion of your audience, including older users and anyone reading in suboptimal lighting conditions.
Are Google Fonts good enough for professional websites?
Yes. Google Fonts hosts professionally designed typefaces including Inter, DM Sans, Playfair Display, and Fraunces — all used on major commercial and agency sites. The limitation is that popular Google Fonts (Roboto, Open Sans, Lato) appear on millions of sites, which can reduce distinctiveness. If brand uniqueness matters, consider a licensed variable font from Fontshare, Klim Type, or similar foundries.
How do I know if two fonts actually pair well?
Set both fonts at actual web sizes — 64px heading, 17px body — with real copy, not 'Lorem Ipsum'. Look for: shared proportions (x-height, stroke weight), complementary contrast (if one has personality, the other should be neutral), and whether your eye moves naturally from heading to body text. If the body font draws attention away from the heading, or the heading's personality clashes with the body's, they don't work together.