As anyone in the office will attest to, I am a stickler when it comes to typography. Poor typography can single handedly ruin a design, and is a tell-tell sign whether or not a designer is worth their weight. Ever since the advent of “web design” bringing good typography to the web has been a struggle for designers. There’s a constant battle between aesthetics and accessibility, and most of the time accessibility wins out. For good reason. With the introduction of CSS (cascading style sheets) our ability to manipulate and set type on the web has been greatly improved. However designers are still greatly restricted when selecting fonts for the web.

When it comes down to it designers basically have two choices: Helvetica and Georgia. While both are excellent type specimens, using the same two fonts over and over can be quite the buzzkill. Up until recently, if you wanted to use a non-web font your only option was to export the text as an image. This is generally not regarded as good practice for a couple of reasons: 1) Text in as images are not accessible. The text isn’t read by search engines and in turn kills your SEO. 2) The more images you have on a site, the longer the site takes to load.

The good news is that there has been quite a bit of innovation in the web font world as of late. While all of these solutions are improvements, they all come with their fair share of drawbacks. I’ll briefly detail some of the pros and cons of the most popular methods.

1. @font-face: A simple line of CSS allows you to embed fonts into a page. Seems simple enough, right? Wrong. Besides the fact that Internet Explorer doesn’t support it (big surprise) the @font-face opens up a whole can of worms when it comes to licensing issues. By embedding fonts on a webpage, anyone that accesses that page has full access to the font files. While this is good news for people looking to build their font library, it is certainly bad news for the already unsung font designer.

2. .EOT (embedded open type): Microsoft’s version of @font-face has been around since IE4. While Microsoft has opened up licensing for other browsers, no way in Hell is Mozilla or Apple going to adopt Microsoft’s way of doing things at this point in the game.

3. sIFr (scalable Inman Flash replacement): sIFr works through a combination of JavaScript, CSS, and Flash. Basically it searches out short passages of HTML that it then replaces with a Flash Movie on the fly set in a real font. Additionally, because the initial text is set in HTML, everything is still readable by search engines. While a good initial solution, sIFr has it’s limitations. 1) For size and speed reasons, it is only suitable for short passages of text. 2) Flash is a complex program making it very difficult to implement. 3) Enabled Flash blockers will block the text.

4. Cufón: Devised as an alternative to sIFr, Cufón works similarly in that it converts the fonts into a proprietary format and then renders it with a JavaScript engine. However it’s also similar in that it’s extremely slow and difficult to implement.

5. .webfont proposal: Widely regarded among type foundries as one of the best proposed solutions, .webfont would be comprised of a compressed file along with a data file. Within the file are permissions that would be read by the browser and displayed. While this seems like a winner, the proposal is still waiting to be approved by the w3c. Currently no browsers support .webfont.

6. Typekit: Perhaps the best and simplest solution at this point in time, Typekit is a 3rd party subscription service that hosts a number of approved fonts. By embedding a short piece of code into your page, JavaScript is called to deliver the font to the page. The obvious drawback is that only font’s stored by Typekit are available for use as well as the fact that there is no way to access the fonts in Photoshop, where web design and font selection ultimately begins.

For more in depth reading in the world of web fonts, visit the great I Love Typography. Web standards expertJeffery Zeldman also has a great write up on web fonts, and for more information on using Cufón, designer Cameran Moll provides a good tutorial.