Photoshop, Fonts & Anti-aliasing

I felt prompted to write about this subject after reading this post on one of the Stylegala forums:

“Why are all my fonts blurry when I export my images for the web? Never fails, they are always too anti-aliased...”

If we're talking about small font sizes, then this is my number-one beef with Photoshop. When designing websites I like to be able to present my client with a non-interactive visual that'll show 'em pretty much exactly what a sample page of their new site will look like. Usually I create a 24-bit .png from a Photoshop layout and publish it as a web page. That's before even declaring a doc-type.

The problem is accurately representing how type at small font sizes — typically the "body" text, which'll eventually be rendered live by the browser — will look. For clarity at small font sizes Photoshop just can't match the ClearType font-smoothing that my PC natively uses or the Standard font-smoothing on Mac.

Below is a selection of samples, all exported as up-to-256-colour gifs. All text is Verdana, 12 pixels, coloured black. Kerning, tracking, leading, pork pies, etc. all set to default.

Windows ClearType font-smoothing

A screen-grab of live text — Windows XP Firefox

Screen grab of live text as rendered by Windows ClearType

Mac Standard font-smoothing

A screen-grab of live text — Mac OSX IE5.2

Screen grab of live text as rendered by Mac Standard

Photoshop Crisp Anti-aliasing

Photoshop-rendered text : Crisp Anti-aliasing

Photoshop Sharp Anti-aliasing

Photoshop-rendered text : Sharp Anti-aliasing

Photoshop Strong Anti-aliasing

Photoshop-rendered text : Strong Anti-aliasing

Photoshop Smooth Anti-aliasing

Photoshop-rendered text : Smooth Anti-aliasing

Photoshop No Anti-aliasing

Photoshop-rendered text : No Anti-aliasing


With the exception of No Anti-aliasing, which feels too sterile, all the Photoshop-rendered text looks too messy for my liking. And as far as I know, although I'd love to be proved wrong, this is just the way Photoshop does things. End of story.

As I was exporting the gifs above, I happened to glance at the Colour Tables (which show the 256-or-less colours that'll be used in the finished gif). I was quite surprised with what I discovered.

A typical Photoshop sample uses 16 colours:

Photoshop colour table : Photoshop-rendered text
(some of them use 17 colours, and the No Anti-aliasing uses just two — black and white.)

The Mac-rendered version uses a hefty 212 shades of grey:

Photoshop colour table : Gaudy Windows-rendered text

Whereas the Windows-rendered version uses an unbelievably gaudy array of colours to produce an approximation of black text:

Photoshop colour table : Gaudy Windows-rendered text


Any thoughts on any of this? A solution to rendering small fonts? Leave your mark on the Stylegala forum, or send me a mail.

« back to archives

coldmountain archives : on the tracks