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
Mac Standard font-smoothing
A screen-grab of live text — Mac OSX IE5.2
Photoshop Crisp Anti-aliasing
Photoshop Sharp Anti-aliasing
Photoshop Strong Anti-aliasing
Photoshop Smooth Anti-aliasing
Photoshop No Anti-aliasing
Thoughts...
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:
(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:
Whereas the Windows-rendered version uses an unbelievably gaudy array of colours to produce an approximation of black text:
Curious.
Any thoughts on any of this? A solution to rendering small fonts? Leave your mark on the Stylegala forum, or send me a mail.