One of the most common type-related headaches that people come to me asking for my best typography tip about, is this one: how to pair typefaces.
I understand the importance of this, of course, and I also get how overwhelming it can be: we are spoilt for choice on the web these days, both with paid and free typography services. There are thousands of options! So many typefaces, so little time! Where can one even start from??
The best way to avoid typographical overwhelm
While there is of course a science and an art to choosing and pairing typefaces, here’s an immediate solution – and I promise, this is without a doubt the best typography advice I can give you.
If you don’t feel confident about your pairing skills:
Don’t pair.
Use just one typeface instead.
I bet you didn’t think I’d say that! But yes: I believe it is often the best strategy, for a host of reasons (that I explain below).
Using just one typeface does not at all mean lower quality. In fact, it means stronger branding: that’s also another way you can sell the idea to those clients who may object to this essentialist choice.
Create hierarchy, rhythm and visual interest with styles, weights and colours instead.
Your digital product will load faster, and your visitors’ brains won’t have to work so hard to understand too many different patterns.
This means, of course, a more accessible typeface. And you know what accessibility also means: a much wider audience willing to buy your stuff.
Side effects of using just one typeface
So in one fell swoop, just by making the bold move of sticking to just one typeface, you’ll achieve the following:
- Stronger, bolder branding
- Clearer message thanks to lack of visual clutter
- Good step towards accessible typography that’s usable by everyone
- Which means a wider audience ready to buy from you
- Faster load times
- Which means better UX – people like speedy sites
- As well as better SEO – Google likes speedy sites
- And of course better conversions – speedy sites convert more!
“Ok Piccia, thanks for this unexpected typography tip”, I can hear you say. “That’s excellent news.
But how do I choose the right typeface, one that is so strong and independent that it doesn’t need any support?”
How to choose a single typeface
Yes, there is indeed a science to choosing a single typeface (there is an art, too, but that’s for another post). Here are all the features you need to look out for when you select your queen typeface.
1. Pick a typeface with plenty of styles and weights
Google fonts even has a filter for that: you can check how many styles (i.e. italic, roman) and weights (i.e. light, regular, bold, etc) a typeface has.
This will make it possible for you to create hierarchy of content as well as visual interest without needing to resort to a second typeface.
Example: Work Sans
Work Sans is an excellent sans serif Google typeface with plenty of weights and styles to choose from. And now that Google have sorted their privacy issues that used to be against GDPR legislation and you can easily host them locally, or make sure your site’s cookies policy gets user consent, Google Fonts have become a better option than Adobe, actually, or any other cloud-based font service that leaks IP addresses while also making it super hard to get a separate license for your clients.
2. Pick a sans serif that also has a serif version
Pick a sans serif typeface that has a serif version for the text, or a condensed/ extended version for the headings: this way you have a ready-made pairing, without any effort – and technically, you can say it’s the same typeface family. How’s that, for a top typography tip!
Example: Freight
Freight is a very extended typeface family on Adobe Fonts that has a sans serif, a serif, a text version optimised for the web, and a “prettier” version for headings. I imagine it like a huge, multicultural family with children of all styles and colours.
(By the way: if you’re wondering why I keep using the word “typeface”, rather than “font”, check out my article where I explain the difference.)
3. Always check type anatomy
Always check type anatomy: proportions, x-height, length of ascenders & descenders, & test a paragraph for line height. This may seem pernickety but trust me, it’s not: a generous x-height (that is to say, the height of the letter x) usually means shorter descenders and ascenders (the anatomical parts that go respectively below the baseline and above the x-height. This means you can achieve airy line heights without risking a clash between ascenders and descenders, for instance b and p. So, always test your typeface before you choose it.
A lower x-height usually means better readability, so it’s a safe bet and an evergreen typography tip (although of course, even x-height can get a bit complicated).
Example: Brandon Grotesque
Brandon Grotesque is a typeface I loved and used for my most important projects for many years (I only recently re-branded using Atkinson Hyperlegible, and one day I’ll tell you why).
However, Brandon Grotesque has lower x-height than ideal and very long ascenders and descenders. As a consequence, it’s hard to achieve tight paragraphs without conflict.
A good alternative is Brandon Text, an evolution on Brandon Grotesque that was developed specifically to make it more usable on the web. Not as pretty (we’ve lost the gorgeous lowercase “g”), but it’s still very good-looking, and it achieves a better layout and better readability.
4. Pick a typeface that comes from a reputable designer or foundry.
This will mean that all characters are well designed, proportional, they render well, they will keep existing and not suddenly disappear, and so on. I used to advise against Google Fonts, by the way, but now I don’t anymore (another post on this sometime maybe). Google Fonts are now beautiful, reliable, and compliant, so go for them.
Example: Klim Type Foundry
Klim, a type foundry from New Zealand, is my new favourite, not just because of their top-quality sans serifs, among the very few that bother actually being accessible; but also, and almost as importantly, because their pricing structure and their licensing is so affordable and so easy to understand, and to set up for a client (try it with Adobe or Monotype: or actually, no, don’t, unless you wish to waste a few hours of your life that you will never get back). You don’t need to bother with a subscription; plus, they work on trust: they’ll never check your actual page views, but they trust that you will let you know should you get over the license you acquired. And I love them for it!
There are other foundries that offer amazing type, but in my experience most of them have an absolutely nightmarish UX (I’m looking at you, My Fonts and Monotype); and/ or they make it impossible to license out to clients (that’s you, Adobe), so I’m not going to recommend them.
Finally, I would beware of typefaces that come from Creative Market or other non-type specific marketplaces and that have only a few styles. You run the risk of it being discontinued or not supported as tech evolves: you’re better off investing a bit more do that your project is future-proof.
5. Pick a typeface with OpenType features
Pick a typeface with OpenType features.
OpenType is a font technology and associated font format, developed by Microsoft and Adobe in the 1990s, which allows the end user to access additional features in a font.
These are features such as small caps, ligatures, swashes, special characters for foreign languages, and so on. I write in other languages, so to me open features such as whole sets of accents and so on are essential. Always check that the typeface you choose covers all the language you need.
Example: Work Sans
Work Sans is, once again, a great work horse (sorry, pun) of a typeface that has enough glyphs to cover most needs, but do check that it does fit your requirements.
6. Pick accessibility over anything else
Last and by no means least: when you choose just one typeface, you’re actually making the most accessible choice. A single typeface means:
- Faster loading times
- Lower cognitive load
Both essential ingredients of accessibility. Plus, you’ll save time and money. What’s not to like!
So, have I convinced you yet? Let me know in the comments!
Want to a few more tips on how to set your typeface?
I’ve got you covered: download my 3 Typography Tips PDF to find out the essential criteria to set your type after you’ve chosen it. It lists 3 easy and quick fixes that can improve your product or website’s usability (and therefore, its profitability) by miles. And I don’t even want your email. No opt-in required.
