Typeography on the Web

Why is it so hard?
You open up Microsoft Word or fire up Adobe Photoshop and there are hundreds of fonts available to chose from. Why are there so few choices on the web? Well fonts are rendered in the browser so the end user has to have the font installed on their system for the browser to know how to render and display the font. System font differ from computer to computer. Some people might have a font installed because they purchased a software that loaded the font on their computer while some one else might not have the font. So the challenge is how do we get the fonts and all of the images and algorithms that make up a font transferred to the client? It is easy enough to transfer some files from server to client but the problem is the fonts are copyright protected and we can not just send the font files all over.


Old Hacks

There are a couple of ways people got around the limited number of web fonts available. One, they could right scripts that detected what OS and browser a client was using and then set a specific font for that environment. This still works but it does not give the developer complete control over how the site looks. One font might render slightly differently on a Mac versus a PC.
Another option was to create images of the text in Photoshop or another image editor. The developer would be able to use any font that they had on their system and they would not have to worry about where the client had that font installed. This works well and is great for design but is horrible for accessibility, usibility, and updatability of the site. Screeen readers can not read images, the text can not be copied, and it takes twice as much work to update a web page if the developer has to recreate an image every time they want to change a word.

New techniques


There are several easier was to use cool new web fonts on the web today. These solutions are not perfect but there are a lot of smart people working to make this a universal standard that will work for any browser on any platform. Even though @font-face has been around since CSS2 it is making stride in CSS3. With CSS3 @font-face, which allows the browser to download the appropriate font from the web server, can now use the .tff and .otf font standards. The problem is that most of the fonts that have been made for this format are not licensed for web use. Remember fonts take hundreds of hours of labor to make sure they look good in any platform at and size and at any resolution.
Google also has a service called Font Directory that allows you to embed a link to fonts hosted on Google servers so that the client does not have to download anything special. http://code.google.com/webfonts
There is also a cool project called TypeFace that uses JavaScript to render text. This does not work in all browsers but it is a cool open source project that aims to tackle this issue. http://typeface.neocracy.org/