Web Typography in 2011
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.
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.
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.
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.
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.