Back in the old days of the Internet, circa 10 years ago, people were just beginning to discover all the new cool things you could do with the web. Print was still around in full force in all its forms of magazines and newspapers. We even had individuals that made a living putting together and curating text based content. Over the years as more and more content has migrated to the web, one of the major limitations designers have faced is that they only had about 3-5 fonts that they could reliably use to format their text and be sure that the particular font they had chosen would exist on the users machine. Sometimes there would be variations, but those variations could never be guaranteed to render the same way in a users browser. Print was just extremely flexible and could provide a typographical brand and experience that the web simply couldn’t match.
As the web has continued to evolve through the browser wars and the waves of ‘web 2.0’ there was still very little change in the way text was shown in the browser. Over the last few years some of these issues have begun to be addressed, and there’s a growing amount of support in more modern browsers to express this new idea of web fonts. The core issue is that everyone is running on a different browser, different operating system, platform, or device, and each unique configuration has its own typographical settings, fonts, defaults and so on. Websites initially began experimenting with solutions to solve this issue by actually embedding a link to the font that the browser can recognize, download, cache, and use to render fonts it doesn’t already possess. But this also posed a problem: Type foundries don’t simply want their fonts to be embedded and freely downloadable and usable by whoever happens to come along and visit a site that uses one of their fonts. A font foundries whole business model is based around the licensing of the fonts they create, so having something ‘freely downloadable’ would never appeal to them.
As I have been doing some exploration on the latest and greatest of web technologies related to HTML5 for RECESS here at InterKnowlogy, I wanted to share two different approaches that I’ve found of companies that are exploring this somewhat new idea of web fonts. Chances are you may have even seen sites already that use this, but didn’t realize it or how they did it.
TypeKit – http://www.typekit.com
Google Web Fonts – http://www.google.com/webfonts
Each of these take two separate approaches that may or may not be viable to you as a designer / developer / company depending on your needs. TypeKit is arguably the more powerful and flexible options of these two, but is a paid service (although very reasonably priced). It has a large portfolio of professional grade fonts from many different foundries, including some many of the main fonts that are included in Adobe products (which I’m sure is a plus for many designers). They uses an internal obfuscation and customization process to protect the individual font from being used outside of the website that the license was purchased for. This has allowed them to negotiate deals with some of these foundries to license the fonts for web use through their company (and they’ve obviously been decently successful).
Google on the other hand, has opted for the freely available open source fonts. All the fonts used in its web fonts site are free to use for anything and are supported on a purely donational basis. This provides two advantages: All the fonts are freely available, and a single browser can cache a font and use it across any sites that also use that same font without redownloading it, this means there will be less overhead and a more consistent experience across sites that use Google Web Fonts. However, arguably the biggest downside is that the selection of fonts is much more limited. Google has done a excellent job of curating the available fonts it has to ensure that they meet some internal quality standards, but likely many of the industry standard fonts will never be available in Google’s catalog because of licensing issues.
There is some very cool things you could do with this, I’ve purposely left out many technical details in order to give a more general overview of web fonts. Hopefully this has been enlightening and has sparked some creative ideas for cool new things you could do with this technology.