Since the invention of the Internet, text plays a major role on the web. For thirty years, the web has revolutionized our daily communications, interactions, and business transactions, 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 processing dynamic data. Even though the web embraced text from the beginning, they were not well integrated until recent years.

The First Website

On December 12, 1990, Tim Berners-Lee published the first website on the Internet after he figured out the concept of Uniform Resource Locator (URL), Hypertext Transfer Protocol (HTTP), and Hypertext Markup Language (HTML). 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) His site has only texts and links to other documents. As a result, it still works today as it did thirty years ago despite the changes and advancements in web technologies.

Type on Screen

In the mid-1990s, Matthew Carter designed Georgia and Verdana—two widely used typefaces for screen-based media. Commissioned by Microsoft specifically for texts on webpages, Georgia and Verdana were designed first in bitmaps to match the pixels of the screen resolutions at the time and then translated into outline fonts. For legibility and readability on screens, Carter designed these fonts with large x-height, open aperture, and generous space.

Image as Text

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 came with the operating system: Georgia, Verdana, Arial, Helvetica, and Times New Roman. The simplest alternative was to use image as text. Designers could use any typefaces available on their computer, but the downside was that each piece of text had to be sliced up individually using tools such as Photoshop and Illustrator. One popular site that used images as texts was The New Yorker. To be consistent with its printed publication, each headline on the newyorker.com 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 he publication was to slice up those images every day.

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, 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, 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.

Webfonts

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 webpages. 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 open-source fonts. With its simple API (application programming interface), Google has succeeded in making webfonts more approachable.

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 Google Fonts, many type foundries began to offer webfont services. In just a few years, webfonts have swept the world of web design.

Variable Fonts

On September 14, 2016, Adobe, Apple, Google, and Microsoft joined forces to introduce variable fonts at the ATypI conference in Warsaw, Poland. The power of this new OpenType font variation technology is in its ability to pack multiple fonts into one without increasing the file size, which is a huge advantage for delivering webfonts. Variable fonts solve the issue of loading individual font file to get various weights, widths, heights, styles, and other attributes. With flexibility, variable fonts provide an exciting opportunity for responsive typography on the web.

With the rise of responsive web design and the emerging of variable fonts, typography is going through a new transformation like never before. Unlike printed publications, 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 can be intimidating, but also challenging, rewarding, and exciting.