Skip navigation
Currently Being Moderated

Possible bug in Illustrator CS4 text anti-aliasing in Save for Web and Devices

Jan 23, 2010 7:11 PM

Hello all,


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.



  • Currently Being Moderated
    Jan 23, 2010 9:14 PM   in reply to Starrim

    Illustrator is lousy at pixel-precise raster art, as you have just discovered. I would do this in Photoshop. There are many advantages:

    1. Anything can be rasterized and edited at the pixel level
    2. There are many options for how text is antialiased
    3. Since the format itself is raster-based, the on-screen display is the image, so saving as GIV or PNG or using Save for Web and Devices gives no surprises
    4. Photoshop has much less suck than Illustrator. Much.
    Mark as:
  • Currently Being Moderated
    Jan 23, 2010 11:40 PM   in reply to Starrim

    Starrim wrote:


    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.

    Mark as:
  • Currently Being Moderated
    Jan 24, 2010 4:05 AM   in reply to Scott Falkner

    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!

    Mark as:
  • Currently Being Moderated
    Jan 24, 2010 4:28 AM   in reply to Starrim



    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.

    Mark as:
  • Currently Being Moderated
    Jun 24, 2011 4:43 AM   in reply to Starrim

    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:


    Very disappointing.

    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 4:23 PM   in reply to Starrim

    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.

    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 7:59 PM   in reply to jackl2070

    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


    Screen Shot 2012-04-06 at 10.54.21 PM.png


    htis is what it lloks like in AI and a browser when you choose Type Optimize


    Screen Shot 2012-04-06 at 10.51.01 PM.png


    This the difference between Art Optimized and Type Optimize


    Screen Shot 2012-04-06 at 10.52.47 PM.png


    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.

    Mark as:
  • Currently Being Moderated
    Apr 6, 2012 8:05 PM   in reply to Wade_Zimmerman

    This is art and text if using art and text I think Type Optimized does just as good a job as art optimize does with art work and renders text better.


    The top one is text Optimized


    Screen Shot 2012-04-06 at 11.03.32 PM.png

    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points