Sub-pixel text rendering

At face value, sub-pixel antialiased text seems like a great idea — using display sub-pixels to increase horizontal resolution can help with clarity and legibility. However, there’s many situations where it’s undesirable, not practical or simply impossible. Despite the benefits and staunch supporters, sub-pixel text rendering is on the decline and looks set to disappear completely from mainstream computing.

There’s many reasons why it’s on the way out, including devices that can be used in multiple orientations, increased pixel density, and interface animation. Even in cases where sub-pixel antialiasing is possible, it can be unwanted due to visual side effects, like colour fringing or animation flicker (more on that below).

And that’s where the tension lies — when designers or developers intentionally use greyscale antialiasing where sub-pixel antialiasing would have been possible.

Given the current state of play and likely future, I don’t think it matters. At the very least, it won’t matter soon. iOS, Android and the Windows Modern UI (Metro) all use standard, single alpha channel text rendering, rather than sub-pixel antialiased text. There’s no situation where any of these OSs use sub-pixel antialiasing.

macOS #

macOS only draws sub-pixel antialiased text under certain conditions: When the display isn’t rotated, when “Use LCD font smoothing when available” is turned on, and when text is composited to an opaque background. If any one of these conditions isn’t met, normal antialiasing occurs instead. So while sub-pixel rendering is common on the Mac, it’s certainly not everywhere.

Microsoft Surface #

It seems like there is some confusion about sub-pixel antialiasing on Microsoft’s Surface. A Microsoft staff answer on the Reddit AMA mentioned ClearType, but not sub-pixel antialiasing.

“With the ClearType Display technology we took a 3 pronged approach to maximize that perceived resolution and optimize for battery life, weight, and thickness. First prong, Microsoft has the best pixel rendering technology in the industry (ClearType 1.0 and 2.0)… these are exclusive and unique to Windows, it smooths text regardless of pixel count.”

The confusion is likely due to Microsoft’s own definition of ClearType, which specifically mentions sub-pixel antialiasing.

“Before ClearType, the smallest level of detail that a computer could display was a single pixel, but with ClearType running on an LCD monitor, we can now display features of text as small as a fraction of a pixel in width. The extra resolution increases the sharpness of the tiny details in text display, making it much easier to read over long durations.”

The good news is that there’s enough full resolution Surface and PC screenshots online to interrogate and produce a decently confident answer — the entire Windows Modern UI uses standard antialiasing. The classic Windows environment can use ClearType’s sub-pixel antialiased type though, even on the Surface with Windows 8 RT (I haven’t been able to assess what happens if a Surface is used upside down).

Orientation #

The iPhone 5 has an LCD sub-pixel order of red, green, then blue, when in the portrait orientation with the home button at the bottom. The iPad 3 also has an LCD sub-pixel order of red, green, then blue, but the sub-pixels run left to right when in landscape orientation with the home button to the left.

While my macro photography isn’t as clear as it could be, the colour fringing on the left and right sides of the white text tell the story — BGR for the iPad (the home button is on the right in this shot), and RGB for the iPhone with the home button at the bottom of the display.

Quite a few Android devices use displays with pentile sub-pixel patterns, which would have to be supported with specific rendering, if attempting sub-pixel antialiasing. Possible, but complex and locked to the display tech.

Animation #

The compositing requirements for sub-pixel antialiased text typically mean that it has to be drawn onto an opaque background. If an element passes underneath the text, the layer stack has to be re-rendered to an opaque buffer. All possible, but at the cost of performance and battery life.

WebKit on macOS disables sub-pixel antialiasing when animating, often resulting in a visual glitch when it starts and stops, unless standard antialiasing is set using CSS. macOS disables sub-pixel antialiasing when using CoreAnimation’s layer backed views. And, as noted above, iOS, Android and the Windows Modern UI never contain sub-pixel antialiased text.

Sub-pixel text antialiasing and animation are not friends.

High pixel density #

Higher pixel density displays also negate the need for sub-pixel antialiasing. Apple’s Retina displays really are the final nail in the coffin for sub-pixel antialiasing. If you don’t believe me, feel free to use Skala View (the free iOS app) to load this image onto your iPhone. Make sure it’s set up with the home button icon facing the home button. I’d be surprised if you can tell the difference between the blocks of text.

The future #

Higher density displays have greatly diminished the need for sub-pixel antialiased text. Technical hurdles have increased for devices that can be used in any orientation. And, more frequent use of user interface animation limits when the technique is possible.

Less benefit. More complex. Possible less often. That’s why sub-pixel font rendering probably has no place in the future of mainstream computing.

Published 21 November 2012.