I guess a more suitable title might be ‘is Photoshop still an appropriate tool for designing typography on the web?’ But that lacks the dramatic appeal of the above.

Like many of you, I have always used Photoshop to create mock-up compositions of my designs. For as long as I can remember it has been the industry standard and the software of choice for most designers I have worked with. I have spent weeks designing pixel perfect layouts, grouping elements into hierarchical folders and labelling all of my layers to make the transition from beautiful mock up to code as smooth as possible.

I would be full of enthusiasm, energy and excitement explaining my designs to a developer, toggling layer states on and off to try and illustrate my vision through Photoshop but would always be slightly disappointed as my shiny, polished design was transformed to what I would see in the browser. Sure, it would look like my design… And I kind of recognised the typefaces but it lacked that sharpness that I remembered from my compositions. It wasn’t that the developers hadn’t coded it well, more that the typography I had created in Photoshop had not translated into code.

What you see isn’t always what you get

When choosing fonts there are few things more important than whether a font is easily legible or not. In Photoshop, that is not so much of a problem because everything looks great. It doesn’t matter what font you use, at what size or weight (within reason) as it will render perfectly on screen.

Unfortunately, this does not extend to the browser. Often when viewing my design in the browser, the relationships between elements and type were all wrong. The font sizes and line heights that I had attributed to styles in my photoshop composition would not look the same as they would in the browser. If I had designated a 20 pixel margin above the title in my designs, that distance may have changed as the line height of the header would have an effect on size of the margin, something that would not happen in Photoshop. I would then have to start the long and tedious process of the dreaded ‘design tweaks’.

Everyone hates design tweaks

Trust me it’s not just the developer that shirks at the idea of a designer sitting next to them asking them to ‘increase the body copy line height by two pixels’ then having the developer make the CSS change and commit …. Enter. ‘Actually, 1 pixel smaller’ … Enter. ‘Maybe it was better how it was’. This kind of tweaking of the CSS bit by bit to see the results in real time via the browser is time consuming and not conducive to creativity. The developers quickly get fed up spending the day repeatedly changing what they see as the smallest of details that will make no difference, and designers are not able to experiment by quickly and easily changing typefaces and styles for ones that will render better in the browser.

So what now?

For designers who have an understanding of CSS, you can use tools like Firebug to effectively make your own design tweaks in the browser, noting down all the CSS changes in one document that you can then pass on to a developer to implement. This is effectively the same as sitting with a developer and making CSS changes but far less tedious for the developer and will also allow the designer to experiment further with sizes and styles before making a decision. Although this is a good tool for inspecting and changing parts of the HTML and CSS, you will lose any changes you make as soon as the browser is refreshed, which can be very annoying if you have changed lots of elements and not noted down all your adjustments.

You can use the Firediff plug-in to save a record of all the changes that you make within Firebug, which is great as it saves you having to note every change down in a separate spreadsheet for later. The biggest issue with this method is when you begin to introduce web fonts into the equation as any chosen fonts must be installed to your type kit or they will not appear in the browser. This makes things far more difficult and less free to experiment easily with different fonts as you can’t just quickly trial fonts.

Designing in the browser

Services like Typecast make it much easier for designers to work with web fonts and I pretty much do all my typography for the web using it. It allows you to create typographical mock ups (just like you would in Photoshop) using its visual interface to assign fonts, styles, weights, colours, line height, margin, padding and more to your typography. The best thing about using Typecast is that it is all working within the browser so you are making decisions on type exactly as it will be rendered for the user. Does a certain font not look too hot at 19 pixels? Bump it up to 20 at a click of a button, back down to 19 before finally settling at 18 pixels in size, all done in seconds rather than hours sitting with a developer.

You can use any web fonts from their collections of 23,000 fonts, including Google fonts, Typekit and more in your compositions, which makes experimenting quick and easy (they have recently been purchased by Monotype who own Fonts.com and Myfonts so expect many more fonts on the way soon). Typecast in my opinion introduces a notion of playfulness back into typography as it encourages you to try font variations, which you may never have discovered if they were not so readily available and easily interchangeable as they are.

Another very useful feature of typecast is the ability to view and edit the CSS of your type. You can add background colours and images, hover states, or even transitions by simply editing the CSS panel. Once you are happy with your creation, you can easily export and save the CSS code, which can then be uploaded to your site or sent to a developer and because everything has been designed in the browser it will appear exactly as you intend it to.

You lost me at CSS

Photoshop isn’t the industry standard for nothing, and there will be some of you out there hyperventilating at the thought of dropping it to design in the browser, after all we are creatives not coders. Well, put down the paper bag as there is still a way you can create beautiful typography using web fonts in Photoshop. Extensis have created a plug-in which can be installed to Photoshop versions CS5 and higher that will give you access to all WebINK and Google Web Fonts to use for free, directly inside Photoshop.

This means that you can use any of WebINK or Google’s web fonts in your design compositions as you would any fonts that are installed on your system and they will display roughly the same as it should look in the browser. The plug-in will only give you access to WebINK and Google web fonts at the moment but on the plus side it will automatically update new fonts as they are added to WebINK and Google’s library of fonts.

Photoshop power up

Another valuable plug-in that helps ease the transition between Photoshop compositions and browser compatible CSS is the free, cloud based plug-in from css3ps.com. One of the main reasons that many designers work with Photoshop is the control you have over layers and shape elements. Being able to easily and quickly experiment with shadow, glow, colour, texture, rounded corners and more is almost second nature to most and something that even experienced designers struggle to replicate exactly in the browser. For those, this plug-in is perfect as it lets you create your compositions in the way that you know best but then let's you easily convert your shape's styles into browser compatible CSS3. This method is ideal for designing buttons, navigation or anything else that you may have styled a shape for.

Maybe there still is a role for Photoshop as a tool for designing web layouts but as far as designing typography for the web, applications like Firebug and Typecast have overtaken it. The time it takes to update static compositions just can’t compare with the speed and ease of which you can make changes in the browser. For those of you who just can’t even entertain the idea of designing in the browser, the plug-ins above should at least give Photoshop the boost it needs to stay relevant and help ease the transition.

Do you use Photoshop to design web sites? Is Photoshop going the way of Flash? Let us know in the comments.

Featured image/thumbnail, uses dead image via Shutterstock.