: Ragged edges on a logo I created this text logo (attached) in Adobe Illustrator using Bodoni Sans Light font I purchased from MyFonts. After having purchased the font I noticed that the edges

@Alves566

I feel your pain. Those things bother me as well and I have spent countless hours trying to control them. In this case, though, I think you might need to let go and accept that sometimes it will be fuzzy. Here is why:

As you probably know, curves are simulated on the screen by anti-aliasing or what you are calling fuzz.

The screen is (simplifying) a matrix of dots. There is no way to draw a real curve with a matrix of dots because you would have to place the dots in between pixels to be 100% accurate. The only thing that can be done is to create the illusion of a curve by using lighter and darker dots, also known as anti-aliasing.

Anti-aliasing is also used by vector software to simulate shapes with fractional pixel dimensions (width=0.5px) or placed at fractional pixel locations (x=0.5px). The lighter pixels make your eye think that the shape is slightly shifted.

If you combine both (curves and fractional pixel dimensions/placement) then you get a lot of anti-aliasing going on.

Take a look, for example, at this image. The circle and the square are both 20px x 20px outlined with a 1px black stroke. The left corner of the shapes in the first column is located at an exact pixel. The second shapes are located at a quarter pixel (x=0.25px). The third ones at a half pixel (x=0.5). The top (y) of all the shapes is at an exact pixel.



This is the same image but magnified, so we can see the anti-aliasing at work.



You can see that the first square did not need anti aliasing since it is placed at an exact pixel and has exact pixel dimensions. It looks quite sharp in the original image (the small one). When we start moving it, tough, AI starts adding anti-aliasing to simulate the fractional pixels. The second one looks almost sharp. The vertical strokes of the third one look fuzzy or thicker.

The circles are even more complex. Since they are curved, AI has to use anti aliasing for all cases, even for the one located at exact pixels.

My personal preference is to place circles at 1/2 pixels, both x and y, so the fuzz is evenly distributed. In my opinion it makes the curves look smoother. You can still see some of the artifacts, though.



When you raster a curve or a vector image that uses fractional pixels, you are "perpetuating" the anti-aliasing. The lighter and darker dots that the software was adding to imitate curves and fractional pixels are saved as a pixel of that colour in the final raster image.

Pinpointing and controlling these artifacts is painful and sometimes impossible. If you are just drawing a bunch of shapes, then it is easy because you can go and check the sizes and locations of all the elements in your artwork. I wrote an obsessive compulsive set of guidelines in this comment about that topic.

Copy, though, makes these artifacts almost impossible to control. You cannot go and check the sizes and locations of every character in your copy. Computers will be obsolete before you finish your first attempt to set each character manually. And you will end up with text that does not flow nicely like text should do.

I tend to go through all this fuzz only if it is a very small image (an icon, for example) that I know will always be placed on an exact pixel location and with exact pixel dimensions (a web application or software). Or if the artifacts are so evident that I cannot sleep at night because I hear their voice calling me.

If it is an asset that will be used by others in ways I cannot even guess, then I don't bother, because their choice of placement and dimensions will be adding more anti aliasing to the final result anyways.

So, my suggestion would be: if the O really really bothers you then turn it into a shape and go and check and modify its location and dimensions before you export it or save it for web. Keep in mind, though, that not for every single application of the logo, which will be used in various locations and dimensions, you will be able to do this.

Also keep in mind that if you print it, then another set of artifacts comes into play. This is an interesting comment about that (and I'll stop pushing my own comments).

Vote Up Vote Down

@Debbie163

It is a verey specific situation on how Illustrator is handling the aliasing.

Try to export it lets say 3-4 times your final output and resample it down.

You also can try aplying a sharpening, either before the resampling down or after the resampling.

Vote Up Vote Down

@RJPawlick971

This is just how it is. Very thin curved lines on a raster display will likely have more noticeable aliasing than thicker lines.

I think it looks fine right now. But if you want to tweak things a bit further you could try setting the type in Photoshop instead and play with the anti-alias settings within the type tool (I believe Photoshop calls this 'font smoothing'). There's a half dozen or so options and some may produce a look you prefer over the others.

The other option is to make retina versions of the logo and only show the client their web page on an iPad or retina screen Macbook. :)

Vote Up Vote Down