How to Avoid Jagged Type With Illustrator’s Save for Web
Q: I have been using Adobe Illustrator CS4 to create typographic images for the web by using the Save for Web & Devices… option. When I upgraded to CS5, the images looked really jagged, as if anti-aliasing was turned off. I poked around in Preferences for a solution, but could not find anything that might fix this, so I went back to using CS4. Now I'm afraid to upgrade to CS6 without resolving this problem, but don't want to fall behind the upgrades. Can you help?
A. Okay, my dear readers, I have a confession to make. This is my very own query, and after much procrastination, I'm excited to say I finally figured out the solution to this frustrating problem.
Here's the scoop on how to avoid the dreaded jaggies on typographic images: if you are using CS 5.x and using the Save for Web & Devices… command, click on the Image Size panel where you will notice a new drop down menu in the lower left. For an image that contains type, select Type Optimized, hit Apply, and voilà, no jaggies! The problem I had was due to the fact I was not aware of this new feature (CS4 did not have this rather sneakily located option), and that my default was set to None, resulting in no anti-aliasing and a very jagged image. But with a little research, the solution revealed itself.
Figure 1. This jagged typographic image is what I got when Type Optimized was not selected when using the Save for Web option in Illustrator CS5 and up.
Figure 2. When the Type Optimized option is selected, anti-aliasing is applied to the edges, making them a lot smoother.
Figure 3. Illustrator CS5 has a drop down menu with type and art optimization choices as well as an Apply button, all hidden away in the Image Size panel.
Having resolved this issue, I then felt confident to give Illustrator CS6 a try. To my delight, it worked pretty much the same way; the command is now called Save for Web… and there is no Apply as the changes happen automatically. In addition, when you hover over the Type Optimized option, a rollover popup now smartly says “Applies anti-aliasing to edges of the artwork”.
I did take the time to play around with both the Type Optimized and the Art Optimized option, and found that for this example, the type was a bit sharper with the Type Optimized option when NOT converted to outline. But when converted to outline, as I often do when the type is small and/or has thin strokes, it is virtually the same.
Figure 4. Illustrator CS6 has streamlined this feature by removing the need for an Apply button.
Now that you know where the anti-aliasing controls are, my advice is to play around with these options (especially if your image contains both type and graphics) and select the one that gives you the best outcome.
Liked This? Read These!
When it comes to distorting type, I take a pretty hard line. Just say "no," say I, to altering character widths to make fake expanded and compressed typefaces. Likewise, it's a no-go for fake... Read More
I don't know what's in the water in Buffalo, New York, but they sure do know their old-school type and printing there. Case in point: P22 Type Foundry, source for many historically inspired typefaces... Read More
Fast type, slow type is the 5th in an annual series of international design conferences, which until this year have been held at St Bride Institute, Fleet Street, London. In 2006, Birmingham was... Read More
One of the more trying tasks when designing for the Web can be creating great-looking, legible type as a graphic element, particularly when that element must fit within the restrictive confines of a... Read More