This has turned out to be the year of web typography.
There are two companies offering you the ability to customize the typefaces on your website, and they’re easy – and often free – to use.
Google’s Font API is free and offers a handful of open source typefaces. Typekit is a commercial solution that’s reasonably priced, and offers a wide range of fonts that’s growing every day. They have a free, entry-level offering, and paid options that vary by how many page views your site gets per month.
Typekit now has fonts from Adobe, Moveable Type, Veer and other major type foundries. On this blog, I recently switched from the web standard Georgia to Chaparral, which is an Adobe font I use in all my PDF materials. (Do you like it? Let me know in the comments!)
Fresh Fonts Served Daily
Both services work in a similar fashion: typefaces are “served” up onto users’ machines, much the way websites are served on the Internet. Users don’t need to have the typeface installed in order to see it used on a web page.
What this means is that although we had very few choices when it came to web typography just a year ago, we’re now going to get access to a broad range of type styles. Web typography is finally going to approach print typography in terms of choice and the ability to customize the look of your website.
Does all this choice seem overwhelming? Let’s go over the best way to combine and use typefaces on the web so it’s not so scary.
In order to maintain visual consistency, pick two typefaces. Just two.
It’s easier for your visitor to notice, absorb and remember two different typefaces than it is three, or four or more. Spend some time picking out two versatile styles and you’ll have what you need to establish a memorable visual brand.
The easiest way to do this is to pick one typeface for your text, and a different one for your headlines and subheads.
Your text typeface should be highly readable. This is where the bulk of your information will be conveyed, so you need to be sure it’s clear and easy on the eyes.
Your headline typeface will be used in smaller doses, so it can be slightly more challenging to read, or more decorative.
Mix and Match
A great way to decide which styles combine well is to study their letter forms. Look at two things: size and shape. One will affect readability, and the other will help you combine different typefaces. Pick your text typeface first (it’s more important), then look for a headline style that will work with it.
When looking for a text typeface, notice the space between the baseline the letters stand on, and the tops of lower case letters or the “bowls” on letters like b and h. This is called the x-height.
It’s easier to read text typefaces when they have a large x-height rather than a small one. Typefaces with compact x-heights tend to close up visually at a distance, making them hard to decipher. Both Google Font API and Typekit offer you the ability to view text blocks set in the style you’re considering. Be sure to check readability at small sizes.
You’ve picked out a text typeface with a nice, large x-height. Now you want to combine it with a headline style, but where should you start?
First, try looking at the letter forms in the text typeface you chose. Look closely at the letters a, g and e.
For the best blend, look for typefaces that draw the letters a, g and e similarly. In the examples below, the serif typeface on the first line combines best with the second sans serif example. The serif typeface on the second line combines best with the first sans serif example.
Or Go For Contrast
Another direction you can take things is to make your headline text dramatically different from your body text. Don’t try to match letter forms: make them obviously different.
In the example below, notice how the headline typeface is dramatically different, yet this combination works, too.
Don’t Be Wishy-Washy
The worst thing you can do is to almost match your letter forms. In the realm of graphic design, something that almost matches looks like a mistake. Be decisive: either make your letter forms match closely, or make them dramatically different. See the example below for an almost-match that doesn’t quite work.
Rock Your Type
It’s time to get daring with your web typography. Use the tips above to get started. Visit the Google Font API and Typekit, and follow their instructions for bringing custom typefaces to life on your website.
If you’re confused, or you’d like another set of eyes to take a peek at your typeface choices, post a comment below. The readers of this blog are very helpful and willing to weigh in on the typefaces you’re considering, so use this community to get feedback on your choices and let’s talk type in the comments!