Choosing & Pairing Typefaces
How to choose and match typefaces when starting a project?
In general, there are a few tips that I recommend people to start with.
Research for the “hook”
First of all, it is crucial to research and understand the project that you’re working on. Think about if there is any kind of a hook there; for example, if it’s a French company, look up French type designers. If it’s related to a certain period in time, look up typefaces that came from that period in time. They will help evoke a mood, and that’s one of the most wonderful things about type. Not only does it convey the meaning of the words that it represents, but it also can help convey a mood. If I say “Western,” you’re going to think of the letters on a Western poster.
If I say “Jazz,” you’re going to think of 1920s Chicago.
There are these letter styles that are kind of ingrained in us, and they might be a bit of a cliché, but that should get you going in the right direction.
I tend to start with looking up type designers that worked in a time period that is relevant to the project that I’m working on. Barring that, if you’re working on something that is very modern, one of the things you can do is try looking at the blogs from all the different type services. Go to Typekit’s blog, Fontdeck’s blog, and Font.com’s blog, and they all have these galleries. You can check out a lot of really modern designs, and just sort of get a feel. Start to think about what kind of a mood you feel when you look at them. That can be really helpful to get you going in the right direction.
Sans Serif typefaces render well on screens
Generally speaking, Sans Serif typefaces render really well on screens most of the time. Again, these are caveats, they’re not absolutes, but the older the screen, the worse the rendering is going to be. So, if your audience tends to be a lot of older IE users, if you’re working on corporate intranets, things like that, testing is going to be really critical. You want to keep with simple letter forms that aren’t overly complex so they’ll draw quickly, easily, and readably.
If you’re really working on modern stuff, then you have a lot more freedom. There’s no reason to not try a Serif font, one with the little feet on it, like Georgia. It could look really beautiful, and could be a nice readable typeface on a small screen.
There are so many emulators and devices out there that you can play with. It really pays to just try things out. A lot of the services have free accounts, so you can do just that. You could also try out a service called Typecast, which lets you pick web fonts from a bunch of different services.
Pairing fonts is also an important thing to consider. Some typefaces come with a really broad range of weights. Pura Sans is a beautiful example. It was designed for the Firefox OS. It’s got something like 16 different weights and variants, from extra light to extra heavy. That’s got a really fantastic range that you can use, so that you could actually use one typeface and do your whole project in just that one typeface, and just use all the different weights and styles of it to give all the differentiation that you need. That can be really successful.
Another example is Museo, another typeface that’s been really popular since Typekit launched a few years ago. It’s a great typeface, and a lot of people still use it. I actually just used it on a project that launched today. There are three different kinds of Museo. There’s Museo, Museo Sans, which is a Sans Serif, and Museo Slab, which has these really heavy serifs on it. Using those things in combination with lots of weights to them is really fantastic. That way, they’ll all belong together because they’re all drawn that way.
Look up typefaces drawn by the same designer
Another really nifty trick is to look up typefaces that are drawn by the same person. If you’re looking at fonts.com, you could look things up by designer. On Fontdeck, you can do the same thing. Even though they might not technically be related typefaces, when they’re drawn by the same hand, oftentimes they’ll have a nice relationship to them.
A really good example of that is Avant Garde and Lubalin Graph, both drawn by Herb Lubalin. One is a sans serif and one is a slab serif, but even though they were drawn at different times, they look fantastic together. So, looking by designer is another interesting way for you to find typefaces that will work well together.
Other posts in this series with Jason Pamental:
- Introduction to Fonts for Developers
- Pros & Cons for Icon Fonts Like Font Awesome – Design Tips for Developers
- Using Modernizr to Detect HTML5 & CSS3 Features in Browser
- Additional Resources About Responsive Typography
Need more design mentor help? Book an 1-on-1 session!
