Font rendering

Sub-pixel antialias fonts

Sub-pixel antialiasing increases the horizontal resolution of text to improve legibility. High pixel density displays negate the need for sub-pixel antialiasing.

In the menu if you go to Sketch > Preferences, you can enable/disable ‘Sub-pixel Antialias Fonts’.

Variation in screen densities has made it difficult to determine how text will be rendered. For accuracy, when I’m designing a responsive website, I enable ‘Sub-pixel Antialias Fonts’ for desktop and disable for mobile.

The adoption of high pixel density displays means that sub-pixel antialiasing is in decline.

CSS

Today, I use the following CSS properties to ensure text renders without sub-pixel antialiasing (in WebKit and Firefox OS X browsers).

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;