The three font rule suggests using no more than three typefaces in one design. It’s a useful starting point for avoiding clutter, not a requirement to find three fonts before you’re allowed to begin.
One family can be enough. Two can give you plenty of contrast. A third needs a reason beyond “I downloaded it and now I’d quite like to use it”.
The useful bit isn’t counting the fonts. It’s working out whether you need another one, or whether you’ve just got bored and started fiddling.
What is the three font rule?
Also called the three typeface rule or 3-font rule, it encourages you to limit the number of different typefaces competing in a layout. A common arrangement uses one for headlines, another for body text and an optional third for a specific accent or specialist role.
Adobe describes it as a guideline, which is the important word. It isn’t a technical restriction, and using four typefaces doesn’t automatically make a design bad.
The point is to make the information easier to understand. If your reader can immediately see what matters, where to start and what to read next, the typography is doing its job.
Three fonts doesn’t mean three heading levels
A headline, subheading and paragraph need different treatments. They don’t necessarily need different typefaces.
You could use one family: bold for the headline, semibold for subheadings and regular for body text. Change the sizes and spacing, and you’ve already made it clear what to read first.
For this rule, count typeface families, not every weight or style. Using bold or italic doesn’t mean you’ve added another typeface.
What does your design need to say?
Before choosing anything, write down what your design actually contains. A poster might need a title, date, venue and booking address. A packaging label might need a product name, description, ingredients and weight.
Decide which information people should notice first, then what they need to read comfortably. Planning the text levels before selecting typefaces gives the choices a purpose.
I’d start with the most demanding bit. For a long article, that’s usually the body copy. For a poster built around two enormous words, it might be the headline.
Choose that first, then see whether you need another typeface for the remaining text.
When should you use one, two or three typefaces?
| Typefaces | Possible arrangement | When I’d try it |
|---|---|---|
| One | One family; different weights, sizes and spacing | A report, straightforward website or restrained identity |
| Two | A distinctive headline face and a comfortable reading face | A poster, packaging design or brand needing a stronger voice |
| Three | The first two, plus another face for one specific job | Code examples, another writing system or a particular campaign treatment |
These are just suggestions. A website doesn’t automatically need two families, and a poster doesn’t need three simply because there’s room.
Use a bold headline and keep the details simple
An expressive display font can do a lot of work in a short line. Let it.
Take this Johnny Marr poster for his 2015 Royal Albert Hall show. The large display lettering makes his name stand out, while the smaller sans-serif text underneath gives you the venue, event and date.
I can see two distinct type styles here, although I haven’t confirmed the exact fonts. They have different jobs: one catches your attention, and the other gives you the information.
Poster by Tommy Davidson-Hawley, commissioned and published by Teenage Cancer Trust. View the original poster. Typeface count based on visual inspection.
Keep the date, venue and booking details simple and easy to read. The headline gets people interested; the rest tells them where to go and how to get a ticket.
How do you choose fonts that work together?
Look for a clear difference, but also a reason the choices belong in the same design. Adobe’s font-pairing framework looks at how the typefaces contrast, what they have in common and whether they suit what you’re trying to say.
A serif with a sans serif is one route. A narrow display face with a wider text face is another. Two sans serifs can also work when you can clearly tell the headline from the supporting text.
Don’t turn “avoid fonts that are too similar” into another absolute rule. Ask whether the difference helps. If you keep swapping between two almost identical options, a different weight of the same family might solve the problem more cleanly.
And don’t expect matching point sizes to produce matching visual sizes. Compare the actual letters, their weight and their proportions. Adjust them by eye in the layout.
Before adding a third font, try this
Make a copy of the design and keep the typefaces you already have. Then work through these changes:
- Change the size. Does the headline need more presence, rather than a new face?
- Change the weight. Would a stronger subheading separate the sections?
- Fix the spacing. Could more room around a heading clarify the structure?
- Check the colour. Is weak contrast making the text disappear?
- Remove unnecessary treatments. Do you need capitals, italics, an underline and a different colour?
Now compare the versions. If the problem has gone, you didn’t need another font. You needed to finish arranging the ones you had.
Before adding another typeface, ask yourself: what does it do that the others can’t?
It might make code easier to follow, provide characters you need in another language, or give a campaign a particular feel. If it’s only there because you fancied a change, you probably don’t need it.
Does a logo count?
Include it when you assess the overall mix of lettering, but don’t let counting dictate the decision.
A fixed wordmark isn’t the same as a typeface you use throughout every page. It might be custom lettering rather than something you can type with at all.
Look at how much attention the logo draws beside the other text. A small logo beside two well-managed typefaces may feel quieter than three decorative faces squeezed into one headline.
Fewer fonts doesn’t always mean a faster website
Using fewer typefaces can keep your website looking tidy, but it doesn’t automatically make it load faster.
A single family can involve several downloaded files if you load multiple weights and italics. A variable font can sometimes replace several files, but it isn’t automatically smaller than one static style. Google’s web.dev guidance explains that trade-off.
Check what the website actually loads, whether you use those styles, and what happens before the fonts arrive. Don’t assume a short font list guarantees a fast page.
Test the design where people will see it
Use the actual text from your project, including long headings, prices and addresses. A font might look great in a short headline but struggle with the smaller details.
Print a sample at its intended size. Check a social graphic as a thumbnail. Open the website on a phone and test text resizing.
Ask someone to find a particular detail. “Where is the event?” tells you more than “Do you like the fonts?”
You could use just two typefaces and still end up with text that’s too small or cramped to read. Choosing the fonts is only part of it. My guide to legibility and readability explains what else to look out for.
Can you break the three font rule?
Yes. An expressive poster, an editorial feature or a deliberately mixed typographic composition can use more than three typefaces.
“You must first know the rules, and then break them in an intelligent way.”
— Paul Rand, as quoted by Jessica Helfand in Design Observer.
This is a Radiohead poster from back in the day. It clearly uses more than three typefaces, but that’s kind of the point. The mix of lettering is part of the design.
The different type styles give it that old fairground-poster feel. There’s a lot going on, but the huge red RADIOHEAD lettering still stands out. Using fewer typefaces would change the character of the whole thing.
You can mix plenty of typefaces and still make the important information easy to find. Breaking the rule doesn’t mean forgetting what people need to read.
Three fonts isn’t a magic number
Start with the fewest typefaces that let you say what you need to say. Build the hierarchy. Test the result. Add another only when it improves something specific.
One can work. Two can work. Three can work. The number won’t rescue poor spacing or tell you whether the headline suits the message.
I make fonts for a living, so encouraging you to use fewer might seem like a weird sales strategy. And it is. But I’d rather see one font used well than three fighting for attention.
Frequently asked questions
Is the three font rule compulsory?
No. It’s a design guideline that encourages restraint. More than three typefaces can work when the layout has a clear purpose and the information remains understandable.
Do bold and italic count as separate fonts?
They can be separate font files, but for this guideline they usually count as styles within one family. Don’t confuse the number of files with the number of distinct typeface designs.
Do headings, subheadings and body text need different fonts?
No. Different sizes, weights and spacing can distinguish those roles within one family.
Is using only one font boring?
Not necessarily. Composition, scale, spacing and the typeface itself can provide plenty of character. Adding a second family won’t automatically make a dull layout interesting.
Can I use two decorative fonts together?
Yes, but compare their roles carefully. If both demand attention, establish which leads. For a straightforward informational layout, one expressive face and a calmer supporting face is an easier starting point.
Does using three fonts make a design accessible?
No. Font count doesn’t establish accessibility. You still need to check contrast, text size, spacing, resizing behaviour and whether people can read the actual content.
Written by Simon Stratford, type designer and graphic designer. These are my opinions, reached after too little sleep and too much coffee. You can also follow my antics on @itsmesimonok, or leave a comment below. Despite all the opinions, I’m actually quite nice.