

Whichever fonts you choose has to convey your message strongly, and if that means having contrasting typefaces, then go for it. This of course depends on the rest of your design. It doesn't particularly matter if they look similar, what matters is if they act similar. Sometimes, the most appropriate thing would be two sans-serifs, while other times, you want a sans for headlines, and a serif for body copy. There's no way to know which is the best until you've tried all of them. I find that the best way to choose a pair of fonts that works is to just put a lot of them side by side and decide on the best. “Are they similar enough?” “Too similar?” “Not different enough?” All these are questions you should be asking yourself. When choosing a pair of fonts, the most important thing to consider is how they work together. There's no way one typeface will work for all of them! The vast majority of well-designed websites use two typefaces: one for body copy, and one for headlines. There's rarely (if ever) a situation where just one typeface is appropriate for use on a site. Choosing fonts is really a gut instinct, but it's important to remember that 90% of the time, a user won't be thinking about what font is used, so if it's readable, then that's often good enough. Often, the best way to decide on one is to just try out each font you think might work, and then compare. There's no formula for choosing the right fonts for your website. From there, you'll be in a better position to make critical choices about fonts.


What's good about typefaces is that once you've worked on enough projects, you'll have a good idea of what works and what doesn't. If you can make out what it says immediately, then it's readable enough. Readability in large titles is far easier to figure out than in body copy. That covers body copy, but what about titles? What do I mean by that? If you can set your copy to 10px and you can still make out what it says, then that's a good indication you've chosen a readable typeface. Your body copy is arguably the part of your design that needs to be most readable, so make sure you pick a font that works well in small sizes. While it may go against your beliefs to set your type in such an abused face, if it works, then go for it. It fits right in with virtually every design imaginable, it works well in small, as well as huge sizes. People overuse Helvetica because it's just so damn good. I agree with this, but there's one very important piece of information this statement leaves out: why. I know that many designers hate using Helvetica, because it is wildly overused. When deciding what typeface to use on your website, it's important to remember: don't over think it. What do you do with type? Read it! So why do so many websites make it so damned difficult to do just that? Be it tiny font sizes, crammed line-height, or just plain ugly fonts, it seems that a lot of sites out there are determined to not let you enjoy their content!īy making your type readable, you immediately jump ahead of at least half of the competition, which is fortunate, really, because it's not that hard! Typefaces Practical typography means learning how, and more importantly why, to adjust what you do have control over. Choosing a typeface, deciding on a size, these are all things we as designers have a say in. For me, this means accepting that you will never have total control over the type on your websites. What I'm going to be focusing on today is practical typography. In other words, you give up some control. It's simply out of the question to take the time to kern (adjust space between individual letters) each title on a huge website. When you design for the web, you have to accept that the content will change. This tutorial was first published in October of 2010. Every few weeks, we revisit some of our reader's favorite posts from throughout the history of the site.
