Tätä opasta ei ole vielä omalla kielelläsi, joten tässä se on englanniksi.
Lyhyesti
- Font pairing works best when each typeface has a clear role, usually one for headlines and one for body text.
- A good pair contrasts clearly in one way, such as serif against sans serif or heavy against light, while sharing proportions and mood.
- Using one type family with several weights, or a superfamily with matching serif and sans versions, is the safest way to pair fonts.
- Two typefaces that are similar but not identical, such as two neutral sans serifs, usually look like a mistake rather than a pairing.
- Two fonts are enough for almost every brand, post or website; a third should have a narrow job, such as code or labels.
Tällä sivulla
Good font pairing comes down to three rules: give each typeface a distinct role, make the two contrast clearly in one way, and let them agree on everything else, such as proportions and mood. A serif headline over a sans serif body is the classic example. If in doubt, use one family in two weights; it can't clash with itself.
Start with roles, not fonts
Before choosing any typeface, decide what jobs the type has to do. Most designs have two: headlines that set the tone and body text that has to be comfortable to read. Some add a third, small job, like labels or code. Choose the body face first, because it carries most of the words, then find a headline face that complements it.
| Role | Its job | What matters most |
|---|---|---|
| Headline | Set the tone, be seen first | Character, weight, how it looks large |
| Body | Be read comfortably at length | Legibility, even texture, a good regular and italic |
| Labels and small text | Be read quickly at small sizes | Clear shapes, open spacing, sturdy weights |
| Code or figures | Align and stay unambiguous | Monospaced or tabular numbers |
Roles made visible: a large headline with character, a small label above it and a quiet supporting line below. The contrast is in size and role before it is in typeface.
Contrast in one way, agree in the rest
A pairing needs a visible difference, otherwise the second font looks like an accident. But if the two differ in every way at once, they look like they came from different projects. Pick one axis of contrast and keep the rest close.
- Classification: a serif with a sans serif. The most reliable contrast. Serif vs sans serif explains what each brings.
- Weight: a heavy display cut with a regular text cut, even from the same family.
- Width: a condensed headline face with a normal-width body.
- Agree on proportions: similar x-heights, the height of lowercase letters, make the two sit comfortably on a line together.
- Agree on mood: a warm, soft serif pairs with a warm, humanist sans; a sharp, geometric sans pairs with a crisp, high-contrast serif.
One family, or two
The simplest pairing is no pairing: one family in two or three weights. It's consistent by design and hard to get wrong. Superfamilies go a step further, with a serif and a sans drawn together to share proportions, so you get the contrast of two classifications with the harmony of one design.
One family
- Contrast from weight and size only
- Guaranteed harmony
- Quieter, more uniform voice
- Example: Archivo Black headlines, Archivo body
Two families
- Contrast from classification or character
- Needs matching proportions and mood
- More expressive, more personality
- Example: Fraunces headlines, Inter body
Proven font pairings from Google Fonts
These pairs use typefaces that are free on Google Fonts and widely used, which makes them easy to test. Treat them as starting points: set your own words in them and judge the result.
| Headline | Body | Contrast | Feels |
|---|---|---|---|
| Playfair Display | Source Sans 3 | High-contrast serif with a clean sans | Editorial, classic |
| Fraunces | Inter | Soft, characterful serif with a neutral sans | Warm, contemporary |
| DM Serif Display | DM Sans | Display serif with its companion sans | Friendly, polished |
| Instrument Serif | Inter | Condensed serif with a neutral sans | Fashion, editorial |
| IBM Plex Serif | IBM Plex Sans | A superfamily's serif and sans | Precise, technical |
| Space Grotesk | Inter | Quirky grotesque with a plain one | Tech, product |
| Archivo Black | Archivo | Weight within one family | Bold, direct |
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;600&display=swap" rel="stylesheet">
<style>
h1, h2 {
font-family: "Fraunces", Georgia, serif;
font-weight: 600;
line-height: 1.1;
}
body {
font-family: "Inter", system-ui, sans-serif;
font-weight: 400;
line-height: 1.55;
}
</style>Pairings to avoid
Avoid
- Two neutral sans serifs that differ only slightly
- Two display faces competing for attention
- A third and fourth font for variety
- Faces with very different x-heights on one line
Instead
- One sans in two weights, or a serif with it
- One display face, one quiet text face
- Two fonts, with weights and sizes for variety
- Faces with similar proportions
Display faces are the most tempting to overuse. They are made for large sizes and short lines; body text set in one tires the eye quickly. Display fonts covers where they shine.
How to test a font pairing in ten minutes
- 1
Use real words
Set an actual headline and a real paragraph from your work, not placeholder text.
- 2
Set them at real sizes
The headline large, the body at reading size, on the format you'll actually use.
- 3
Look at the texture
Step back. The body should look like an even grey; the headline should stand clearly apart from it.
- 4
Try it on a phone
Many pairings that look elegant on a monitor fall apart at phone size. Fonts for social media covers what holds up.
- 5
Check the details
Numbers, punctuation, italics and every language you publish in.
Once you've chosen, write it down with weights and sizes so everyone uses it the same way; brand fonts covers licensing and languages, and typography basics covers the scale. In Gradiently, fonts live in your brand kit and apply to every new design.
Usein kysyttyä
What is font pairing?
Font pairing is choosing two typefaces, usually one for headlines and one for body text, that contrast clearly in one way and agree in proportions and mood.
How many fonts should I use?
Two is enough for almost everything. A third should have a narrow job, such as code or small labels.
Is it okay to use only one font?
Yes. One family in two or three weights is the safest pairing there is, and many strong brands use exactly that.
What is a good Google Fonts pairing?
Reliable starting points include Fraunces with Inter, Playfair Display with Source Sans 3, and IBM Plex Serif with IBM Plex Sans.
Why do my two fonts look wrong together?
Usually they're too similar, so the difference looks like a mistake, or they differ in every way at once. Keep one clear contrast and match proportions.
Kirjoittanut Gradiently
Gradientlyn tiimi. Gradiently on Markien ympärille rakennettu suunnittelutyökalu: eläviä liukuvärejä, joiden ansiosta kaikki suunnittelemasi näyttää omaltasi.
Katso profiilimme
