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 theyre 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 Ill call atypical type for the web. Im going to talk about a few options that I think are feasible, along with their advantages and disadvantages.

Typekit

Our studios usual go-to option is Typekit. Heres 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, doesnt 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:

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

Disadvantages:

1. 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 were talking like 2-25 million page views per month).
2. Youre limited to the fonts that are available in their library, but its pretty huge.
3. It can be a little tricky on IE, some fonts dont 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 cant use any alternatives (branding rules for instance).
• You need text in another language (with non-latin characters).

Advantages:

1. 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.
2. Not too hard to set up, though more complicated than Typekit.
3. Free, accepts donations.
4. Excellent browser support.
5. There are a couple of really great free font libraries you can use with Cufon, but if theyre already free just use @font-face (see below).

Disadvantages:

1. You have to pay very close attention to which license you own for a font (and that you own it). Fonts arent free, theyre licensed. If you dont own a web license, you cant use it on the web. Its illegal, you can get sued.
2. Copy and paste doesnt really work, its not really using the font, its just outputting a bunch of code that makes it look like a font.
3. It produces an absurd amount of code to show your text. Its essentially outputting each word individually with their own styles. This can really muck up your beautiful html if youre 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:

1. Super duper easy to set up, doesnt use any Javascript, all CSS.
2. 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.
3. Real type on the page, copy and paste good to go.
4. Some free services will give you typefaces to use in this mannerfontsquirrel.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:

1. Legality is the biggest one hereyou 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 foundries wont allow you to use their fonts with @font-face.

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