Ask any front end web developer to describe common challenges involved in converting (or “cutting”) a design. Ask a designer who’s savvy about front end web technology what the biggest creative limitation of the web “canvas” is. In both instances, you’d likely hear an earful about fonts.
Fonts have long been a classic example. A storyboard designer can use any font they have installed on their own computer to make a beautiful design, but hacks aside, web browsers have only been able to render text with fonts installed on the visitors’ computers. Since there are only a handful of fonts that are more or less guaranteed to be on all modern computers (think Arial and Times New Roman), websites have been limited to a handful of uninteresting choices.
Sure, headings that don’t change can be pre-rendered as images, but that’s not a solution for the vast majority of content that needs to be easily managed and edited (not to mention user friendly; try copying text out of an image). The web savvy designer has his or her creativity limited and web developers working with less savvy designers can end up being forced to play the “bad guy,” explaining to clients who love their design that the suggested typeface isn’t feasible.
Developers – being solutions oriented bunch – like to say that anything is possible: there are just trade offs and costs. So there have been some technical “solutions” out there for a while, although none have been especially great.
As previously mentioned, we could make all the text – or at least key text areas like headers – image based. Sounds simple enough, except that (a) it results in slower page loads (images are “heavier” than plain text), and (b) every time the client would like to add a new heading or edit an existing heading he or she would have to call the designer to render it.
An Adobe Flash solution, sIFR, has been around for a while. Unfortunately, this option is “sluggish,” especially on sites with considerable amounts of altered text (it often takes a few seconds for the text to “appear”), and prone to the quirks of Flash player.
Recently, we’ve seen the emergence of support for the “@font-face” property across all web browsers. This property allows developers to point the browser to a font library which visitors can then use as if it’s a native font. Think of it like embedding a font in a document. Perfect, right? Well, although Internet Explorer has actually been the longest supporter of @font-face among dominant browsers, it has its own proprietary implementation, and developers confront a conversion process (we highlighted this @font-face challenge when we expressed our disappointment in IE8).
More problematic, the new and compelling @font-face solution introduces a new kind of headache: licensing. Love the ubiquitous Myriad Pro that comes with Photoshop? Great. But don’t even think about dropping it on your website and using @font-face; you’re not allowed (licensed) to distribute that font across the web! If you can find a font with an open / free license and manage the Internet Explorer conversion, you may be in luck.
But in almost all cases, the final answer ends up being a mix of pre-rendered images and rolling back to one of those universal fonts. So there you have it: a new website design deconstructed because of browser, platform, and legal issues. But at least you have a less taxing, cross platform compatible site, albeit somewhat bland with those universal fonts all over it.
At least, until recently.
Enter a new solution: Typekit. Typekit come to us from the guys at SmallBatch Inc: “Typekit is the easiest way to use real fonts on the web. It’s a subscription-based service for linking to high-quality Open Type fonts from some of the worlds best type foundries.” The website owner or manager just has to sign up and pay a very modest monthly licensing fee. The service takes care of providing font libraries that work with all modern web browsers (including the proprietary IE format), and takes care of all the legal / distribution issues. Designers can choose from a list of hundreds of supported fonts.
There are Typekit plug-ins for one of our favorite content management systems, WordPress, making it even easier to implement. An official Typekit plug-in is even pre-installed with Automattic’s hosted WordPress solutions, WordPress.com and VIP.
Want to liven up your website with some type face diversity? Ask us to help you implement Typekit today. It’s quick and easy.