Elliot Jay Stocks is a designer, speaker, and author. He is the Creative Director of Adobe Typekit, the founder of typography magazine 8 Faces, one half of Viewport Industries, and an electronic musician.

Using web fonts in desktop design apps

Posted on 22 March 2011 26 comments

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.]

26 comments

  1. David Browning

    David Browning

    22 March 2011 @ 02:07PM #

    I’m sure you’ve seen the recent discussions around building a web prototype in place of using Photoshop/Fireworks/InDesign, and while I push back against it as an all-the-time solution, this may be one of those cases. If you build a mockup directly in the browser you could use Typekit to test your true typeface recommendations.

    Of course, there are definitely cases for just doing things in PhotoFireDesignShopWorks, in which case this would be a much-loved feature.

  2. Kyle Meyer

    Kyle Meyer

    22 March 2011 @ 02:09PM #

    While I dream of the day someone releases a proper web design app (Panic, please?!), I think the fontservice plug-in is a rather brilliant idea. Typekit already has an API code of some sort, and I’d happily pay for such a plug-in.

  3. Carson Shold

    Carson Shold

    22 March 2011 @ 02:09PM #

    I’ve come across this issue before, too. 95% of the design I do is for the web, so right away you are limited in what fonts you use. As you mentioned, there are a lot of options opening up that allow you to use new fonts ,(@font-face being my preference), but you are still limited. Without a way to mockup the design in Photoshop, I find myself ignoring a huge group of fonts before I even start.
    Your first proposal is great, in theory, but I do not think trust is enough to base such an initiative on.
    The second proposal is the most viable for the real world. It would be a simple addition to a designer’s workflow and allow them to stay in a program they feel comfortable with.
    I say you ship that section off to Adobe (along with the number of comments you’ll find here supporting it) and tell them to get their game face on.

  4. MikeNGarrett

    MikeNGarrett

    22 March 2011 @ 02:16PM #

    While I want to agree with your proposal for a new web design app, I don’t know if you would get the conversion from the standard design apps everyone uses. Maybe an initial early adoption from people like me that like to try out new apps and services, but asking someone to give up what they know for something entirely different is like asking a guitar player to play with his feet instead of his hands, possible, but not fun.

    That being said, I’ve read other articles preaching the advantage of going directly from paper to a web framework because of things like web fonts. What’s your take on that?

  5. John O'Nolan

    John O'Nolan

    22 March 2011 @ 02:20PM #

    I would pay $200-$300 for a new web design app to replace Photoshop, and I would happily pay $100 a pop for major upgrades every couple of years after that.

    I literally don’t understand why this hasn’t already happened.

  6. Ryan Glover

    Ryan Glover

    22 March 2011 @ 02:44PM #

    Great post, Elliot. I wholeheartedly agree that the web industry is in desperate need of an application that is tailored to our specific needs. It’s interesting to consider how much design could improve in the event that such an app existed. Re: fonts, though, for the time being I’d have to vote for your PS plug-in concept.

  7. Matt Reed

    Matt Reed

    22 March 2011 @ 02:58PM #

    As much as I agree with your notion of a web design app, I’d happily settle for the PS plugin idea. Kyle Meyer mentioned that he would happily pay for such a plugin, but realistically I think one of the makers of these popular web-font sites should step up and provide a solution free-of-charge. After all, it’s going to help them get more business. I think whoever does this first will quickly swing the design community in their favor.

  8. Jamie Brightmore

    Jamie Brightmore

    22 March 2011 @ 02:58PM #

    Some really great ideas Elliott, thanks.

    I would love it if there was a new app which combined the freedom of Photoshop with raw front-end coding, and potentially canvas animation. Put like that, it sounds like quite to ask, but it’s certainly achievable.

    It’s doubtful, but I’ve always liked the idea that maybe Apple would jump on this one-day, considering how fluent their apps are, their vast experience with Webkit, and their love of good design and typography. Their recent iAds Builder is testament to this potential.

  9. Tom Wright

    Tom Wright

    22 March 2011 @ 02:52PM #

    While it would be great to have web fonts available in any kind of designer app, unfortunately as far as I can see, the whole thing still comes down to trust.

    Solutions 2 and 3 seem better on the face of it, but essentially unless an app can distinctly define the design you are working on as “web” (unlikely), the font foundries would always be leaving the licensing decision to the designer rather than enforcing it from any reasonable technical viewpoint.

    The concept of limiting installation of a font on your system is only really effective if the font is available from no other sources, which is the point this idea is supposed to get around. If you are able to use a web font in a design app, that app is essentially bypassing the in built license enforcement in the web font formats.

    I’m not saying it’s not possible, and it’s something I’d love to see happen. But it’s always going to be a case of asking font suppliers to effectively do what Underware are doing, just with a better user experience…

    ..unless I’m missing the point entirely, in which case feel free to beat me senseless with an idiot stick.

    As a side note, solution three is something we’ve been seriously contemplating for a while. It’s just a matter of time and finance… if you find there are rumblings about making it happen in the near future, give us a buzz – there’s already a non-trivial amount of brain time put into it :)

  10. Phil Ricketts

    Phil Ricketts

    22 March 2011 @ 03:23PM #

    Elliot and Tom,

    Proposal 3 is so needed. I’ve thought for a long time that Photoshop (even Fireworks) doesn’t cut it when it comes to the web. So much time is wasted in the unnecessary multiple stages of production – especially when it comes to type.

    Is there anything that looks hopeful at the moment? All I’ve really seen are some text-editors that have a live preview pane (often webkit).

    Having just actually read the above comments, we can concur that this should exist.

    We need more discussion like this.

  11. Van Sedita

    Van Sedita

    22 March 2011 @ 04:55PM #

    My guess and hope, would be that a font service plug-in much like Kulur will be released with CS6. But I truly believe that option 3 is the only reasonable long term solution. I would think it could tap into a desktop install of resources and libraries but have it’s rendering of type and CSS styles be completely browser based. The thought of this possibility causes chills to run down my spine!

    Maybe this will be CS7? Do I dream this could happen in CS6?

  12. Johnny

    Johnny

    22 March 2011 @ 05:06PM #

    Option 3 just needs to be done. The problem I would imagine with a plugin is rendering. While you may be able to pull fonts from a web service, would it be possible to render somewhat similar to how a browser does? If not it’s almost a pointless exercise imo

  13. Will

    Will

    22 March 2011 @ 05:43PM #

    This is a fantastic post on a topic that is so relevant to us designers right now.

    I think that option 2 is the best bet as it seems the most feasible. Option 3 (a new program to replace Photoshop) would be a massive task to implement surely? Although just Imagine if Photoshop did tie in better with front-end development and the way we code with CSS – it would be incredible! I’m excited just thinking about the possibilities!

  14. Ira F. Cummings

    Ira F. Cummings

    22 March 2011 @ 06:48PM #

    I wish that solution 1 would be possible. It’s a bit utopian, and I certainly applaud Underware for doing it. It seems unlikely that other foundries will adopt that method, however, unless Underware were to prove that they were able to make as much, or more than the traditional approach.

    Generally, solution 2 seems OK, but it’s not really a solution I would embrace. The major issue being that Photoshop sucks the big one when dealing with type, not just when it comes to font choices. Where are the style sheets? Where is the glyph palette? Illustrator might be a more logical choice for designing for the web, in some sense as it fits these criteria, but most don’t use it since pixel precision is difficult (I’m guessing).

    I would more readily embrace solution 3, though it would certainly be the most difficult to implement. We’d have to wait for Adobe, or another smaller 3rd party software developer to create it.

    Another thought: what about the increased support of @font-face? I don’t have any experience with this…but I imagine that you can’t use the special @font-face files—sold by foundries like FontShop—on a local system. Maybe there is a way to enable them via a plugin, but have them print horribly, ala the days of fonts without printer files. That seems like a way to make most parties happy, with the somewhat lack-luster support of @font-face being the main drawback.

  15. Pat Dryburgh

    Pat Dryburgh

    22 March 2011 @ 08:53PM #

    Thank you for bringing this subject to the forefront, Elliot. Like you, I am finding myself doing less “designing” in apps such as Photoshop and much more right in the browser, and no small part of that is due to this very issue. In fact, when I first started designing in Photoshop and was just learning what “web safe fonts” were, I’d get so frustrated that I couldn’t use all the great fonts in my library on a website. Now we seem to have the exact opposite problem.

    I strongly believe the solution is similar to what Jason Santa Maria wrote a while ago. I want a solution that takes this stupid Photoshop > Slicing > HTML/CSS workflow and turns it on its head. I think the demand is there, hopefully there’s a company working on solving this problem as we speak.

  16. Mark Hobbs

    Mark Hobbs

    23 March 2011 @ 04:15PM #

    As I do agree with all of what is said…I would love to have all my fonts at my disposal. But my question is about the pricing of fonts and their libraries. Think about buying a font. It’s not cheap. But you can use it all you want in print, forever. Should we be worried about the pricing structure? Should web fonts be more or less expensive? Should font designers be paid more when fonts used on the web are served millions of times per day to millions of users? Realizing services charge a certain amount for a certain number of views, so should “web font packages” be treated the same way? Just playing devil’s advocate here…

  17. Christoph Zillgens

    Christoph Zillgens

    24 March 2011 @ 09:24AM #

    Hi Elliot,

    you’re making some good points here and I wish your proposal 1 would be reality. But as we know how anxious all those type foundries were when web fonts came up a few years ago, I’m pretty sure this won’t become reality.

    No. 2 would be great, just to test a Typeface in Photoshop to see how it interacts with your other design elements. I think it’ll not be easy to implement it while hiding the font file from the user. Also, as mentioned, font rendering will be an issue. For web typography it is essential to see it in the real environment, in the browser. Here, it’s also very important to look how a chosen typeface behaves on Windows, especially XP.

    No. 3 would be really great and I believe (at least I hope) that someone like Panic is working on it. Not only @font-face is important here. For example, you can recreate many Photoshop layer styles with CSS3 today and it would be great to have a GUI for this, so that you can design a button in this app and immediately have your CSS for it.Would be a massive time saver.

  18. Rachel

    Rachel

    24 March 2011 @ 09:45AM #

    I would love to have new design software so your third idea appeals to me most – it’s a great idea!

  19. Jimmy Ofisia

    Jimmy Ofisia

    24 March 2011 @ 08:39PM #

    Web fonts are meant for the web, so I think it’s best to keep it in the browser instead of desktop apps. Referring to proposal No. 3, I guess the easiest and most possible method is to ask web font foundries to improve their type tester tools with features such as background uploading and draggable (ajax?) type layers.

    For a quick mockup (sort of), I think web app/tool such as FontFonter is a good example to follow by other web font foundries. We can set our design as the html background and let FontFonter render the body content. Of course, since FontFonter is still limited to one typeface per preview, it would be great if they (or someone out there) improve it so we can specify multiple typefaces for h1, h2, h3, et cetera.

    There’s no need for a font-rendering simulator because we can simply use different browsers to view our mockup page.

  20. Trent Walton

    Trent Walton

    25 March 2011 @ 04:17AM #

    Well-stated & kudos on your proposal #2 idea. I’d love a photoshop version, though #3 is where it’s at. I’d happily throw my credit card at whoever decides to do this right first. Moral of this story & discussion: We want better tools and will pay for them. Let’s hope some enterprising folks are reading all this :)

  21. Brandon W. Oxendine

    Brandon W. Oxendine

    26 March 2011 @ 11:18PM #

    It seems obvious that number three is the ultimate, utopian solution here. I completely agree. In the mean time, I would point out that option two is sort of flawed since, as I understand it, it means the fonts are essentially installed in your design software, making them essentially installed on your computer. I.E. – you can use them in any design you want and save a jpg/gif/png/tiff of your design without buying the fonts. Doesn’t that sort of allow anyone to just use the fonts in anything they want including print? My knowledge of plugin development is very limited, but maybe there would be a way to prevent this?

    This discussion definitely needs to continue, as software is behind the needs of web designers presently. Loved Jason’s article a while back. It’s obvious that designers are looking for this problem to be solved. Thanks for the article, Elliot.

  22. Stuart Sandler

    Stuart Sandler

    25 March 2011 @ 03:16PM #

    Typegirl directed me to this post and since I’m the co-owner of Font Bros and the full owner of Mister Retro and Font Diner, I can appreciate the suggestion from all angles . . .

    I did discuss how and if this could work in Photoshop and the answer is simply it can’t . . . Unless Adobe opens up the API for fonts which they likely wouldn’t do, there is no way to add additional fonts (web or otherwise) into Photoshop unless they are added at the system level . . .

    Also, foundries would likely balk at the idea of allowing the fonts to be used in a realtime comping tool without distorting them in some manner to make them un-useable for final roll-out . . .

    FontFonter is likely the closest option to date but of course the site would already need to be coded up to use the tool rather at the Photoshop level . . .

    Just thought I’d throw some info in . . .

  23. Aram Stith

    Aram Stith

    01 April 2011 @ 09:13PM #

    Elliot FWIW the free fonts from google are available for download and installation on your local machine…

    cheers,
    Aram

  24. Elliot Jay Stocks

    Elliot Jay Stocks

    05 April 2011 @ 08:26AM #

    Thanks for all your comments and suggestions, ladies and gents! I was surprised to see how many people were keen on the Photoshop plugin idea. The plugin is appealing only because it’s an easier bolt-on to an existing workflow and perhaps more likely to see the light of day sooner, but I don’t think it would work well because it still relies on the underlying architecture of Photoshop. In reality, I think we all want a brand new app. Even if getting there is a tough journey, I believe it would be worth it.

    I also believe that it should be browser-based, which in one fell swoop would remove all of those ‘but should web fonts be usable on the system?’ concerns. As the end use is the web and browser-based rendering engines are essential for a type-friendly design app, the browser is the most likely the best way to go.

    @ Stuart Sandler: Thanks for the info. I suspected this might be the case! Option 3 it is, then…

    @ Aram Stith: Yep, that was mentioned in my second bullet point. :)

  25. Kyle Fox

    Kyle Fox

    12 April 2011 @ 07:32PM #

    I think you’ve identified what’ probably the last big unknown when it comes to designing with web fonts. I’m definitely +1 for proposal #3, and +1000 if Panic were to undertake such an app.

    Some foundries, like Process (http://processtypefoundry.com/) allow you a free 30-day trial license. I’ve used this in the past to evaluate the suitability of web-enabled typefaces for particular projects.

    I built a little bookmarklet (http://kylefox.ca/typekit-tweaker/) which somewhat improves the experience of choosing & designing with web fonts, but it’s still nowhere near as sophisticated as what we need.

  26. Dave Crossland

    Dave Crossland

    18 April 2011 @ 08:40PM #

    Is http://maqetta.org similar to your proposal #3? :)

© 2005 – 2014 Elliot Jay Stocks. All rights reserved. Powered by Harmony and tracked by Gaug.es. To keep updated with new content, you might like to subscribe to my RSS feed.