A Brief History of Web Typography

In his presentation, “Universal Typography,” Tim Brown, Head of Typography for Adobe Typekit and Adobe Type, claims: “The web is the best place for text. Unlike a printed artifact, text at a URL can be searched, copied, translated, linked to other documents. It can be printed. It’s convenient. It’s accessible.” (Brown 2014) Since the invention of the Internet, text has always played a major role on the web. In its two and a half decades of existence, the web has revolutionized our daily communication, interaction, and business transaction, but the true transformation of typography to the web only took off in the last few years. For the first twenty years, the web had gone through many changes such as adopting web standards, using CSS for layouts, and focusing on content strategy. Even though the web embraced text from the beginning, they were not well integrated until recent years.

The First Web Site

On December 12, 1990, web inventor Tim Berners-Lee published the first web site ever on the Internet after he figured out the basic concept of the web including Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext Markup Language (HTML). In addition, he created the browser and wrote the software to run the web server. The project Berners-Lee launched was about the World Wide Web, in which he defined, “a wide-area hypermedia information retrieval initiative aiming to give universal access to a large universe of documents.” (Berners-Lee 1990) The site has nothing but texts and links to other documents. As a result, the site still works today as it did when the project was first published twenty-five years ago, which is impressive, despite the changes and advancements in web technologies.

Type on Screen

Anti Alias
The lowercase g in pixels with vector outlines. Design: Young Sun Compton, 2013.

In the mid-1990s, type designer Matthew Carter gave birth to Georgia and Verdana, two widely used typefaces for screen-based media. Commissioned by Microsoft specifically for texts on web pages, both of these typefaces were designed first in bitmaps (to match the pixels of the screen resolutions at the time) and then translated into outline fonts. To make text legible and readable on screen, Carter had meticulously designed these fonts with large x-height, open aperture and generous space. In addition to Georgia and Verdana, the web could only display system fonts such as Arial, Helvetica, and Times New Roman, which are available on all computers.

Image as Text

The New Yorker
The New Yorker’s old page using images as texts.

As graphic design was making the transition to the web from mid-1990s to mid-2000s, designers wanted to use more typefaces than just the handful that come with the operating system. The simplest alternative was to use image as text. One of the advantages of using this method is that designers didn’t have deal with font licensing. Designers could use any typefaces available on their computer, but the downside was that each piece of text had to be sliced up individually in tools like Photoshop. One popular site that used images as texts was The New Yorker. To be consistent with its printed publication, each headline on The New Yorker web site served up images as texts in order to use NY Vogue Goat as its branded typeface. Until November 2010 when the publication started using Typekit to serve its custom fonts, someone’s job at The New Yorker was to slice up those images.

Image Replacement Techniques

A major issue of using image as type was that text was not searchable, selectable, or translatable. To get around this problem, web practitioners came up with various image replacement techniques to fill the void. In April 2004, web designer and developer Shaun Inman developed a technique called Scalable Inman Flash Replacement (sIFR) to embed custom fonts in a small Flash movie. He also used JavaScript and CSS to make the text selectable.

While sIFR solved the issue of image slicing, its main drawback was relying on Flash, an Adobe’s proprietary software program for delivering rich contents on the web. Furthermore, setting up sIFR required some web knowledge. In April 2009, system engineer Simo Kinnunen created a new and improved technique called Cufón (Scalable Vector Graphics, SVG). Cufón used JavaScript to render generated fonts (SVG format) to the browser. This technique was easier to set up and did not rely on Flash. Although many image replacement techniques have continued to be developed and advanced over the years, they are not genuine web typography.

Web Fonts

Web typography is not a new concept. In 1998, the Cascading Style Sheet (CSS) Working Group proposed the support of the @font-face rule to allow any typeface to be displayed on web pages. Internet Explorer 4 was the first browser to implement it, but with no success. The proposal had no piracy protection or licensing agreement in place. As a result, @font-face was stalled for almost a decade.

In 2008, @font-face made a comeback when Apple Safari and Mozilla Firefox implemented it. In May 2009, Jeffrey Veen introduced Typekit, a type hosting service that let designers use high-quality fonts on websites with the ease of implementation and the worry-free of licensing and cross-browser compatibility. In just two years, Adobe acquired Typekit bringing more classic types such as Garamond Pro, Minion Pro, and Myriad Pro to the web.

In 2010, Google launched its own library of fonts for the world to use for free. With its ease of use API (application programming interface), Google has succeeded in making web fonts more accessible.

The @font-face rule is now supported in all modern browsers (Internet Explorer, Firefox, Chrome, Safari, and Opera) and mobile browsers (iOS Safari, Android, and Chrome). In addition to Typekit and Google Fonts, many foundries, including Font Bureau, FontShop, Hoefler & Co., and Webtype, began to offer web-font services. In just a few years, web fonts have swept the world of design.

With the rise of responsive web design, typography is going through a new transformation like never before. Unlike a printed publication, the flexibility of the web gives designers no control of their work. Whether through smartphones, tablets, laptops or game consoles, they have no idea how their work will be viewed on a user’s device. In order to accommodate the growing number of devices coming to the market continuously, they have to embrace the fluidity of the web and let go of the notion of pixel perfect control. Designing for the unknown could be intimidating, but that also makes web design challenging and exciting. Brown is right in his statement. The web is the best place for accessing text.