Stuff & Nonsense product and website design

Designing with @font-face delivery services

With all the buzz around @font-face delivery services such as Typekit, one question remains to be properly answered. How can web designers show concept work to their clients when the fonts they want to use are hosted (and protected)?


Last week on the Typekit blog, commenter Andrew Ingram asked:

How do you (Typekit) handle the fonts for development and testing environments? I can't afford to buy some fonts, but I could afford a subscription service. However, I need to be able to duplicate every aspect of the live appearance on my development and testing servers.

Typekit's Ryan responded:

Our URL binding allows for multiple domains — you're free to allow access to the fonts from example.com, staging.example.com or even localhost.

Andrew's question (and Ryan's answer) are important for designing as well as for development and testing, particularly for designers who make, then demonstrate their designs to clients using static Photoshop or Fireworks visuals.

The issue of course is that when you license a font for use on your computer, you're doing exactly that. You don't own the font. While it's perfectly right and proper to distribute an image of a typeface, you mustn't distribute the font file itself, on the web or anywhere else. That's the whole reason for Typekit and its siblings.

When you license a font through Typekit to use on a (specific) domain on the web, you're doing exactly that. You don't own the font, nor do you have a license to use it on your computer for use in Photoshop or Fireworks. Two usages, two different and separate licenses. Sounds perfectly fair and reasonable to me.

If you're a designer who still designs static mockups of web pages, this doesn't help you much does it? If you don't already have a font license for computer use, how can you design and demonstrate? What are your options?

  1. You could carry on designing in Photoshop and use a typeface that is similar to your final choice or a more generic serif or sans-serif alternative. Of course then you'll probably leave the door open for having to explain the difference between your visual and the final product. You'll also face the issue that the measure, leading and sizes will also be different for individual typefaces.

  2. You could buy one license for your computer and another for font embedding. There's nothing wrong with this, and if, like me, you pass on the cost of typefaces to your client's project, it's no skin of your nose.

  3. As my friend Simon pointed out to me last week, some people might resort to taking screenshots of Typekit samples from its interface and pasting them into their static visuals. Yeah, and some people vote Conservative. I don't understand why you'd do that either.

You know what I'm going to say I expect? It's time to stop showing clients static design visuals. I don't want to go over old ground, but designing in a browser using markup, CSS and real content, setting up localhost as an option in Typekit and designing with, and showing clients designs that mean something more than a frozen imitation of a web page ever can, is the right thing to do.

Font embedding is bringing a whole new set of opportunities to designing for the web. Use it as an opportunity to improve your web design methods too.


Written by Andy Clarke .


Would you like advice and inspiration on making better designs for the web?

Get monthly design inspiration and insights based on my 25+ years of experience. View some recent emails, sign up today, and get:

    I promise never to share your email address and you can unsubscribe with just one click.

    Free set of Layout Love grid templates when you sign up today.

    Hire me. I’m available for coaching and to work on design projects.