How many fonts is too many fonts?
Roughly a 5 minute read by Jamie Wright
Great cross browser support for "@font-face" and the rise of online font delivery services like Typekit, fonts.com and Google web fonts has completely transformed the landscape of typography on the web.
“You can't use that, it's not a web safe font!”
Years ago, this would have been hurled across agency offices and on phone calls to clients frequently. There used to be a limited assortment of fonts that you could use on the web without having to worry about if all your users were going to be able to see the same thing. With the introduction of these now common practice techniques and services, you can literally use any font your heart desires (licence permitting).
As with everything, with this new found typographic freedom, there comes a new responsibility not to abuse these new powers.
So lets slow down…
You might have seen this great new font, and I'll agree it is pretty awesome, but before you just drop it into your next design, sit back and think.
“Is this extra font adding anything to the experience, or am I over complicating things?”
Realistically, there's no reason to use more than three fonts, in any piece of design (not just the web) that's it, no more, sorry.
One for your headings and one for body copy. When you add in bold and italics we're already looking at 4 variants of each, so that's more than enough to play with.
Three's a crowd
While there aren't really any definitive rules, it's best to keep that third font out of the picture and stick to two. Can you really justify introducing another font into the mix for your sub headings? Probably not but sometimes.
Now I'm not going to go away and cry in a corner if you use three, but you should really try to stick to two.
“Just because you can, doesn't mean you should, or that it's ok. Every decision should have a rationale behind it.”
Considerations
While I'm more than happy to admit that if you search google you aren't going to find any specific rule that states you can't use a million different fonts all in a single piece of design, there are many other factors to consider.
With each extra font introduced you need to consider that you're affecting:
Visual hierarchy
Although you can be forgiven for thinking that hierarchy is simply created using different weights and sizes, it can be complex. The crucial thing is contrast.
Even when you're dealing with just a single font in a design, any minor adjustments to, for example, the line height of your paragraphs or the letting spacing in your headlines can dramatically change the balance of the whole thing.
Adding in a different font can completely change the balance and tone of your design. So as with many things it's crucial for you to use your own judgement.
Page weight
Your average font is about 40kb, and that's per weight, then multiply that by 4 for the italic and bold variants I mentioned earlier and we're looking at adding 160kb to your initial page load for each non-system font that you decide to use.
Obviously this isn't set in stone, you might only need a single weight of a font for headlines, but even so, if that font is more of the more complex out there you could be running up to 80kb just for that. Definitely food for thought.
It's also worth mentioning if you're in the process of a website build and you come across a font used so infrequently through the site that the file size of the images needed is less than the size of the font itself then you shouldn't use it at all. Use an image replace technique in your css instead.
Further Reading
So hopefully you've learned something from this, and will take the lessons leant with you into your next design project! I've only really dipped my toes in the water, so if this has wet your appetite then I definitely recommend checking out these articles: