How to identify sub-pixels, half-pixels, or ghost-pixels

Sub-Pixels, half-pixels, and ghost-pixels are essentially all the same concept. They are paths that land in between the pixel grid.

Does that little of a difference on where the path lands really make that much of a difference?

To see them clearly you have to look for the straight edges. When side by side you can really see the effect. On this object we only have a half-pixel on one edge. But when the object has it on all the edges, it ends up being a lot more dramatic.

Now we are starting to see how much clearer our shapes can be!

These things mostly apply to icons on our pages, but this can also apply to text in a logo.

When you are done typing your text right click on the text and click “Convert to Shape” to be able to play with the paths.

We know for straight edges to line them up to the pixel grid, but what do we do for curves? I have found that lining up the apex pixel with the pixel grid gives the best results.

Also, when editing text make sure to keep the width of each of the strokes of the letters consistent.

Now you can go out there and make your icons nice a crisp!

I wrote this because I was always forgetting who wrote the original post I read about this topic, then while writing this I remembered the term they used, “pixel fitting”. Here is the post that taught me everything: