This could be a bug... if so, I'd be happy to add it to Wade's bug list a few messages down the stream.
Here's what's happening: when I create small text using a very thin font (in this case, Helvetica Neue Light), the Pixel Preview gives a noticeably different anti-aliasing solution to the actual output from Save for Web & Devices. I'm attaching an original .AI file as well as a screenshots of what I'm getting in both situations.
I'd really prefer the Save for Web and Devices output to look exactly like the Pixel Preview. The font looks great in Illustrator but loses a lot of its punch when I Save for Web.
Illustrator is lousy at pixel-precise raster art, as you have just discovered. I would do this in Photoshop. There are many advantages:
Yes, I could indeed do it in Photoshop, with its great text antialiasing options. That's how I've always done web design in the past, but I actually really like most of how Illustrator does it too. I only just realized what a powerful tool it can be for web design. Pixel-precision, up to this one issue, hasn't been a problem. Plus, it solves the age-old problem of my always having to maintain separate vector files for my pages in case I want to change the shape of something down the road. Talk about double-duty. And I really don't like messing with vectors in Photoshop... some people love it, but for me it just doesn't feel right.
Now then, why mess with pixels in Illustrator? Mm, for me that's not really the question. The issue is, they've put it out there, they've gone to the trouble of making it available — so it really should work correctly, without surprises.
The issue is, they've put it out there, they've gone to the trouble of making it available — so it really should work correctly, without surprises.
You’re preaching to the choir, pal.
First the threads that you refer to was actually created by Mylenium who ismore aveteran of the forum than I am
and has helped far more users than I have as well.It is probably a thread that should be kept permanently at the top.
To your situation and small text there are fonts that are specially optimized for small sizes on the web.
I do not know how they would display though at such magnification. Or if you would really have need to enlarge the view to1600% for any practical purpose.
Please explain the reason!
I am surprised to see the difference; but then again, I have never looked that close at Type saved for web.
Just to make sure: Is the artwork aligned with the point/pixel grid (or whatever it is called), in other words, do the boundaries (including those of counters) have integer point/pixel values? If not, that might hold an ambiguity which might explain the difference.
Well, I ran a couple more tests to verify what was going on. It looks like:
I only zoomed in to 1600% before so the pixel-per-pixel difference would be glaringly apparent. The real problem I'm having is that the font becomes almost invisible when Saved for Web. And I'm starting to have a hunch why...
Obviously there are two different type rendering algorithms going on here: one for pixel preview (which is identical to the actual document display at 100%) and one for Save for Web and Devices. It would seem that only the pixel preview is using the font's hinting information, which becomes extremely significant for small, thin fonts whose stems are less than 1 pixel wide. Interestingly, the PP also appears to be the least faithful to the actual letter outlines (see zoomed comparison); while perhaps what I'm getting from Save for Web is actually more so. What we need is a little more control, perhaps, of how Illy is anti-aliasing its type, like in Photoshop.
What to do, what to do? I guess I'm stuck using Photoshop for this, or screen-grabbing Illustrator and slicing it up in Photoshop.
I have to report that this has not been improved in Illustrator CS5. I have been dismayed at how badly very thin type looks when saving for web and devices. But taking a screenshot from Illustrator, or reproducing the same text in Photoshop, gives perfect results.
I have been working on a logo that contains some very thin weight type, and for this Illustrator's 'save for web' anti-aliasing is completely unusable.
Here are the results of a test I just ran: http://benhayes.com/test/illy-export-problem/test.html
The issue has to do with the anti-aliasing method that save for web and devices uses. For whatever reason it uses the art-optimized anti-aliasing algorithm on type. There is, however, a workaround for this. Before output, select the type layer and go to Effect -> Rasterize... Then, under options select Type Optimized as the anti-aliasing method. Repeat for each type layer in the document. The save for web an devices output should now match the pixel preview.
In the Svae for Web and Device under the image tab where it says art Optimize that is a drop down menu select Type Optimize as such
htis is what it lloks like in AI and a browser when you choose Type Optimize
This the difference between Art Optimized and Type Optimize
That is what is happening to you you are selcting Art Optimize and that is the reason when you choose art optimize aqnd you rraster the image it looks right to you.