I studied design for 5 years throughout college and university. Every time I handed in an assignment I’d get feedback that ended with “…but your typography could really use some work”.
Every. Single. Time.
The problem was, I already knew it needed work. I just didn’t know how to make the words on the page (or screen) look good.
I’d go through every font on my mac. I’d look through font foundry websites but I didn’t know how to tell the difference between a good font and a bad. And I didn’t know which would be right for my project.
Suffice to say, over the years I’ve got a little better at choosing fonts for my projects. I no longer get overwhelmed at the sheer amount out there and I’ve learned a few tricks to make the selection process as quick and painless as possible.
And this is what I’ll be sharing with you today. Some of the key lessons I’ve learned over the years to make choosing typefaces a breeze.
#1: Stop relying solely on free fonts
There are a lot of free typefaces out there. DaFont and Google Web Fonts alone have thousands.
I used to exclusively use free fonts. It seemed silly to pay for something that was available for free but I’ve found a few key issues with this.
- The character sets are often incomplete
Free fonts always run the risk of having missing characters. From accented characters like à á â ä æ ã å ā (and that’s just the a’s!) to missing punctuation. There is nothing more frustrating than finding out you’re missing a bunch of characters that you need. I’ve been in that situation, and it’s not fun. - They’ve been created for one use only
A lot of free fonts have been created by a designer who needed it for a specific purpose. Think a Halloween party or a conference for sci-fi enthusiasts. You can imagine what these fonts would look like: often full of character but simply not practical for any other use. You really want to be choosing fonts that you can use in multiple projects. It doesn’t mean everything will look the same—far from it. It just means you’ve invested in something that can be applied to different situations. - The quality simply isn’t as good
Ok, I’ll admit there are some great free fonts out there like Open Sans, Ubuntu or Merriweather but most of the time free fonts just aren’t going to be of the same standard as premium ones. Bear in mind, a complete typeface can take years for the designer to craft. You can bet the really good ones won’t be free.
Despite what the above sounds like, I’m not actually against using free fonts at all. They can and do look fantastic on a number of websites (remember, it’s not the tools but how you use them). All I’m saying is don’t rule out splashing for premium as it is one of the easiest things you can do to make your typography all the more slicker.
“But what if I can’t afford to be buying a new typeface for every new project”
Premium typefaces can be expensive. And if you work with multiple clients, it can add up quickly.
As I’ll reiterate later on, I prefer to use TypeKit for the majority of my typography choices. This gives me a huge amount of premium typefaces that I can try out, and it comes with my Creative Cloud subscription. I’ve found this to be the most fool-proof method of choosing typefaces, especially when you’re new to it because it allows you to sync them to your computer so you can try them out beforehand. You can also host them for your client on their domain or go to their foundry website to purchase a license.
If you’re worried they’d scoff at the cost of doing this, think of it this way: If you’re designing a website for a client the fonts are going to be a pretty big part of it. In fact, the fonts are going to be a big part of their entire brand. Forever. Any time they create a business card, a brochure, put together a slide deck or a Facebook ad—those fonts will be used.
Yes, it can seem expensive at the start but this is an investment that you’re going to be using time and time again. Potentially even preventing the need for any big redesigns in the future.
It took me a long time to realise this and I thought clients wouldn’t be willing to invest in a typeface. But if you explain how valuable this can be to them, they’ll go for it.
#2: Narrow your search
Wherever you decide to go to conduct your typeface search, whether it’s Typekit, Google Web Fonts or any of the other places you can find quality typefaces, you now have the challenge of picking some out of the wall of text now staring at you.
It seems daunting now but this is something that gets easier with time as you train your eye to see the differences between fonts.
So for now, let’s start with something easy. List out a few descriptive words that describe the overall look and feel that you’re going for on your website.
Words like: Elegant, soft, feminine. Or perhaps: Quirky, clean, character.
Determining this beforehand makes it so much easier to pick out typefaces. Often you’ll have multiple ideas as to what you want your website to look like. This is the time to really decide whether you want elegant and up-market or quirky and cool.
If you notice you’re mixing adjectives, like clean and grungy or soft and masculine, you need to take a step back and evaluate what kind of style you’re going for with your design.
(I share some tips on how to do this in my Ultimate Design Process article. The Gut Test is a particularly useful exercise.)
Then when you’re scrolling through these seemingly endless lists of typefaces you can be repeating these words over in your head and just start picking out a few which seem to fit the bill. For example, if it’s for a kids club you want something that looks ‘kiddy’. If it’s for a doctors surgery, you want something clean and clinical.
I really recommend using your gut instincts at this stage, purely because it’s the best way for you to learn for yourself which typefaces suit which style. (I’m a big advocate for experimentation before theory—yes, my old design tutors hate me). However, if you do want to delve a little deeper into type classifications I recommend this series from Smashing Magazine which will lead you through the different styles of typeface, where they originated and what they can be used for.
But for now, choose at least two (but preferably three or four) typefaces that fit the style you’re going for and follow my next step…
#3: Test your fonts in a real setting
Whether you design in Photoshop or in the browser, it’s a good idea to text your fonts in a real setting.
This for me, is the main benefit of using TypeKit. Most of the fonts displayed on Typekit can also sync with your computer so you can try them out before you commit.
There are a couple of things you’re going to need before doing this step:
- The content for at least 1 page of your website
- Some sketches or wireframes of the layout
If you don’t have these yet, don’t worry, you can always use a past project or even just put in dummy content for now. The downside is that you’ll have to redo this part again and it’s also not going to be as accurate a representation.
Now all I want you to do is to quickly fill in the general structure of
I usually just open up a past client project and change the fonts to the ones I’m looking at. As long as the page had a couple of headings, some button text and some body copy, you should get a solid idea as to whether it’ll work for your project or not.
You can even create a ’testing document’ where you have all of these features and use it every time you are picking fonts for each new project.
If you’re not using TypeKit and you can’t sync to your desktop, most font purchasing websites do offer some sort of testing feature. I don’t find them as useful because I can’t manipulate it myself but it’s still better than ‘buying blind’.
Start building a collection
This is my last tip for this article. And I was actually going to start with it as it’s the most useful. But I didn’t want to be that person who is all “oh, you have a problem, well here’s how you could have prevented that problem” (rather than offering a solution).
But really, the best thing you can do is to start building up a collection of fonts you love so you don’t even have to go in search of the perfect font in the first place.
The best way to do this is to simply go about your daily internet browsing business. Then every time you stumble across a website that looks great and has a nice font, find out what that font is and save it.
The tool I use to do this is a Chrome extension called WhatFont. You can simply click on any font and it’ll tell you what it is, the size, color etc.
Or of course you can use the developer tools in your browser and find it manually—but WhatFont is so much quicker 🙂
—
So that’s it! I hope this has been helpful. It’s not one of those “here are a bunch of font pairings you can use” articles because, while those are GREAT, they don’t teach you how to start finding them yourself.
It’ll take a bit of time but you’ll get better and better with every project. Half the battle is just remembering to notice the typography around you.
If you have any tricks about choosing fonts, I’d love to hear them. Let me know in the comments!