By: Ellen Lupton | November 13, 2009
Ellen Lupton’s conversation with Jeffrey Zeldman will appear in two parts. The second part is now available here.
Remember when the only typefaces you could use on a website were Georgia, Verdana, Helvetica, and a few others? We are now on the verge of a new age of typographic diversity. Jeffrey Zeldman, one the most outspoken and influential people in the web design community, agreed to answer some questions about the state of typography on the web. Zeldman, in addition to running the design firm Happy Cog, educates and inspires his fellow web designers through his blog A List Apart, “for people who make web sites.” In 1998 he co-founded The Web Standards Project, a bottom-up coalition that pushed browser manufacturers to use common technologies while pushing designers to create consistent, sustainable sites that are accessible to everyone.
Zeldman.com’s Daily Report in the early 00s inspired the site’s reading-focused redesign in 2009.
You just issued the third edition of your book Designing With Web Standards. In a nutshell, what are web standards, and why should a designer care about them?
Standards are essential to design; you can’t have design without them. Yet the web exploded so quickly that whole new categories of business and communication were born and killed for years before we even had a standard presentation language, or a single agreed-upon means of controlling the behavior of a web page—the “experience” part of the design.
Websites were hashed together with reams of non-semantic markup and streams of incompatible code, making these sites inaccessible to people with disabilities (or with the “wrong” browser or operating system), hiding content from search engines, and causing frustration and failure in mobile devices. Sites that were developed pre-standards cost at least 25 percent more to create than they needed to, stealing money from content, strategy, and design to pay for redundant code. Sites developed using these non-standard techniques became obsolete as new browsers came to market.
Thus clients spent money keeping up with browsers instead of designing for people—introducing “fixes” instead of features. Content was yoked to presentation, making it difficult or impossible to migrate to a new design or content platform. Owing in part to these limitations and maladaptations, serious designers and companies frequently viewed the web as some kind of third-class brochure, instead of recognizing it as the primary design and content/publishing platform of our age.
In 1998, some colleagues and I founded The Web Standards Project to persuade browser makers to adhere to a consistent set of standards. Having succeeded in that mission, we then educated our colleagues about the benefits of standards-based design. Web standards make your content findable by people and search engines (thus delivering the promised benefit of costly Search Engine Optimization techniques without spending time or money on SEO consultants). Combining lean semantic markup, CSS for design, and standard JavaScript for behavior enables us to make our sites accessible to all users, and facilitates content migration for redesigns, platform updates, and sophisticated publishing flows (i.e. push your content to print, mobile, RSS, and the “desktop” web without requiring a proprietary million-dollar content management system or the expensive consultants such systems require for operation).
The shift to web standards is no longer limited to a vanguard of “techie” designers and bloggers. Very smart and very large corporations and institutions have gotten on board, as have many governments (driven largely by accessibility requirements). And of course most of the so-called Web 2.0 start-ups choose standards-based design because it is light and agile and enables them to prototype, beta test, and find a market far more quickly than companies stuck in the old techniques.
Last but not least, standards-based design brings “real type“ to the web. Not that Georgia and Verdana aren’t real fonts—they certainly are, and great ones. But there’s a difference between designing with four fonts, and designing with access to all of them.
Web standards meet design excellence: AIGA.org, designed by Jason Santa Maria; produced by Happy Cog.
With so much attention going to digital books and online education, why did you publish a big hunky book with real ink on real paper?
I like books. Don’t you like books? You have certainly written quite a few.
There’s a digital version of Designing With Web Standards online at the O’Reilly/Peachpit Safari service; you get free access to the digital version when you buy the printed book. So if there’s a snippet of code or a set of links in the book that you’d rather copy and paste from the web than type while reading a printed page, you have the freedom to do that. You don’t lose the benefits of online media; we throw them in.
But for the most part, this third edition of Designing With Web Standards, like its predecessors, is a book of ideas and persuasion—not a book of code and links. And ideas and persuasion are worth saving and savoring in print. This is a book that designers buy for their colleagues and clients. Many people buying the third edition own at least one previous edition. (I even picked a color scheme for the series that encourages the impulse to collect.) There are people who read this book for pleasure—just as we do with certain other books about design. The printed book format encourages a relaxed and thoughtful reading experience, and the book was written to create that experience.
Peter Bilak’s digital foundry Typotheque licenses fonts for the web, allowing designers to use the CSS @font-face rule.
You devote a chapter of your book to typography. For years, there has been a bizarre bottleneck in the capitalist law of supply and demand: There is huge demand among designers for typefaces that can be used on the web, yet there has been a tiny supply of available fonts. I can think of no other industry that would ignore such a vast potential market. At last, we seem to be on the verge of a huge change in this situation. What do you think is the most promising new direction for making more fonts available to web designers?
The advantages of using fonts other than Times, Arial, Georgia, and Verdana have long been obvious to designers; it’s why web design in the 1990s was divided between pages done in Flash and HTML pages containing pictures of fonts—a practice t
hat still continues in some quarters.
Using real fonts instead of pictures of fonts or outlines of fonts provides speed and accessibility advantages.
CSS (the standard language of visual presentation for the web, created way back in 1996) has long allowed designers to embed fonts in their design via “@-font-face”—a line of code in a CSS style sheet that specifies the name and the online location of a font. For more on this, see “CSS @ Ten: The Next Big Thing,” by Håkon Wium Lie, the “father” of CSS, in A List Apart (http://www.alistapart.com/articles/cssatten).
The difficulty has to do with the fear of piracy. Thus, while modern versions of Safari, Firefox, and Opera all support @font-face embedding of TrueType and OpenType fonts, Microsoft’s Internet Explorer only supports @font-face embedding of Embedded OpenType (.EOT), a format that embeds fonts on the page but obscures them so they cannot be pirated. IE is the only browser that supports EOT, and while Microsoft has long hoped to make EOT a standard, other browser companies have resisted accepting it as one.
Then there are the foundries. If you don’t care about Internet Explorer and wish to design exclusively for Firefox, Safari, and Opera users—a dicey proposition in most cases—you can only use fonts that have been licensed for web embedding, and, to date, most fonts have not been (because there is no single standard, and because font foundries are afraid).
Happily, everything I’ve described is in the past. Foundries are beginning to cohere around several formats that satisfy the needs of type foundries, designers, and users. Most notably, many are focusing on WOFF (Web Open Font Format), created by Tal Leming and Erik van Blokland, with Jonathan Kew of Mozilla. Linotype, House Industries, Emigre, Hoefler & Frere-Jones, Mark Simonson Studio, and many others support WOFF, as does Mozilla, the open source platform behind Firefox. Things are shaking out quickly.
I’ve recently designed sites and pages using licensed web fonts, as have most of my colleagues; newly launched services like Typekit, which solve hosting, licensing, and technical problems, make it that much easier for designers to use real fonts in their web designs without worrying about browser and platform issues or EULA concerns.