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.
For the front end web developer, it’s all about taking someone else’s creative – often designed on a highly controlled and extremely flexible canvas like Adobe Photoshop – and implementing it in the much less controlled and much less flexible world of HTML/CSS/JavaScript. Sometimes, a design that look great as a static image or storyboard just doesn’t translate well into web code, especially when not-so-design-sophisticated clients have to maintain the content and some of the imagery.
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.
Web safe ("universal") fonts
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.
The struggle for custom fonts indeed has been a major challenge. I have often wondered how can a designer add some dimension to the design when the only choices are a handful of fonts.
I have herd of typekit, and look forward to checking it out…
I love that they have a free account to try first…
–
Thanks and Regards
Noel for Nopun.com
a graphic design studio
While I love the idea of thousands of fonts being available for the web, I cringe at the thought of this going mainstream. Imagine what the web will look like when this kind of technology can be used by novice designers. (While entrancing like a train wreck, it makes me think of GeoCities.)
That aside, I have been liking the more limited Cufon solution, where you convert a font into a string of javascript coordinates. No licensing problems, as you aren’t actually distributing the font anymore, but its shapes as vectors to be drawn by the browser. It’s quick to load and cache, and since it is hosted with the rest of the website, there is no subscription fees. Plus, it puts more control of the font into the hands of the designer.
The one drawback I have found is that the type is no longer cut-and-paste-able. In this world of conscious copyrighting, though, for some people that may be a benefit.
Shades of “blink” and “marquee” tag, eh?
I don’t think we should be afraid of easier and more powerful web tools for fear of novices ruining it.
I should have mentioned Cufon in the article. It’s a step up – performance and usability wise – from sIFR, but not a big one in my opinion. We had to remove Cufon in favor of sIFR on a high traffic website recently, since it was extremely wonky with special formatting like link underlines. I dislike it because it takes some very simple HTML code and – upon rendering – generates hugely convoluted sets of tags (I think it’s SVG based, isn’t it?).
And again, while that might be “ok” for headings and limited content boxes, I think you’d agree it just isn’t a viable solution as the site’s “primary” font face.
[...] solutions for adding custom font faces to text without relying on manually created imagery (now, we endorse solutions like TypeKit). Today, Flash is still the best solution for delivering streaming audio and video on the web. And [...]