Expanding the Web’s visual vocabulary

by Erik January 14, 2010 • 11:21 am • Comments (6)

The following article was originally included in the October 2009 issue of our OliveNotes newsletter, but we feel like the content is worth sharing with non-subscribers as well, so we’re republishing it here in its entirety. We’ve also included a brief postscript to update a few aspects of the article. As always, please share your thoughts in the comments section below.

The not-too-distant future of online typography
On Sunday, July 19th, at the TypeCon 2009 event, a panel of type and web industry experts met to discuss the state of web font (1) embedding. Their conversation focused on several recent technological advancements which will dramatically alter the way web designers use type, and may ultimately allow commercial fonts to be embedded in their designs.

For brand and marketing pros, unique embedded fonts will align interactive and print materials more closely, building a cohesive, consistent brand presence across all media and further distinguishing online identities from competitors without sacrificing the principles of standards-based web design and search engine optimization.

For those of us who have dedicated most of our design lives to working on web projects, acquiring the ability to embed unique fonts is roughly equivalent to finding out that, in addition to indigo and violet, we can now use all of the other colors (2).

10 Fonts and Photoshop – the Dark Ages
Throughout the brief history of the internet, designers have been forced to choose from a limited set of fonts when working on web projects. If you’ve spent much time online, you’ve probably become quite familiar with Verdana, Georgia, Arial and a few other select typeface families. In fact, the text you’re reading right now is set in Verdana, the big, bold headline at the top of this post is set in Georgia, and the byline on this page includes Arial (Helvetica’s web-savvy cousin).

While these three typefaces are not the only typographic options for web designers – depending on who you ask, there are somewhere between 10 and 20 typeface families that can currently be characterized as “web-safe” – they are among the most commonly used typefaces because they look good on screen in a wide range of sizes and, more importantly, because virtually everyone sitting in front of a computer right now has all three of those typefaces installed on their system.

By utilizing fonts on an end-user’s computer – as opposed to a web server – web browsers are able to render type quickly and designers are able to avoid any sticky legal issues regarding licensing and font file protection. Designers use web-safe fonts knowing that they can style a page and, in most cases, that page will look consistent to end-users (3).

Unfortunately, even though the user-installed solution has worked brilliantly, we designers are a demanding group, and most of us have been actively seeking ways to circumvent web font limitations since the first time we opened up Photoshop. In fact, Photoshop and other image editors provided an early work-around by allowing designers to embed text in images. By slicing up a layered Photoshop file into an HTML file, a designer could make a web site look exactly how he or she wanted it to look using an unlimited range of fonts, but at the expense of usability, accessibility and search engine optimization.

Web Standards and Font Replacement Methods – The Age of Enlightenment
The evolution of HTML and CSS (Cascading Style Sheets) as powerful typographical design tools eventually led designers to set aside the practice of embedding text in images in favor of a more flexible, accessible, web standards-based approach (4). With that said, the desire to utilize other non-web-safe typefaces has persisted. In recent years, innovative font replacement methods such as Scalable Inman Flash Replacement (sIFR), Facelift Image Replacement (FLIR), Type Select and Cufon have gained popularity. But, while each of these methods offers a viable way to use a wide range of typefaces in specific situations, each method also has a downside – increased load-time, server requirements, etc … – and none are truly meant to work as complete, site-wide text replacement solutions.

.Webfont, EOT Lite, Permissions Tables and a Bunch of Other Stuff – The Bright, Sparkling Future?
Using the @font-face CSS rule, web designers can already embed commercial fonts in certain modern browsers like Firefox 3.5 and the latest versions of Safari and Opera. Internet Explorer, however, doesn’t currently support standard font formats, and the current implementation of @font-face poses all kinds of licensing and font piracy concerns. In other words, designers, web browsers and font foundries still need to come together and agree upon a standardized method of licensing and protecting embedded web fonts.

Right now, several competing proposals are making the rounds among industry power players. The ”.webfont” proposal, the “EOT Lite” proposal, the “Permissions Table” proposal, and others all involve unique ways of including license permissions information along with protected font files.

So, where does that leave us? The usual suspects – competing browsers, platforms, governing bodies and World of Warcraft tournaments – will likely prevent any consensus from being realized for at least a little while longer, but, in the meantime, newly-developed web font embedding applications like TypeKit and Kernest offer promising alternatives for those of us that dream of one day viewing Meta and Trajan on our web sites as pure, selectable, scalable HTML text.

We may not have broken free from Verdana, Georgia and Arial just yet, but the ever-increasing number of proposals, methods and third-party applications seem to suggest that the promised future of embedded, commercial web fonts is now inevitable.

Postscript

Shortly after this article was originally published, the designers responsible for the .webfont format merged their work with the ZOT format and created WOFF (Web Open Font Format). I won’t delve into the technical advantages of this new super-format here, but WOFF has gained widespread support from type vendors and designers, and Mozilla will include support for WOFF in Firefox 3.6. It now seems likely that more browsers will follow Mozilla’s lead in the near future.

In addition to the advancements made on the format front, font subscription services have also made progress as TypeKit switched from an invitation-only beta preview to a full-fledged public release. While we haven’t yet integrated Typekit into any Olive projects, they do offer an impressive and steadily-expanding collection of fonts (including several from FontFont, one of my personal favorite type foundries), and, based on our early tests, site integration is simple and flexible.

Even though services like Typekit and Kernest already offer a nice variety of fonts, designers still face the reality of a limited library from which to choose. As a result, anyone hoping to use these services would be better off first browsing through the available libraries and selecting fonts for their designs, as opposed to choosing a font from their own libraries and then seeking out that font from one of the services. Designers might get lucky and find their brand’s font within the subscription service libraries, but … there are a lot of fonts out there and these services are still relatively new, so you may have to exercise some patience.

Thoughts? Reactions? Wildly inappropriate comments?

I’d love to hear what others think about this topic. Am I being too optimistic? Which approach seems to hold the most promise? Are there other benefits to embedding unique fonts that I haven’t mentioned? What typeface would you most like to see online?