When the first website went live in 1991, it looked like this:
It's still live, you can view it here.
It was all text and hypertext. Which is to say, it was all words. And it was set it Times New Roman.
When you think about it, much of the internet is made of text, so it only makes sense to pay attention to its typography.
The history of web typography is closely linked to the history of the personal computer, and there is a lot to discover on both subjects, but I’ll try to cover some key points.
When the personal computer and the first affordable printer became available in the early 1980s, the world of design, printing and publishing was turned completely upside down.
Type design, which had to been a field accessible only to trained experts, became something people could experiment with. This created a quasi-revolution in type design, but it was also necessary: the interface for the early mac needed a new type of typeface designed for its pixelated screen.
The first Apple typeface was called Chicago, and was designed by Susan Kare “specifically for use on-sreen, initially in one size only, 12 pixels high.” The typeface appeared everywhere on the Mac, and helped define its visual identity.
Kare drew the typeface on a pixel grid with nothing to reference “other than the raw computer bitmap types of the time,” but she managed to express “the readable qualities of printed matter” with only pixels.
Her type has no curves, but the illusion of calligraphic stroke was create simply by pixel placement. To show when a menu item was unavailable, Kare also made a version of the type in which every other pixel was erased, so as to create the illusion of being “greyed out.”
She also designed all of Apple’s early icons, and other typefaces for the early mac.
When the first “Macintosh” was released in 1984 with its pixel-based font, it became the computer for “small businesses, schools, and some homes.” When the Apple LaserWriter printer went to market the year later, it allowed users to “design, preview, and print page layouts complete with text and graphic—an activity that became known as ‘desktop publishing.’
In the hands of designers, this platform became a space for completely new ideas in typeface design. Zuzana Licko, who was had just co-founded the magazine Emigre with her partner Rudy VanderLans, became one of the first to release completely experimental typefaces playing with the limits of a pixel-based grid.
Her typefaces, which she created for issues of Emigre, were both abhorrent to the field of type design and quickly sought-after by everyone else.
This typeface is in the MoMa collection, along with 22 others.
Though the typefaces were “rendered obsolete with the arrival of Adobe’s PostScript and with high resolution computer screen and printers,” it created a massive conceptual and technical shift in type design, paving the way for experimental postmodern typography of the early 1990s.
Emigre 15, on new typefaces
Emigre spread
Ed Fella Alphabet @ Cranbrook
Licko’s work on pixel based fonts also helped define the esthetic of both computers and the web in such a way that the two are now associated “in the same way that brushstrokes represent painting.”
Ever heard of Georgia and Verdana? Myriad? Comic Sans?
I'm Georgia, remember?
And I'm Verdana.
But I'm your true fave, Comic Sans!
Of course you have, because they’re all default typefaces that were created for the first personal computers, and which still live on all our computers today.
According to its type specimen, “Georgia was designed by Matthew Carter for clarity at small sizes on computer monitors : it features a large x-height and its thin strokes are relatively thick.”
Verdana, also designed by Carter, has “wide proportions, open letter spacing, [a] tall x-height and subtle distinctions between character contours to facilitate its legibility on computer screens.” Both of these typefaces were designed for Microsoft using bitmap alphabets scaled for different sizes on the screen.
Comic Sans was designed by Vincent Conrad who, seeing the above interface, thought "dogs don't think in Times New Roman!" and proceeded to draw a typeface.. for kids!
These typefaces were later released as part of Microsoft’s “core fonts for the Web” in 1996, which was an attempt to create a standard pack of fonts for the internet.
It included “the proprietary fonts Andalé Mono, Arial, Arial Black, Comic Sans MS, Courier New, Georgia, Impact, Times New Roman, Trebuchet MS, Verdana and Webdings, all of them in TrueType font format packaged in executable files (“.exe).” These fonts were designed to be highly legible on screen, to adapt for a variety of typographic voices, and to “support extensive internationalization.”
At the same time, Adobe Systems was founded and released PostScript, a programming language for desktop publishing, which made it possible for laser printers to print high quality graphics and allow fonts to be rendered at any resolution, eliminating “the need to build hand-tuned bitmaps for every single style and size of a typeface.
Adobe created “Adobe Originals” — designing and digitizing beautiful type for the web. These were extremely innovative at the time, and included typefaces like Adobe Garamond, Trajan, Caslon, and many more. You can read a full article series on this, here.
“When we made up the name [Adobe Originals], my intention was to do truly original designs, but the revivals turned out to be ‘original’ in the sense that both Caslon and Garamond had been revived, but not very accurately.” –Sumner Stone.
The early web, by its very nature, looked like early computers. The early web was limited to about 16 typefaces which were considered “web-safe” because they were included in the operating system of all Windows and Mac computers.
The technology for @font-face has actually existed for 20 years, but when it was drafted for CSS 2 in 1998 it did not contain any piracy protections — which meant that anyone could download any unlicensed font and use them for free, which would slowly destroy the industry of type design.
Because of this limitation, websites ended up with a set of “Web Standards” and the same fonts were visible across the web (though images were used for custom fonts for a while, which was a problem in itself since the files wouldn’t always load.) This was considered a positive by some, but as designers grew comfortable on the web, the need for access to more webfaces became apparent.
In 2008, Firefox and Safari implemented the @font-face rule, and type hosting sites like Google Fonts and Typekit were launched, enabling “cross-browser support and [providing] a range of typefaces for convenient one-stop shopping.”
This resulted in an explosion of web fonts, many of which were poorly optimized (proper optimization requires “hinting” a process by which letters are adapted for different browsers and for each size at which letters are displayed) and many typefaces would break from one browser to the next.
Other things about type on the web:
Rather than using pt sizes, type on the web uses ‘em’ which is a scalable unit “that is equal to the browser’s font size, so if the font is 14px, 1em is 14px.”
Type on the web can be interacted with! It can be animated! It can be scaled! That opens up the whole world of text as user interaction — text that shows rather than tells.
There’s a whole world out there on what digital type can do (and what it should or shouldn’t) but I’ll leave that up to you to investigate.
The fun thing about computers is that they, unlike us, are machines.. which means that they can accomplish gargantuan tasks in little time, but also that they can be used for purposes outside of what they were originally intended to do.
People have playing at the intersection of type and tech ever since the first personal computers — here are some particularly fun examples:
Imperfection and roughness are part of type history: in the predigital era, wood and metal letterforms wore down unevenly, and randomized differences were inevitable; truly consistent letterforms only became possible with digitized type.
FF Beowolf brings uncertainty back to typography: it features a randomization feature in its code dictating that its forms change shape every time they are printed, so no letter will look the same twice. "A certain roughness or varying unevenness is quite pleasing to the eye," van Rossum has said. " . . . For reading, sameness is not necessary: we can read handwritten text, type superimposed on flickering TV images. The sameness of type seems an arbitrary thing that we can do away with in certain cases."
In order to achieve this effect, they substituted the programming commands "lineto" and "curveto" in the PostScript code (PostScript is a computer program that describes what the outlines of letterforms are designed to look like) with their own command "freakto." "Freakto" causes a letter to be randomly generated with erratic outlines.
P. Scott Makela designed this typeface in the period in which digital processes were becoming accepted as mainstream tools for graphic and communication designers.
The past, especially in typography, is often an inspiration for contemporary designers; not so for Makela, whose design deemed it "dead.
According to him, Dead History "personifies a new attitude in type creation . . . the result of the computer's capabilities to function as the perfect assembling tool," Makela has said.
He began his design for Dead History by mashing together two existing digital fonts—Linotype's Centennial and Adobe's V.A.G. Rounded—to create something entirely new and unexpected. Makela used Dead History in a variety of his own designs.
There are a ton more examples, and there's a ton more to say about web typography (including its application with non-latin type), but time is limited so..
Some links: TypeTester · MoMA Digital Font Collection · Zuzana Licko Interview · Elements of Web Typography · Susan Kare Write-up · 5 Years of Adobe Originals · "Web is 99% Typography"