I recently had an issue with sub-pixel anti-aliasing of text, which produces very harsh colours and made me wonder how it is meant to be done properly:

enter image description here

I've drawn some cases of a black tile covering thirds of pixels below.

enter image description here

The colours match the ones I'm seeing, however when I look at properly antialiased text, the result is not nearly as bright and distracting:

from www.lagom.nl

I assume there has to be a balance between a good light intensity and the right colour. What methods are used for sub-pixel anti-aliasing that give such good results?


I've rendered a white teapot to an image with 3x width and with multisampling. Below I compare averaging every 3 pixels with assigning each to RGB. The colours still seem overly bright in some cases (especially compared to the example above from here), not that my phone captures them well.

enter image description hereenter image description here

enter image description hereenter image description here

enter image description hereenter image description here OK, so my monitor needs a little dusting

  • $\begingroup$ I believe that some screens have a different layout of the primary colours. Have you viewed your results on different types of screen? $\endgroup$ – trichoplax Aug 10 '15 at 9:58
  • $\begingroup$ @trichoplax no, but I'm confident both my monitors are RGB. Also here I'm more interested in how subpixel antialiasing techniques are meant to work than a fix for my issue. $\endgroup$ – jozxyqk Aug 10 '15 at 10:02
  • $\begingroup$ I didn't mean different primary colours, I just meant that the red, green and blue are arranged in different geometric patterns, so your algorithm would need to know which pattern is being used in order to give good results. $\endgroup$ – trichoplax Aug 10 '15 at 10:06
  • 1
    $\begingroup$ @trichoplax yes, sorry I should have clarified, both monitors have pixels split into thirds in R-G-B order from left to right as in this photo. $\endgroup$ – jozxyqk Aug 10 '15 at 10:09
  • 1
    $\begingroup$ To a certain extent, italic text will have less noticeable colour fringes since the sloping lines don't allow the same colour to be present for more than a few consecutive pixels vertically. $\endgroup$ – trichoplax Aug 10 '15 at 10:14

I'm not sure what happens there. Looking at the rendering of "considerations" in your example, the "cons" looks like what you get when you do crude sub pixel anti-aliasing, without applying the necessary "fix up" to make it look good. But then the "der" in the same word looks like there's no sub-pixel anti-aliasing.

You can find a good article about how good looking sub-pixel anti-aliasing works here https://www.grc.com/ct/ctwhat.htm and for the "fix up" part here https://www.grc.com/ct/freeandclear.htm and here https://www.grc.com/ct/cttech.htm

What it comes down to is: if you just compute the R/G/B intensities by calculating the covered area for each sub-pixel, the resulting color fringes are very ugly/irritating. To fix it you have to apply a horizontal blur/low-pass filter to the sub-pixel image. The result is an image that's less sharp but also has far less saturated colors. I.e. something like your "Check you" example.


What methods are used for sub-pixel anti-aliasing that give such good results?

You simply rasterize the letters as if they were 3x as wide.

The results differ in the way you rasterize the curves, most notably what kind of anti-aliasing/sampling scheme does it use and whether it makes use of font hinting. For great overview see Texts Rasterization Exposures by Anti-Grain Geometry (IIRC this is what Chromium/PDFium uses) or Subpixel rendering on Wikipedia.

What the attached image goes, I don't believe it has anything to do with sub-pixel rendering. It could be anything: wrong pixel geometry, wrong gamma, wrong color space conversion, ...

  • $\begingroup$ I would expect problems with pixel geometry, gamma or colour space conversion to show up as colour distortion at arbitrary points in the image, rather than the regular cycle seen in the question's image. The fact that it cycles horizontally between exaggerated colour antialiasing and pure greyscale antialiasing hints that the first application of antialiasing was performed at a different scale. $\endgroup$ – trichoplax Aug 10 '15 at 12:01
  • $\begingroup$ I don't have the full explanation, as the distortion does not seem to be aligned between the different rows of text, but it does seem the problem is related to sub-pixel rendering of already rasterised text rather than vector text. $\endgroup$ – trichoplax Aug 10 '15 at 12:16
  • $\begingroup$ @trichoplax What I try to say is that I doubt there an issue with Anti-Grain's sub-pixel rendering. Instead I would guess the input gets mangled earlier than it enters the rasterizer. Or later, but not in the rasterizer itself. $\endgroup$ – Ecir Hana Aug 10 '15 at 12:39
  • $\begingroup$ Yes I think the sub-pixel rendering is being applied correctly, but when applied to pre-rasterised text it is not possible to give a good result. I don't think that the renderer is broken, I just think it is being fed the wrong kind of text. $\endgroup$ – trichoplax Aug 10 '15 at 12:46

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.