A giant step for typography on the Web
There is a buzz in the typographic and design communities right now about Web font embedding. The recently released version of CSS (cascading style sheets) includes an @font-face tag, which allows Web pages to use any truetype or opentype font. This works by downloading or serving the font to the end readers. (Internet Explorer uses the embeddable OpenType (EOT) protection scheme, while most other browsers are currently supporting downloaded raw font files.)
I’m not a Web designer; a kind description of my talents would be “Web-savvy print designer”. One of the reasons I’ve stayed away from Web design over the years was the dearth of typographic options available in Web design. That is exactly why this new capability excites me. This article only provides the briefest overview, but I’ve provided a list of information sources at the end.
Until now, Web designers had to use the roughly 20 Web safe fonts for all live type. Web safe fonts are the fonts that can be relied on to be present in almost all user’s computers. This is why most Web pages now use Verdana, Times, or Arial. (See this site for a more complete explanation of Web-safe fonts: http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html)
Any text in another font would have to be a piece of static art, or rendered via a Flash technique. In both cases, page file sizes increase, and the text was not universally viewable and searchable like HTML text is.
The new functionality in CSS means that Web designers will be able to specify any font for a Web page, and all that font will be readable across all platforms and devices. If there is an issue with an unavailable font, the end user’s browser or device will use another available font — so the content will always be readable.
Web designers are excited about this ability. Type designers are also excited, but concerned about free distribution of their intellectual property. The type design community and major foundries are working with browser developers on various protection schemes that will embrace this ability while respecting typeface licenses. Software developers and the Open Source community have their own set of concerns regarding this protection; they are tending to be leery of any sort of proprietary software solution. It is a complicated situation, but my impression is that we are close to working agreements that will allow a new level of typographic complexity and design online.
Here are a few resources on Web fonts:
+ This site demonstrates this new functionality beautifully: http://craigmod.com/journal/font-face/
(It only works in newer versions of browsers that support the latest version of CSS.)
+ This page on mozilla.org goes in to greater depth on the technology, with some examples: http://hacks.mozilla.org/2009/06/beautiful-fonts-with-font-face/
+ For the real geeks, www.webfonts.info is a wiki on Web fonts and all related issues
+ Ilovetypography.com has published a detailed summary of the current debate on licensing fonts for the Web:
http://ilovetypography.com/2009/07/20/web-fonts-%E2%80%94-where-are-we/#more-5742
+ Ascender Corporation is already licensing their typefaces for the Web, in advance of all the issues being decided, and is advocating a more open protection standard called EOT lite: http://www.ascendercorp.com/pr/2009-07-15/
+ Fontdeck, Typekit, and Kernest are Web services that will serve Web fonts, and will confirm rights as part of this service:
Kernest is online now serving free fonts: www.kernest.com
I saw a firsthand demo of Typekit, which has several commercial font designers’ work and will be live within the next 60 days. www.typekit.com
Fontdeck promises a similar service: www.fontdeck.com
—
Update, 1 November 2009:
There is developing news on web fonts on a weekly basis; here are some important updates:
+ Roger Black and David Berlow of The Font Bureau, Inc., gave a presentation titled “Web fonts are coming, web fonts are here” at Typ09 in Mexico City. (If anyone reading this attended the conference, it would be great to share what you learned.)
+ The popular blog boingboing.net is a high-profile early adopter of this technology, with mixed reviews and results. This article by Thomas Phinney goes through some of the issues that have come up with BoingBoing’s implementation of the technology, and some of the criticism (deserving or not) of their choices.
+ Typotheque is now providing the option for a web license for all of their fonts. The Frequently Asked Questions also provides a great guide to the @font-face rule and how to use it.
+ The In the Woods blog offers a great guide to implementing web fonts. The author goes through the process step by step, calling out specific issues and linking to useful tools. There is a clear explanation of how different browsers and operating systems render fonts, and tips on getting the best quality in every browser. (Internet Explorer and Windows both present specific challenges to a designer using @font-face, for example. This represents a large portion of web users, so its important to ensure your type looks its best for that browsing setup.) The author also includes source code and examples of @font-face in use. The best part is that this guide deals with using web fonts right now, without waiting for any further technical developments or licensing agreements.
Hopefully these items will help hasten the flowering of typographic diversity online.
—
Update, 3 November 2009:
Here are some great examples of the @font-face rule in use.
+ Typotheque has a sample layout, using 6 different fonts from their Greta and Fedra families. The link at the top of the page goes to an image file showing what the page should look like.
+ Nice Web Type has published some online type specimens built with the @font-face rule. The Bello and Proxima Nova specimen page also gives a first-hand review of the Typekit web font service. Part of that page’s header appears below; the headline pictured is live HTML type.
(Thanks to Bram Pitoyo for directing me to these two sites!)
—
(This article also appears in a slightly different form on Landor.com, and the updates appear as posts on the Landor.com blog.)