Photoshop Anti-Aliasing for Web Design

“Over deliver” – the mantra all good digital agencies should live by and one we take very seriously here at Zeta. Meeting client expectations and delivering beyond the brief takes careful planning and consideration.

With that in mind, knowing exactly how browsers will display your design is imperative. Producing stunning visuals is a must. But if you present clients with concepts that don’t represent how the live site will look, your final delivery will not have the impact you hoped for.

Of course, Flash developers don’t need to worry about how their fonts display and neither, for that matter, do web designers. They can just turn text into images and everything will look fine. But any web designer worth their salt will care where their clients rank in search engines, so HTML text is a must. It’s beneficial to both clients and agencies to design for SEO. It also helps that we’ve got a team of marketers who keep the pressure up to produce sites that can be optimised to their full potential.

So how should fonts be displayed to clients?

When I started designing websites in the 90s, font smoothing was something Microsoft developers thought Apple designers did on a Saturday night in the privacy of their own homes. So back then, turning off my anti-aliasing altogether was the best way to display fonts to clients. Now, however, browsers cope well with typography.

For a while now, I have been meaning to test which of the anti-aliasing settings in Photoshop best represents the font smoothing in modern browsers. Well, guess what? I made some time, sat down and did it. I took screenshots of www.zeta.net from a Mac and a PC and compared them to the initial design files, changed the anti-alias settings and put it all together into two easily digestible tables.

Now, this is a fairly subjective exercise, so if you don’t agree with my findings that’s fine, Just have a look at the tables below and make your own mind up. Think of it as a resource to show clients how your concept will look when published on a live website. From now on I will be presenting visuals to my clients with the following Photoshop settings:

Sans-serif font – Arial

PC

Crisp for small body copy.

Crisp or smooth for large headings.

N.B. The extra transparent pixels Photoshop adds for anti-aliasing do make all fonts a little bolder on small sizes, so I would actually say the ‘none’ setting is still probably the most accurate for character width.

Mac

Crisp just edges it for all sizes for me.

Serif font – Georgia

PC

None for small body text, because it mirrors most characteristics of the browser-rendered font. With anti-aliasing turned on, the kerning seems to be different for small sizes.

Sharp for larger versions of this font. For dark backgrounds I think sharp also works best.

Mac

Strong for all sizes, because of the way Macs display fonts (a little bolder than PCs).