Brief History of Webfonts

Essays by Peter Biľak
1 433 words8 min read
English
webfonts issue scheme intro

The web today is rich both in content and form, pervading our lives with such a wide variety of media experiences that it is difficult to imagine our world without it. Just 10 years ago, however, there were only 10 or so fonts that that could reliably be used in web design, and that only if you were writing in Latin script. If you happened to be writing in Russian, Hindi or Arabic, there were virtually no usable typefaces at all. The situation was similar to that of newspaper typography some 100 years ago: most English-language dailies used the same typefaces (largely variants of Clarendon), and choices for non-Latin-based languages were extremely limited because print technology had evolved around the Latin script. So how did we get to where we are now in such a short time?

clarendon

A detail from four different British newspapers (The Daily News, The Times, Manchester Weekly Times, Hamshire Telegraph) from around 1900s, each using the same typeface.

1991 saw the birth of the World Wide Web and the introduction of HTML, technologies that facilitated the sharing of text and other types of digital files in a radical new way. Of the earliest browsers, user-friendly Mosaic soon became popular, only to be eclipsed by Netscape Navigator, which was in turn eclipsed by Internet Explorer, the browser that Microsoft installed by default with its Windows operating system, a tactic that allowed it to achieve a 90% market share by 1997.

At that point the World Wide Web Consortium (W3C), the internet’s main international standards organisation, had released the first version of Cascading Style Sheets (CSS), giving designers powerful tools for webpage layout, including font styling rules that provided basic control over typography. There was, however, a catch: while images could be loaded to webpages from remote servers, fonts could be loaded only from the client's computer. There were a number of reasons for this. Firstly, the dial-up connections used at the time were prohibitively slow. Secondly, text rasterisers required manual hinting of fonts, so very few fonts were sufficiently legible at small sizes across different operating systems. And finally, font foundries were reluctant to expose their products to piracy, so font licenses generally prevented webpage owners from using the fonts online.

Thus the best bet for a web designer trying to control the typography of a page was to choose a font that was likely to be installed on the user’s computer, and in a world dominated by the Windows operating system, that meant using Microsoft’s proprietary fonts, the now-familiar Andale Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings. That still didn’t guarantee a consistent layout for every user, since different versions of Windows had different fonts, and Mac OS didn’t include the full set. Still, at least it was possible to specify whether a given block of text should be rendered in serif or sans serif, and to set a list of desired fonts in order of preference.

The first method of embedding fonts on the web was probably TrueDoc, an outline font standard developed by Bitstream, one of the first digital type foundries. Netscape announced support for it in 1996, but there were no free tools to create webfonts in TrueDoc format, and it never gained traction.

In 1997, Internet Explorer 4 started to support remote font loading via Embedded OpenType (EOT), a font format that Microsoft had developed earlier for use in Word. It reduced download times by subsetting and compressing the font data, and it also provided some level of encryption to protect the font files. On the other hand, it was difficult to use and required Microsoft’s proprietary Web Embedding Fonts Tool (WEFT). Microsoft pushed for adoption of EOT as an open Web Standard, but the format never gained widespread acceptance and was ultimately rejected by W3C.

The second version of CSS came out in 1998, introducing a number of new layout capabilities, including bi-directional text, and new font properties such as the relatively obscure @font-face, which allowed automatic downloading and temporary activation of remote fonts. Because of licensing concerns, however, browsers were hesitant to implement this feature, leaving webpage designers with limited options: using EOT, using static images of text, or continuing to restrict themselves to Microsoft’s collection of web-safe fonts.

[signup]

Web technologies continued to develop, however, changing the online environment. New browsers such as Opera, Mozilla Firefox (the direct successor of Netscape Navigator), Apple’s Safari and Google’s Chrome started to eat into Explorer’s marketshare, competing for users by introducing more and more features. In 2008 the beta version of Safari 4 implemented @font-face support for TrueType fonts, while the beta version of Firefox 3.1 implemented support for both TrueType and OpenType.

