Pairing fonts: contrast, not conflict
Two fonts on one page are a conversation.
If they are too similar, it sounds like a mistake. If they are too different, they start to argue.
A good pair has one clear difference. And a lot in common.
✦ One difference is enough
The classic pair is a serif for headings and a sans serif for text. Or the other way around.
That is one difference: the shape of the letter.
Now keep the rest close. A similar x-height. A similar width. A similar mood.
Then they feel like a team.
✦ Things to look at
- X-height. The height of the small letters. Similar x-heights sit well together.
- Width. A narrow font next to a wide one often feels uneasy.
- Weight range. A family with many weights gives you room to make hierarchy.
- Character. Friendly, formal, technical, old, new. Match the message, not your favorites.
✦ How to use this tool
- Choose a heading font and a body font. Or start from a ready-made pair, like Editorial Calm or Modern Classic.
- Type your own headline in the preview. Try Random match for unexpected combinations.
- Read a real paragraph. Not the alphabet. Not "lorem ipsum".
- Check the pair at small sizes and on a phone.
- Decide, and use those two only. Resist a third.
✦ The one-family option
You do not always need two fonts.
One good family with enough weights can do everything. Bold for headings. Regular for text. Italic for emphasis.
It is the calmest choice. It is rarely the wrong one.
✦ Common mistakes
- Two decorative fonts together. They fight for attention.
- Two sans serifs that look almost the same. It looks like an error.
- Choosing a font for the heading only. Body text is what people read longest.
- Too many sizes and weights. Hierarchy needs few steps, not many.
✦ Try this
Set the same short text in five different pairs. Print them. Put them on the wall.
Walk away. Come back an hour later. One of them will simply feel right.
✦ In practice
A website for a law firm. A calm serif for headings gives authority. A clear sans serif for text keeps it modern and readable.
Trust and clarity. Two fonts, two jobs.
A children's book fair. A round, friendly sans serif for headings. A very readable text font for information.
Playful where it may be. Serious where it must be. Parents still need to find the opening hours.
A tech start-up. Often one family is enough. A geometric sans serif in three weights.
It looks focused. It loads fast. And every new page designs itself.
✦ Four questions before you choose
- What do you want to say? One word for the voice of the brand.
- What must be seen first? The heading font carries that voice. Choose it first.
- What can go? The third font. And every weight you do not use.
- What is the next small step? Set one real page with the pair. Then judge it.
✦ A small checklist
- Two fonts at most, or one family.
- Body text is comfortable at 16 pixels or larger.
- Both fonts support the languages and characters you need.
- Licenses allow use on the web and in print.
- Headings and text differ in one clear way.
✦ From the classroom
Typography is taught in layers. First one font. Then size and weight. Then space. Only then a second font.
Students who follow that order make fewer choices. And better ones.