Section Logo
SHARE THIS  
  
Facebook   Twitter   LinkedIn   Email  

Page1of 2
< 1 2 >
@font-face
Is “Good Web Typography” No Longer an Oxymoron?

by Angelynn Grant

The digital space is elbowing out print as the favored communication and marketing medium, but only recently have designers been able to make use of the same rich variety of typefaces in Web design as they have in print—that is, without resorting to bandwidth-hogging, accessibility-impairing text-as-image. Up until now, Web designers could only select from a “Web safe” palette of Times, Arial and other system fonts common to both Windows and Mac. Newer, “hacky” methods for rendering non-Web safe fonts, like Cufón and sIFR, which use JavaScript and vector files or Flash, have been devised, but they are tricky to set up. As technology and the Internet continue to shift how society communicates, branding and readability become essential. And an easy and smooth implementation of Web typography is pivotal for both.

Before CSS, HTML used the <font> tag to specify the typeface to be rendered by the browser. With CSS, this has been replaced by the font-family property, listing fonts by order of preference in a “font stack,” for example: “font-family: Verdana, Arial, sans serif.” Designers could take the chance that the viewer would have a specific non-Web safe font installed, for example, Futura Regular, and add it to the top of the stack. If not installed, then one of the “fallback” fonts is displayed, which can completely change the look of a site–something most clients would find unacceptable. In 1988, CSS2 introduced @font-face, a rule that can include a link pointing to a font on any server, which guarantees that linked font, when placed at the top of the stack, renders on the Web page–if the browser supports that rule. But, for over a decade, @font-face had little browser support. The opposite is the case today as most modern desktop browsers–plus many mobile ones like those on iOS and Adroid OS–do support font linking, also known as font embedding and that has made the new Web fonts marketplace explode.


theleagueofmoveabletype.com

One wrinkle: To display in a browser, a linked font in some form will be downloaded and downloading to a viewer who is not the purchaser was worrisome to the copyright holders–the foundries and type designers. Although it’s not obvious how to turn a font format in one’s browser cache into a working desktop font, it’s not impossible. Two font formats rose to battle it out as the adopted standard: Microsoft’s Embedded OpenType (EOT), supported by several versions of Internet Explorer, and Erik van Blokland and Tal Leming’s newer Web Open Font Format (WOFF). As of this writing, WOFF seems poised to become that standard. In late 2009, Mozilla announced Firefox support for WOFF and it gained steam from there. In April of 2010, Microsoft also joined with Mozilla and Opera to submit WOFF to the World Wide Web Consortium (W3C), the international body that sets guidelines and standards for the Web. As type designer Mark Simonson explains, “The advantage of both EOT and WOFF (to typeface providers) is that they can’t be used as desktop fonts as is. More importantly, the format itself tells people that the fonts are meant for Web use, even without digging up the license agreement. In the case of WOFF, the license information can even be included. Neither of these formats can prevent someone who is determined to ignore the license agreement. It is not especially difficult to convert a Web font to a desktop font, but doing so would be an intentional act, not something you could do accidentally.”

With these formats in place, covering more and more browsers, Web font vendors had the confidence to set up shop. You can purchase Web font licenses for either self-hosted fonts or subscription services that host the fonts for you. Self-hosting is similar to stock photography in that you make a one-time purchase for the rights to use the font on any site you wish. But it requires you to upload the fonts in the purchased formats to your server and write the @font-face declaration and CSS properties. Subscription services, on the other hand, host the font formats on their server, provide you with a line or two of code (that includes the font link) that you insert into your Web files, and guide you with the CSS. And you can easily place this code into many content management system templates as well, like Wordpress, Blogger and Drupal.

One of the most buzzed-about font hosting services is Typekit from Small Batch, Inc., a company led by longtime Web innovator Jeffrey Veen, author of The Art and Science of Web Design. Typekit hosts over 4,000 free and commercial fonts from foundries like FontFont, Bitstream, P22 and individual type designers like Simonson and they have an exclusive relationship with Adobe. Typekit gained popularity fast and was put to use in high-profile sites like the New York Times. Typekit is also integrated into the user settings at Posterous and About.me, a custom splash page site.



typekit.com

“Typekit was the first font service to launch with a subscription-based business model. And we’ve just passed a quarter of a million users,” says Veen. Subscription levels are based on the number of fonts used, the number of sites they’re used on and site traffic. For example, its free trial plan allows you two fonts from a limited library for use on one Web site that gets no more than 25,000 page views a month. In return for this free service, a small, clickable Typekit colophon “badge” is placed in the bottom corner of the browser window. Higher level, badge-free plans range from $25 to $100 per year with greater library access and higher traffic allowances for use on more Web sites. Adobe Garamond Pro, Underware’s fresh and lively Bella Pro, and Simonson’s charming Coquette are just a few of the typefaces Typekit offers.

http://image.commarts.com/Images1/5/8/3/38587_54_0_MTYyNTQ2OTg1LTMxMzEzMzA1MQ.jpgAngelynn Grant
Angelynn Grant is a Boston-based graphic designer, writer and educator. She has taught at Rhode Island School of Design, the Art Institute of Boston, Simmons College and MIT. You can e-mail her at designsharp@angelynngrant.com. In addition, Grant is the host of a jazz program on MIT radio, WMBR.