Illustrator ‘save for web’ anti-aliasing problems
Update: it seems I was completely wrong about this and Illustrator does have a special anti-aliasing option for type optimisation. The option is buried in a slightly strange place in the ‘Save for web’ dialogue, under ‘Image size’. Select ‘Type optimized’ instead of ‘Art optimized’. Thanks to Monika Gause for telling me about this! Incidentally, another way to achieve this would be to use Effects > Rasterize and again set the option for ‘Type Optimized (Hinting)’.
Adobe Illustrator is a great tool, but it seems to have some real problems rendering anti-aliased text when using the ‘Save for web’ function. Text from very thin fonts is a particular problem. In these cases, the text looks fine while you are working on the file – I usually have the anti-aliasing set to ‘Sharp’ and it does look crisp and clear. However, as soon as you go to ‘save for web’ the results are awful.
So here is what I see while working on some text (this is set in Museo 100). This image comes directly from a screenshot in Mac OSX:
And here is what Illustrator gives me when I select “Save for web & devices”:
The text is rendered very poorly.
As an experiment I created the same text in Photoshop and did “Save for web & devices” and it has no problems at all:
It’s a really annoying bug, and it’s been around since at least version CS4, as we can see from this post on the Adobe help forums.
I use Illustrator for nearly all my web work – it’s a great tool and very quick to work in, and ‘pixel preview’ mode and ‘snap to pixel’ mean you can produce precise graphics for the web. However, it looks I might have to start using Photoshop more. Disappointing.