Stuff & Nonsense Home

Where you’ll find designer, author and speaker Andy Clarke. The bastard.

Blogging And All That Malarkey

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.

Leave your comment

Josh

July 26 2009 @ 06:40am #

Pedantic yet helpful nitpick: your links to the TypeKit blog and the Andrew Ingram’s ask are wrong.

(Malarkey says: Thanks Josh. Fixed now and I’m flogging the dwarfs who wrote that code.)

Phil Baines

July 26 2009 @ 08:05am #

Hi Andy,

I must admit I am very interested in the idea of designing straight into the browser.

However, I’m not a brilliant graphic designer. I’m good at taking a design and implementing it as HTML/CSS. If I was to design in the browser I worry that it would take much more time.

I would probably be working along with a graphic designer - implementing some aspect of their design ideas - going back to the designer - making changes based on their input - all for something that the client might not like - sending us back to the beginning.

Using the more common method of flat-image concept developed in your software of choice, a front-end coder is not even called on to implement the design until the client has already signed off on the concept.

Can I ask, do you not find that designing straight to HTML/CSS lengthens the concept period? If not, why not?

Michael Kozakewich

July 26 2009 @ 04:57pm #

Phil’s question is one that I admit has never occurred to me, because I’m a developer and a designer (though more-so a developer). It does raise a good point, though I’d think the easy answer is that designers should just go learn HTML and CSS.

(I could see the difficulty: It would take two people to mock-up the site, and then if changes needed to be made it would take two people to make those changes.)

As for the font.
Overall, my reasoning is this: I’m designing a web-page, so there’s no reason I couldn’t use a screenshot of that text to mock-up the site. (Of course, I wouldn’t use it for other projects). But then, I haven’t been long in the typography world, so I have no clue what the standards or best-practices or social forms are. It seems a bit hard-line to me that a distinction is made purely on the physical system itself, rather than whatever the font is being used for.
(Is that what you meant? Or were you talking about people clipping text off their browsers whenever they wanted to use that font for a random project? Because that’s wrong.)

Andy Clarke

July 26 2009 @ 08:59pm #

@Phil Baines: Using the more common method of flat-image concept developed in your software of choice, a front-end coder is not even called on to implement the design until the client has already signed off on the concept.

— And that’s the change in workflow that we need to make, right there.

Can I ask, do you not find that designing straight to HTML/CSS lengthens the concept period? If not, why not?

— Far from it. I can design faster, absorbing the time that it would normally take for a ‘front-end development’ phase (or a good portion of it), not to mention that client approval is better and much faster. All in all, I can save around 70% of time and get a far better result in the process.

@Michael Kozakewich: I could see the difficulty: It would take two people to mock-up the site, and then if changes needed to be made it would take two people to make those changes.

— That’s why the why designer/developer false dichotomy is so wrong. Designers should learn to write markup and CSS as well as they use Photoshop, Fireworks or Illustrator.

Phil Baines

July 26 2009 @ 11:29pm #

70%! That’s an impressive percentage.

So, if graphic designers should go out and learn to code, do you also think that (in reverse) coders should go and learn graphic design?

I wonder which would produce better results, a designer-come-coder, or a coder-come-designer?

Tor Løvskogen Bollingmo

July 27 2009 @ 02:09am #

This is why renting typefaces is a bad idea.

Jeff Croft

July 27 2009 @ 03:09am #

Although I personally prefer the process of designing in the browser, I think suggesting that everyone ought to use this workflow is a bit heavy-handed. Everyone has different processes and workflows, and I know plenty of designers who get great results by doing static comps and then coding them (or having someone else code them). Your suggestion that everyone ought to be designing in the browser—that it’s the “right thing to do”—puts the process and workflow ahead of the end result. In my opinion, this is 100% backwards.

Personally, I don’t care how you get there. If the end product is a great user experience that’s reliable, maintainable, accessible, and beautiful, then you did your job. Period. It’s great that Andy and I prefer designing in the browser, and there’s absolutely nothing wrong with talking about our methods and why we like them, but suggesting that this method is “right” and others are wrong is presumptuous, egotistical, and short-sighted.

Andy Clarke

July 27 2009 @ 07:03am #

@Tor Løvskogen Bollingmo: This is why renting typefaces is a bad idea.

— Isn’t licensing any typeface for any use renting? And your alternative is?

@Jeff Croft: Personally, I don’t care how you get there. If the end product is a great user experience that’s reliable, maintainable, accessible, and beautiful, then you did your job. Period. It’s great that Andy and I prefer designing in the browser, and there’s absolutely nothing wrong with talking about our methods and why we like them, but suggesting that this method is “right” and others are wrong is presumptuous, egotistical, and short-sighted.

— I agree completely (except for the presumptuous and short-sighted part — egotistical I can handle). What I’m encouraging people to do is to let go of the fixed approach to designing that I hear about so often when I talk to designers, managers and clients on my travels and to experiment with new ways of working. These are ways that work for me better than any other. I care about the end result too, and improving how you get there improves that result.

Jeff Croft

July 27 2009 @ 07:39am #

That’s cool, Andy. I guess the tone was just a little too, “here’s how YOU should do it. This is the RIGHT way,” instead of, “here’s what I do, and it works for me, maybe you’ll like it too.”

I love hearing about other people’s processes and learning what I may be able to integrate into my own workflow, I just get annoyed when they make it sound like their way is the right way, and any other process is somehow “wrong” (c.f. Jason Fried).

> These are ways that work for me better than any other.

That’s awesome. But I think it’s important to recognize that just because they work well for you, doesn’t mean they’ll work well for everyone else. Everyone needs to find their own best approach. Hearing how you (and other designers) work is a great way to find new ideas towards that end. But let’s not get to the point where we’re saying, “this way is right, all others are wrong.” That doesn’t encourage innovation and experimentation with new ways of working—it limits it.

Tor Løvskogen Bollingmo

July 27 2009 @ 07:11pm #

Andy, we used to license a typeface once for webdesign, now we have to license it twice - and if (depends on the service model of Typekit) you don’t keep paying a fee, the typeface goes away and screws up your design.

Or maybe some issues comes up over at Typekit, and they have to roll back the typeface (like Amazon had to do) - and screws up alot of designs.

I haven’t seen these problems addressed.

David

July 28 2009 @ 03:18am #

I prefer to design using BBEdit where I can see how the page will be rendered by webkit browsers. I do prefer the handy tools it offers for writing html, css and also picking colors etc. - but I still think of it as basically designing in a browser.

I do like to work in photoshop, illustrator and also with drawing - I go back and forth when I am starting to work on a site, but over time I know my process will evolve. I really like the idea of not showing any flat image stuff to the clients regardless of how much design work is done that way.

That had nothing to do with web font delivery services- or did it?

Shira Gutgold

July 28 2009 @ 08:30am #

I agree with Jeff that the designing process comes down to personal choice. It’s a creative process and different deigners work better using different tools and methods.
I think that letting licensing issues dictate the creative process is just wrong.
None of the other options fully answers our needs either.
I think we will have to come up with a different solution that would enable designers to use the font while not compromising the foundries. Maybe something along the lines of a “trial” version of a font which is available for download but which is incomplete (with some characters missing, for example).

Commenting is not available in this channel entry.
Hardboiled Web Design

Hardboiled Web Design by Andy Clarke

How the latest technologies and techniques will make your websites more creative, flexible and adaptable. Get hardboiled in all formats from Five Simple Steps. Digital formats also available at Amazon.com, Amazon.co.uk and the iBooks store.

We’ve deconstructed this site to focus on content while we restyle. Expect wonkiness during the transition.