In Defense of Grayscale Antialiasing

For font smoothing, Zach Leatherman argues that it is better to use the default antialiasing (subpixel) instead of grayscale antialiasing.

However, there is an issue with subpixel antialiasing on macOS. It adds extra pixels. If you design a glyph on a pixel grid and draw a straight line that exactly fits in pixels, then use the default subpixel antialiasing on macOS, it’ll add some gray pixels around your line. That’s unexpected. A line that fits in pixels should not get rendered with a bunch of extra pixels around it. On the other hand, grayscale antialiasing does not add these extra pixels. It is the standard antialiasing which is also used for rendering SVG and any shape drawn with CSS.

This demo shows a simple glyph with and without grayscale antialiasing. If you zoom in on pixels, you can clearly see the difference and how subpixel antialiasing is adding some extra, unwanted pixels.

To zoom in on pixels, you can either take a screenshot and then use an image editing program like Photoshop, or you can use the zoom functionality in macOS, which can be enabled from System Preferences → Accessibility → Zoom → Check “Use scroll gesture…”. Make sure to uncheck “Smooth Images”.

This is a scaled up screenshot of the demo above, taken on macOS.

Conclusion

On macOS, the default font-smoothing makes fonts appear bolder than they’re supposed to. As a workaround for this issue, use the following CSS properties:

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