Search code examples
fontsgraphicsrenderingpointer-aliasing

Why does black-on-white text render to a non-grayscale RGB image?


Zooming in at any screenshot of black text on white background reveals a colorful image with bluish right fringes and reddish left fringes: Zoom In of the word "Open"

While I didn't expect the image to be binary black and white because of aliasing, I expected it to be grayscale, that is RGB=(x,x,x) for all pixels. What is the reason for this?


Solution

  • Different text platforms support various modes for how font "smoothing" is done when glyphs get rasterized. For example, in Windows GDI, when the CreateFont() function is called, the iQuality parameter can be used to set different font smoothing modes. In DirectWrite and Direct2D, the DWRITE_RENDERING_MODE enumeration or D2D1_TEXT_ANTIALIAS_MODE enumerations can be used to set different font smoothing modes. Other platforms will likely have similar alternative options.

    Aliased (no smoothing) and grayscale are two modes that text platforms have offered for scalable vector fonts for 30+ years. Then in 1999, Microsoft introduced a new kind of font smoothing called ClearType. This is the kind of smoothing seen in your screenshot. Other platforms like macOS have since introduced similar capabilities. These take advantage of the individual R, G, and B elements that make up a pixel in LCD displays. When tuned correctly for a given user, studies have shown this type of font smoothing to provide better legibility.

    An extra benefit of ClearType is that it allows glyph positions to be set at sub-pixel rather than whole pixel positions, effectively increasing the resolution that can be used for layout of text on a surface. In addition, ClearType rendering can be done with hardware acceleration to provide faster rendering—see ClearType Overview (WPF).