Rendering

Sketch uses the native font rendering of the operating system and because of that, text looks excellent. The benefit of native font rendering is that when you’re doing a website design you’re sure that text looks accurate.

The system uses a technique called sub-pixel anti-aliasing to improve text rendering and Sketch will render its text using this technique as well. However there are a few caveats to this, and to understand why, we need to explain something about the underlying technology first.

Sub-Pixel Anti-Aliasing

A computer screen is made up of a grid of pixels. The problem that text rendering faces is that on regular screens there are not enough pixels on the screen to accurate draw the curves. So anti-aliasing has to be used; it slightly lights pixels that only are partially covered by the curves to give the appearance of smoothness.

Sub-pixel antialiasing goes one step further by taking into account that a pixel on a screen actually consists of red, green and blue vertical strips. So instead of lighting up the entire pixel, sub-pixel anti-aliasing lights up only the red or blue part.

That is why if you really zoom in on text in pixel mode you can see blue and brownish edges to your text. Viewing the text at actual size though produces a good result. Users coming from Windows are not used to sub-pixel anti-aliasing and they often refer to the way OS X renders fonts as ‘fat’.

When it Fails

For sub-pixel anti-aliasing to work, the text has to be drawn on an opaque (colored) background because the system needs to know what the final composited result will look like. This conflicts with layer blending.

For layer-blending to work correctly, Sketch has to render all layers on a transparent background. That way the layers can blend together as expected and then the final result can be rendered back into Sketch’s white canvas.

So this presents us with a problem; we cannot render sub-pixel anti-aliased fonts without an opaque background, and we cannot accurately render blending with one. This means that as soon as you have one layer on your canvas with blending, Sketch has to go the transparent-background-route and your text might no longer render with transparent:

You can work around this by putting your text on top of something that is opaque, like a shape with a fill or an image.

Exporting

Another problem with transparent happens on export. On the canvas, Sketch can render the text behind an opaque background, so everything works.

However when you export a text layer to a PNG file and keep the background transparent you will notice that the text looks different; because the background is transparent we were unable to render it with sub-pixel anti-aliasing.

Like with blending above, you can work around this by putting your text on top of something that is opaque, like a shape with a fill or an image. However the area behind the text has to be transparent, there is just no way around this unfortunately, so keep it in mind when you are exporting.

Designing for iOS

When Apple introduced the iPhone they decided to not render any text on the device with sub-pixel anti-aliasing. The reason for this goes back to way red, green and blue lights make up one pixel.

As you know, the iPhone can be rotated and this means that the vertical red/green/blue pixels are suddenly stacked horizontally. And with that the entire sub-pixel technique falls apart. Apple could still render it in portrait mode and disable it in landscape, but wisely decided to keep the experience consistent between portrait and landscape.

Whenever you are designing an interface for iPhone or iPad you have to take this into account; on the canvas Sketch renders with sub-pixel anti-aliasing, however on the device it will not be rendered that way. You need to tell Sketch to not render with sub-pixel anti-aliasing, and you can do so in the Preferences. Go to Sketch › Preferences… in the menu, and in the General tab, disable the sub-pixel anti-alias fonts option.

Text to Outlines

When you convert Text to Outlines you will notice that the text renders slightly different as well. Once again, this is due to sub-pixel anti-aliasing. The system only does this technique for text, not for shapes. Read more about Text to Outlines here.