A Typography Explosion: Web Fonts Explained
by Faith Towers
Gratefully, a new era of typography on the web has arrived, leaving behind an ugly past filled with style-cramping restrictions. Until recently, web designers were limited to using only a few web-safe fonts that were preinstalled in all major operating systems. But a new system of web fonts is now widely employed by designers, using a technique that downloads remote fonts with a CSS rule called
@font-face. But the transition from web-safe fonts to web fonts was not as simple as it sounds; reviewing the history as well as the current debates will shed some light on this relatively new phenomenon.
In 1996, Microsoft began the Core Fonts for the Web initiative, releasing a number of fonts to be freely distributed. These fonts included Arial, Courier New, Comic Sans, Impact, Georgia, Times New Roman, Trebuchet, Webdings and Verdana. This was a positive move in the direction of standardization; but considering the number of fonts available to print designers, the lack of typographical creativity available to web designers was frustrating. For over ten years, the web was almost exclusively based on these few fonts.
Designers found ways to partially circumvent this problem, using images, Flash and a technique called Cufon to render text instead of the native browser rendering. These were only somewhat effective, and each alternate solution came with its own set of problems. Using an image to render text meant increased file size, plus the text was not selectable, translatable or searchable. And Flash was not available on the increasingly popular Apple iOS platform. Cufon meant the addition of a new layer of complex scripts that had to be managed and maintained, and the text wasn't selectable.
With no sufficient substitute available, web developers began searching for a worthy solution to this growing problem. Finally, it was recognized that standardizing a CSS feature called
@font-face could solve the dilemma. CSS
@font-face was actually developed in the late 1990s, but because of browser wars and wide variations in the extent and reliability of its implementation, it wasn't widely used until 2009. The use of some special files and a small piece of CSS code defines a font family by actually linking to a font file instead of pointing to a preinstalled system font. It is then applied to web page elements by referencing it using the standard CSS
font-family property. Text created using an author-defined
font-family property avoids the problems associated with the aforementioned alternatives to web-safe fonts; the text is selectable just like it always has been with web-safe fonts, and it doesn't use any third-part browser add-ons such as Flash. While some extra loading time is required for a viewer's browser to download the font file, it is a modest addition.
To make the matter just a bit more complicated, though, there are several different font file formats that must be considered – each format not being supported by all browsers. Embedded Open Type Font (
.eot) protects fonts from being copied, but is used only by Internet Explorer. Web Open Font Format (
.woff) was developed especially for the web, offering the same protection as Embedded Open Type Fonts, but is supported only by recent versions of Internet Explorer, Firefox, Chrome, Safari, iOS and Opera – and Android isn't currently supported. Scalable Vector Graphic (
.svg) stores font data in vector format and is supported by Firefox, Chrome, Safari, and Opera but has been known to cause browsers to crash. Open Type Fonts (
.otf) and True Type Fonts (
.ttf) are the most widely used formats, and are supported by most browsers; but their IE support is limited.
To manage this situation, designers often write additional code that will cause a browser to use the best (or only) web font format that it supports. Needless to say, this requires a significant quantity of complex code. This entry barrier has helped to prevent a faster adoption of the technology.
Risks to Font Owners
The simplicity of
@font-face also raised questions about protecting the fonts from being stolen. While web font formats can offer protection against offline use, other font formats do not. Because the font files themselves are be exposed in the webpage code, type foundries feared that anyone with a basic knowledge of web development could steal font files from a website, or that web publishers could inappropriately redistribute a file they had legitimately obtained.
The Solution: Web Font Services
In response to these challenges, hosted web font services have gained widespread popularity. Typekit and Google Webfonts are the two most popular choices among web designers today.
Google Webfonts, on the other hand, is a free service that offers open source fonts that can be shared and distributed without concerns of royalties or licensing restrictions. They can be used in any way – commercially or privately – and can even be customized by the user. Google Webfonts is growing in popularity because it is free, but many people prefer Typekit because it offers more fonts and a higher level of quality. Fontdeck, Kernest and Webtype are a few other lower-profile web font services that offer the same basic functionality as Google Webfonts and Typekit, with varying features and prices.
Here on the Education Center, we use a combination of fonts from Typekit and Google Webfonts. If you want to get started with Google Webfonts, you may find this Google Webfonts starter tutorial helpful.
Navigating the new world of web fonts may take some getting used to, but they offer a clear advantage over the basic web-safe fonts of yesterday. The World Wide Web is a prettier and more expressive place thanks to the widespread availability of this new technology. Web designers may now pick from as many font options as print designers, allowing them more creativity than ever before.
Of course, with greater power comes also greater responsibility; it is now just as important for web professionals to have a basic understanding of how to mix and match fonts in an appealing way. But we'll cover that next time!