If you’re tired of using Verdana, Arial, Georgia and the rest of the usual “web-safe” fonts in your web designs, I have good news. The daydream of easily incorporating custom fonts into any website has become a reality. For those of us who design and build websites, it’s like leaving the monochrome flatlands of Kansas to arrive in the magical, technicolor land of Oz.
What does “web-safe” font mean anyway? The term is a bit misleading. You might think that using a non web-safe font will cause your website to burst into flames. (That’s only true if you’ve used Comic Sans as body text.) Web-safe fonts are part of the operating systems of Windows and Mac computers and are used by your browser to display HTML text. Until recently, the list of web-safe fonts was limited to about 16 typefaces, including these classics:
- Arial Black
- Century Gothic
- Comic Sans
- Courier New
- Trebuchet MS
- Times New Roman
Although the technology for displaying custom fonts on a website has existed since the late 1990s (both Internet Explorer 4 and Netscape Navigator 4 had this capability), practical application has been hindered by a lack of fonts designed specifically for the screen, cross-browser incompatibility and licensing issues. Today, web font services have made practically any font “web-safe.” I’m going to take you through the history of computer typography and how we got from there to here.
Jason Cranford Teague’s webinar 6 Steps to Better Web Typography shows you how to use web fonts in your own web design work.
Computer fonts before the web
Long before computer-based printing, letterpress printing was the big game in town. Individually cast letterforms on metal slugs were arranged by hand into a frame, placed in a press, inked and printed to produce a single page. Font choices were limited by what was in stock. A large printshop might have 70 to 100 fonts available in fixed sizes (some for body text, some for headlines), but metal type was expensive to manufacture, and the cases that housed each font took up a lot of floor space.
In the late 1970s and early ’80s, computer-generated text was represented by bitmapped letterforms at fixed sizes. A bitmap is simply an array of pixels, arranged in a specific order. This was true for on-screen text as well as printed text. Font choices were limited by what typefaces the manufacturer provided with the device.
The standard for text and graphic output in the ’80s was the dot matrix printer. Bitmapped fonts and images were printed using a grid of tiny metal pins that impacted an inked ribbon and deposited dots of ink onto the paper. The amount of detail that could be produced depended on how many pins were contained in the print head. Early dot matrix printers had 9-pin print heads which yielded very basic letterforms, but by the late 1980s they had 24 pins. Most dot matrix printers came with a set of pre-installed fonts that the user would select before sending their document to print. Later models allowed for additional fonts to be downloaded to the printer’s temporary memory.
The first real custom fonts for personal computers were introduced with Apple’s Macintosh in 1984. Steve Jobs marketed the Mac to creatives and wanted its software to reflect his own sense of design. The first Mac contained 17 bitmapped fonts as part of the operating system.
Apple also licensed Adobe’s new PostScript printing language to include it in their soon-to-be-released Laserwriter printer, which could output scalable, razor-sharp text and graphics. The combination of Apple’s Macintosh PC and Laserwriter printer, Adobe’s PostScript printing language and Aldus’ Pagemaker software launched the desktop publishing revolution of the mid 1980s.
Browsers and fonts
In the early 1990s, the web grew in popularity as graphical web browsers such as Mosaic (1993) and Netscape Navigator (1994) allowed text and images to be viewed together in the same window. However, the browser controlled which web fonts were displayed until Netscape introduced the <font> HTML tag in 1995, allowing web developers to choose their own fonts and specify their location on the page.
In order to provide a set of web fonts that would be available to everyone, Microsoft started its Core Fonts for the Web program in 1996; among the original fonts included in the set were Georgia, Verdana and Arial (as well as the infamous Comic Sans). They were available as free downloads and eventually as part of Windows’ and the Mac operating system’s system fonts. Verdana and Georgia were the first typefaces to be designed specifically for the web. Both were created for Microsoft by typographer Matthew Carter to be readable, even at small sizes, on low-resolution computer screens.
In the early days of on-screen text, fonts were rendered as simple black-and-white bitmaps at fixed sizes. In the late ’90s, software was developed to allow fonts to be rendered using mathematical equations to “smooth” the curves of letterforms using semi-transparent pixels (known as anti-aliasing). This allowed on-screen fonts to emulate the elegance of their printed counterparts. Advances in font rendering technology were also helped along by ever higher screen resolutions.
Send in the custom fonts
At the beginning of the 21st century, hundreds of thousands of custom fonts were available for desktop publishing from dozens of type foundries such as Bitstream, Monotype, Adobe and Agfa (to name just a few). But web designers were still limited to just a handful of fonts, even though the web-safe list had grown since Microsoft’s original Core set to include fonts such as Tahoma, Book Antiqua and Lucida.
Technically, you could specify any font you wanted for your site’s HTML text, but end-users had to have that font loaded on their computer to view it. If they didn’t have it, your site’s text would default to Verdana, Arial or whatever web-safe font was listed as the fallback in the site’s code.
Even though the ability to view custom fonts in a browser has been around since 1998, it remained largely unused until recently for several reasons, including font licensing issues. There was no easy way to protect embedded commercial fonts from being downloaded from a website and freely distributed.
About four years ago, a company called Typekit began developing a method for serving up custom fonts on the web and licensing them on a subscription basis. A talented team of designers and developers, headed up by Jeffrey Veen, built a technology platform that hosts free and commercial fonts in a way that is incredibly fast, smooths out differences in how browsers handle type, and offers the level of protection that type designers need without resorting to DRM (digital rights management) agreements.
On the heels of Typekit’s launch, several other websites such as Font Squirrel, FontSpring and Webtype began offering access to custom fonts that could be served up remotely from their website or downloaded and embedded on the host site. And the list of websites that provide custom web fonts is growing every day.
The rise of mobile devices, smartphones and tablets has ushered in custom web browsers that are designed specifically for those viewing platforms. Thankfully, most of the current platforms (Android, iOS, Blackberry and Windows Mobile) support font embedding in one form or another, so the custom fonts you choose for your website will carry over to the mobile experience.
Now that web design has been freed from the limitations of web-safe fonts there’s no reason not to include a custom font or two in your next website. But if you’re a traditionalist who can’t understand why anyone would need more than a few fonts for designing websites, don’t worry. Matthew Carter recently created pro versions of Verdana and Georgia to include additional character sets and 20 font weights.