What We Think

Web Type—You Can Do Better

posted on Apr 24, 2012 by kristi-lynn

In the past the idea of good typography on a website just meant knowing how to adjust the line-height. You could only really rely on what fonts your visitors had installed on their computer, which meant you could choose from the basics: Arial, Georgia, Times New Roman, Lucida, Tahoma, Verdana, Courier. Sure, there are a few others, but they’re iffy. Then a couple of solutions started to trickle in. Around 2008 Sifr gained a lot of popularity because it was a type replacement that used Adobe Flash, but was still, amazingly, accessible. I'm sure some people are still using Sifr, but now we surf the web on iPhones and iPads and Flash just won't cut it.

These days you can take many more liberties. There are a number of solutions for choosing what I’ll call “atypical” type for the web. I’m going to talk about a few options that I think are feasible, along with their advantages and disadvantages.

Typekit

Our studio’s usual go-to option is Typekit. Here’s why we love it.

Why would I choose Typekit?

If you want to use many different typefaces on a site.
Works great for anything except body copy really, short headlines, long headlines, doesn’t matter, but stick to the larger type if you want good results.
Your website has a small number of pageviews (< 500,000).
You run a studio that has a number of web clients at any given time (one account can have multiple kits, which means multiple websites can use a single account).

Advantages:

Really easy to set up. Pick your font (including styles and weights) and add a line of code to your website.
Lots of really great typefaces to choose from—including well-known typefaces from some really great type foundaries.
You get real type, that you can select, copy, and paste.
You can have access to a bunch of really great fonts for free, and get even more by paying.
You don’t have to worry about legal issues associated with using fonts on the web (as long as you stay within their pageview limits).

Disadvantages:

Yep, it costs money to get the premium stuff. Depending on your page views it can go up to $100/year or more if you need one of their super high business plans (but we’re talking like 2-25 million page views per month).
You’re limited to the fonts that are available in their library, but it’s pretty huge.
It can be a little tricky on IE, some fonts don’t render right and you may have to use some workarounds for those.

Cufon

An on-the-rise, open-source solution to web type is Cufon.

Why would I choose Cufon?

If your atypical fonts will be used minimally on a site, and
You need a specific typeface, and can’t use any alternatives (branding rules for instance).
You need text in another language (with non-latin characters).

Advantages:

Use any typeface you want (that you have the legal rights to use on the web), you must own a copy of the font you want to use.
Not too hard to set up, though more complicated than Typekit.
Free, accepts donations.
Excellent browser support.
There are a couple of really great free font libraries you can use with Cufon, but if they’re already free just use @font-face (see below).

Disadvantages:

You have to pay very close attention to which license you own for a font (and that you own it). Fonts aren’t free, they’re licensed. If you don’t own a web license, you can’t use it on the web. It’s illegal, you can get sued.
Copy and paste doesn’t really work, it’s not really using the font, it’s just outputting a bunch of code that makes it look like a font.
It produces an absurd amount of code to show your text. It’s essentially outputting each word individually with their own styles. This can really muck up your beautiful html if you’re not careful.

Stop the insanity!

@font-face

The original fonts-for-the-web-solution is making a comeback, but for all new reasons.

Why would I choose @font-face?

If you are extremely clear on your font-licensing options.
If you just want to use free typefaces openly available on the web.

Advantages:

Super duper easy to set up, doesn’t use any Javascript, all CSS.
Use any typeface you want, but again, licensing rules apply and you must have and own a copy of the font you want to use.
Real type on the page, copy and paste good to go.
Some free services will give you typefaces to use in this manner—fontsquirrel.com and google web fonts are both great libraries of totally free fonts you can use on the web with @font-face and not have to worry about being sued.

Disadvantages:

Legality is the biggest one here—you have to own a proper web license for the font, and you have to make sure that that license includes using @font-face. This is less secure (in terms of protecting intellectual property) than Cufon since @font-face requires you to upload the font to your server. Any savvy web user can take it right off your site, so some foundaries won’t allow you to use their fonts with @font-face.

Now that you have all the facts, go make something beautiful!

← Previous Post

comments powered by Disqus