Pixel Fitting Type in Sketch

When a vector image is rasterized, anti-aliasing works its dark magic to smooth out the edges and mimic the silky curves of the vector path. A consequence of this process is that straight edges receive anti-aliasing as well, leaving a thin haze of half-pixels all around the shape’s perimeter. Usually it’s not a problem, but with logo images it can be worth fixing.

In this post I’ll explain how to pixel fit a text-based logo in Sketch. The “pixel fitting” term is from a blog post by Dustin Curtis.

Pixel Fitting a Logo

In this example we’re using some text with each character placed on a separate layer.

We’re going to convert these text object layers into shapes but first let’s duplicate the group so we have a back-up in case we want to go back and modify the characters as text objects.

After making a copy, select all of the layers within the group and choose Type > Convert Text to Outlines.

Now we’ve got a bunch of vector shapes. If you turn on the pixel view (Ctrl+P) and zoom in you’ll notice a lot of anti-aliasing.

And if you look at the object’s coordinates in the top right of the screen you’ll see why. It’s sitting on partial pixels.

To fix, select the layer for the character (the individual layer, not the group of layers) and then select Layer > Round to Nearest Pixel Edge.

Now when you zoom in you’ll see clean edges.

Notice the coordinates now show whole pixel values.

Here’s what it looks like in the end. This time it turned out to be pretty subtle. But this isn’t always the case.

Keep in mind that the whole point of this is that you are preparing a bitmap for display at a specific size. It doesn’t do any good to pixel fit an image that ends up getting scaled down some arbitrary amount, since antialiasing will be reintroduced.

So before you snap shapes to pixels, make sure to figure out the desired final display size and resize the layers accordingly.