Brief History: Web Fonts

Subscription services, including Adobe Typekit, Google Web Fonts, cloud.Typography etc., can bring thousands of free and premium fonts to our websites, often with 3rd party JS and accounts or CSS if we own the fonts.

However, it has only been like this for 5-6 years. Web fonts are a modern technology, and yet many prominent sites don’t employ them. Some companies avoid it because they’re stuck in old ways, others because they don’t see the need for change.

My favourite example is Warren Buffett’s Berkshire Hathaway. Though what would web fonts bring? They have a market cap of $360B.

Fonts? What fonts?

In the early 90s, there were no web fonts as we know them today. If you wanted a font, you’d create an image in Photoshop of the words you wanted (in the font you preferred) and use that image on your website. The problem is that images with text are rubbish for SEO, and Googlebot and the other bots can’t read them. They’re also incompatible with screen readers and can slow down your site.

In 1996 Microsoft thought, Hey, let’s do something about this, and the Core fonts for the Web project was born. Fonts including Arial, Courier New, Times New Roman, Comic Sans, Impact, Georgia, Trebuchet, Webdings and Verdana were brought online. The fonts were also packaged for Macintosh and are included in most operating systems today.

The CSS2 spec is released

By 2008 we had 18 fonts available on most platforms for web use. These were served by reading the font files from the computer the websites were being viewed on. However, designers were to blame if a font didn’t exist on the viewer’s computer. If a website loaded Helvetica but your computer didn't have Helvetica installed, the website might not load properly.

CSS2 had accounted for this; fallbacks were being implemented.

font-family: Helvetica, Arial, sans-serif;

In the example above – as Chris Coyier states – Helvetica is the most awesome, so I want that first, then Arial for PCs since, hey, it’s pretty close, then fall back to whatever McSansSerif for crazyputers with like zero normal fonts installed.

For purists, this could also be:

font-family: sans-serif;

By default, sans-serif means Helvetica for MacOS, Arial for PCs and a generic fallback for anyone else.

The future of the web

Back when we had images as fonts, we couldn’t imagine today’s technology ever existing. Designers hoped someone was working on something, but the components to make it using images looked just fine. A company's brand could be woven into a design with type and everyone felt they looked the part.

Recently we’ve seen fonts online brought into email marketing and optimised for app use. A lot of this is a result of the WOFF1 file format. WOFF1 was developed to provide improved compression and thus lower use of network bandwidth, while still allowing fast decompression even on mobile devices. It uses content-awareness to load appropriately based on the network and device conditions. As we look forward, I hope WOFF2 will be included in developing more browsers – the uniformity and speed would be excellent.

Can everyone work together to quickly bring great fonts to the masses? As we shape our world around being on computers, it's fair we have a delightful, and beautifully type-set experience.