Type foundries and font developers followed this development with both interest and some level of trepidation, since widespread support for @font-face meant not only new possibilities for advanced typography on the web, but also new potential for piracy. Unsurprisingly, it took an outsider to challenge the status quo. In May 2009, San Francisco-based company Small Batch, Inc. announced the Typekit project, a subscription-based ‘middleman’ service for designers and developers, which allowed safer embedding of fonts via the @font-face CSS declaration and some JavaScript. Small Batch contacted leading type foundries to secure licensing deals for their future Typekit collection. To appeal to type designers, they emphasised a file security scheme that would subset fonts and divide them across several files that could only be reassembled by Typekit’s JavaScript.

Typekit FAQ 2

Presentation of Typekit service from May 2009.

Typotheque was one of the foundries that Typekit contacted at the time. Their request came as a surprise, as Typotheque was working on a similar solution: its system would offer webfonts hosted on a global network of servers, but instead of requiring Javascript it would modify the font files to both streamline their size and make them unusable in print through a combination of file obfuscation, font table removal, subsetting, and checking HTTP referral headers to prevent unauthorised use. Because the webfont files were created on the fly, Typotheque webfonts could even generate multiple subsets that would allow the use of OpenType features such as small caps, numeral styles or stylistic sets.

Typotheque launched its service on October 20, 2009, becoming the first type foundry to offer commercial webfonts. A month later, Typotheque also launched an API that allowed other foundries to use the same webfont service. Typekit launched shortly thereafter on November 11, 2009 (and was acquired by Adobe two years later). In 2010, Google introduced its free service, Google Web Fonts, and Fontdeck, a now-retired Typekit competitor, was also launched that year.

webfonts issue scheme

Typotheque internal development notes from early 2009.

These developments triggered a new discussion about the future of webfonts, and software developers and type designers joined forces to propose new font formats specifically for use on the Web. One of them, originally named .webfont, later renamed Web Open Font Format (WOFF), has gained wider support in the type community and been warmly welcomed by most large and small type foundries. Developed by type designers Erik van Blokland (LettError) and Tal Leming (Type Supply) and software engineer Jonathan Kew (Mozilla Corporation), it held the promise of a streamlined, web-friendly, interoperable font format for the future. Its final draft was published as a W3C recommendation in 2012, finally establishing a single font format that could be supported by all browsers.

In today’s ever more globalised and interdependent world it is increasingly important for businesses, governments and humanitarian causes to reach diverse audiences and communicate across cultures. Web typography plays a large role in enabling these connections, and today for those who work with complex scripts such as Arabic or Hindi it is simpler to publish texts on the web than to set them in leading applications like Adobe InDesign. The web has been quicker to adopt new technologies such as OpenType’s Variable Fonts feature, which is now supported by all browsers but is still not available in desktop design applications. Concerns for DRM no longer have to override concerns for broad accessibility and usability.

Print typography has come a long way since the days of Gutenberg, having made the transition from physical types to digital designs, but web typography has caught up and even surpassed it. Looking at how far we have come and how fast, we can be optimistic about the diverse, multicultural, inclusive future of the web.

  • bilak square 900

    Peter Biľak works in the field of editorial, graphic, and type design. In 1999 he started Typotheque type foundry, in 2000, together with Stuart Bailey he co-founded art & design journal Dot Dot Dot, in 2012 he started Works That Work, a magazine of unexpected creativity, in 2015 together with Andrej Krátky he co-founded Fontstand.com, a font rental platform. He collaborates with the choreographer Lukas Timulak on creation of modern dance performances, and together they started Make-Move-Think.org, a foundation for interdisciplinary artistic collaborations. Peter is teaching at the Type & Media, postgraduate course at the Royal Academy of Arts, The Hague. Member of AGI (Alliance Graphique Internationale).