Web Typography in 2011

0 +1
in Website Design

by Sage

Web design is 95% typography, as

Oliver Reichenstein controversially said in 2006—and yet web designers have historically had only the barest typographic tools at their disposal. When Reichenstein made this pronouncement, adding non-web safe fonts required a tool like sIFR or Cufón, and CSS2 allowed designer the bare minimum of typographic control: size, line-height, and tracking.

However, the state of typography on the web, though still far cruder than typography in print, appears to be passing out of its infancy: near-universal @font-face support, feature detection tools like Modernizr, crumbling legality hurdles, and JavaScript plugins for advanced control have led designers like Jon Tan to declare that web typography is “more vibrant today than it has ever been.” @font-face, part of the CSS2 specification, has finally achieved widespread support (IE 4+, FF 3.5+, Safari 3.1+, Chrome) thanks to type converters such as Font Squirrel’s @font-face generator, which allow developers to painlessly embed the 5 different formats required to achieve this level of cross-browser support. The days of being limited to six or seven web-safe fonts are a distant memory.

Of course, there’s still the legality issue: @font-face declarations require uploading font files to your server, which is frequently illegal (depending on your font of choice’s license). That’s no use to use an image-replacement service like Cufón or sIFR, though; for $50 a year, you can get unlimited access to Typekit’s library of hundreds of web fonts—totally legal, accessible, standards compliant, and, needing only one line of code to implement, easy.

If you’re still not satisfied, there are a number of JavaScript plugins out there that allow designers fine-grain typographic control, to the point Web designers’ typographic control is beginning to resemble that of print—in the right browsers, anyway.

Lettering.js, a do-all jQuery plugin, offers near-complete control of web typography, including kerning and editorial design. It’s also incredibly lightweight at 1.6 kb. The catch? To achieve the kerning effect, it wraps each individual character in a <span>, so your HTML becomes a mess and the CSS required to control it can be hundreds of lines. As such, it’s best used sparingly: for headers and effects only. Another caveat is that unless you place both jQuery and Lettering.js in the <head> of your document (rather than the bottom of the <body>, as is common practice), users will experience a flash of unstyled text—but avoiding this requires further slowing page loading speed.

Building on Lettering.js, Kern.js is a JavaScript bookmarklet that lets you adjust kerning directly in your browser, then spits out the required CSS: much handier than painstakingly adjusting CSS properties and previewing hundreds of iterations in the browser.

Fittext.js is a lightweight bit of jQuery, weighing in at under 1 kilobyte, lets developers create scalable headlines that fill the width of their parent element. This is an excellent tool to allow web typographers to imitate print headlines in a device-independent manner, while also furthering the aims of responsive web design.

CSS3, browser support for which is currently a little sketchy, promises to make it painless to achieve such common typographic effects as rotation, text shadows, outlines, and text gradients, adding to the limited tools of CSS2. For now, it’s best used as a progressive enhancement tool—or, if your rule of choice falls under its limited selection, you can use CSS3PIE to bootstrap a degree of CSS3 support to IE 6–8.

There is a cost, though, to all this increased typographic control: all these extra font files, JavaScript plugins (to say nothing of jQuery itself), and .htc files are additional HTTP requests; more code to download means slowing down your site. Is it worth it? In many cases, designers may find it worth it; certainly, it’s less demanding (and more accessible) than converting all your headlines to images.

Despite these tools, though, many designers believe that web typography remains crude and limited: “Typography on the Web is—despite all of the technological advancements—still in its infancy,” says Kyle Meyer. Inconsistencies in type rendering across browsers, operating systems, and devices, combined with technological limitations that have yet to be solved by a jQuery plugin, prevent designers from truly controlling nuanced typography on the web. But perhaps this will always be the case: web and print are different media, and web design will always have the constraint of needing to accommodate the needs of a wide variety of users. Designers like Ethan Marcotte argue that web design shouldn’t seek to emulate print typography: if “typography exists to honor content,” as Robert Bringhurst said, then typography on the web should exist primarily for information architecture across browsers, platforms and devices. Whatever your stance on the web–print debate is, it’s worth coming back to Oliver Reichenstein: if web design is 95% typography, it’s important to have typographic control no matter how you think type should be used.