EJS logo

Using web fonts in desktop design apps

Article illustration for Using web fonts in desktop design apps

[UPDATE 1: Daniel Rhatigan has pointed out that fonts.com allows the download of installable fonts when web font licences are purchased. So that’s one answer to the problem.]

[UPDATE 2: FontFont are also now supplying ‘comp fonts’ with every web FontFont purchased. This is essentially an installable desktop font with a licence that only allows the font to be used in design comps of the website for which it has been purchased. A great idea! Hats off to FontFont for extending such trust to the web designer.]

I feel like I’m always using this phrase: ‘It’s an exciting time to be working with web type right now.’ But it’s true, isn’t it? With enhanced browser support, the refinement of font delivery services, intelligent discussion surrounding screen rendering, and the emergence of a set of standards, it really is an exciting time for typography in web design.

Of course, we still have a long way to go, and one particular problem is that there is currently no way to create a design in a desktop application like Photoshop using fonts licenced for web use. Or, to put it another way: ‘I don’t want to buy an expensive desktop licence for a font family I only want to use on the web!’

Before I go any further, here are some quick points:

  • Invest money in typefaces. I get seriously angry when people don’t buy fonts; it’s a type designer’s lifeblood, and if we deserve to get paid for our design work, so do they. However, this post is about the scenario where the end use of a font is web design, and quickly throwing together a mock-up in Photoshop before writing CSS shouldn’t require spending several hundred £ / $ / € / etc. on a desktop licence.
  • It’s worth noting that this is only a concern with paid fonts. Obviously free fonts (such as those available from Google Web Fonts or Font Squirrel) allow you to download and serve via @font-face.
  • I try to spend as much time possible designing in the browser and these days I only use Photoshop for rough ideas, general directions, and quick mock-ups. However, from my point of view, that’s still enough time spent in the app to warrant the need for typeface choices beyond those I have installed on my system.
  • MyFonts offer a great system where you can buy a greatly-reduced web font licence when you buy a desktop font. However, what we need is effectively that in reverse.

Proposal 1: Try before you buy, based on trust

Although not specifically related to web fonts, Underware have a very interesting model, whereby they send potential customers a sample CD containing all of their typefaces, and allow designers to try the fonts out. If they use them for a project, it is then up to the designer to be honest and purchase a licence from the foundry. This trust-based model is a brave move, and although Underware should be commended for such bravery, it’s understandable that many foundries just don’t see this as an option. It’s a shame, because this could solve the entire problem I’m talking about here, but sadly we don’t live in a world where people can be relied upon to be trustworthy.

Proposal 2: A plugin to enable web font support

Dan Millar and I are doing a lot of work together at the moment, and while discussing our current project the other day, he came up with this idea: what if there was a plugin (for Photoshop, Fireworks, Illustrator, et al) that added support for web fonts directly in the application? I like this idea a lot. Perhaps Photoshop’s fonts menu could then look something like this:

Screenshot

It could even work without attempting to make the fonts installable (which web fonts should not be, of course). What if a new option existed that — instead than reading from the user’s internal font database — pulled in type from a font delivery service? In reality, it would be no different than using the online ‘type tester’ tools we’re used to seeing on foundries’ websites or in services such as Typekit and Fontdeck; except that the type tester would be fully integrated into the design app. The type frame might then look something like the following:

Screenshot

There’s another advantage to moving the typeface-choosing process to the cloud: you could then design on multiple machines without the need to carry your personal font collection around with you. Admittedly that’s not a huge win if you — like I — store your library in your Dropbox folder, but it would mean the end of scenarios like this:

Screenshot

Proposal 3: A real web design application

The trouble with the plugin proposal above is that it’s essentially a hack. Even if we saw a feature like this incorporated into a future version of Photoshop or its ilk, for me that would still not seem like the best possible solution. Why? Because the best possible solution would be to create an entirely new design app that had this kind of stuff built into its core. Just think of the possibilities:

Screenshot

Last year, Jason Santa Maria wrote an excellent blog post in which he highlighted the need for a real web design application and mentioned the desire to use external fonts and / or the WOFF format. I’m behind him all the way. Everyone agrees that Photoshop is not really suited to the web, and it’s fair to say that Fireworks — despite its purpose as a tool for screen-based design — falls short. Ironically, it’s InDesign that comes closest, with its style-specific menus that — as Jason pointed out — are much closer to the way we work with CSS than anything present in current versions of Photoshop or Fireworks.

It’s my firm belief that a new app created specifically for web design would be snapped up in an instant by virtually every designer in our industry. At the very least, I think there’s a very real need for a tool that displays typeface choices via an online service and, importantly, renders the fonts using an actual browser rendering engine.

If the right people got together and set the wheels in motion for this to become a reality, we could make this happen.

Let’s do it.

#ideasofmarch

[CREDITS: The blue ‘web’ button shown in these mock-ups is based upon the one used to indicate a web font licence on MyFonts. The hypothetical new app’s UI was mocked-up using elements from Vinilla.]