In this question I generated the images below to explain why I can't use TTFs for that 1-bit display application.

But now I would like to understand from the perspective of a non-expert, why is some black-on-white text on my screen made from gray pixels, while other text is made from color pixels?

Gray on left is a screenshot from the SE question editor window, color on right is from a Finder window in MacOS.

The "Why?" should have two elements, one might be "because Apple does it that way" but the other would hopefully help me understand why Apple does it that way if that is in fact the case.

update: The answer to why does black text have orange and blue pixels names this as "sub-pixel rendering" but I still do not understand why it is in color in some places, gray in others, and if and why the color is used at all.

enter image description here enter image description here

I've done a rough analysis of the colors used in hopes that it might teach me something, but I can't really gain any insight beyond "its a red-blue thing".

enter image description here

  • $\begingroup$ CMYK colorspace? Anyway you could be more clear whet is the other picture from $\endgroup$ – joojaa Jan 1 at 9:48
  • $\begingroup$ @joojaa my laptop uses MacOS. The interface to the file system is called Finder. In that window I took a screen shot that included a file name that contained the word "color": i.stack.imgur.com/r6kGH.png $\endgroup$ – uhoh Jan 1 at 9:54
  • $\begingroup$ Yeah thats better. Microsoft owned the patent for subpixel rendering on a OS. Now this patent restriction has been lifted up and the browser window is free to implement whatever technique they wish. $\endgroup$ – joojaa Jan 1 at 13:09
  • $\begingroup$ @joojaa just fyi I've just asked Why does some text on my laptop have gray-scale sub-pixel rendering and some has color? separately, since it's platform-specific. Thanks for your help! $\endgroup$ – uhoh Jan 1 at 13:30
  • $\begingroup$ Well the answer is simple each app on the globe has a choice on what architecture they choose to use in their gui frameworks. Some frameworks inherit other methods. For example the antialasing adobe does is different from all other applications. Every app can choose for arbitrary reasons do it differently. $\endgroup$ – joojaa Jan 1 at 13:56

It's called subpixel rendering (there are different solutions on different platforms). Microsoft's one is called ClearType, just google for it, Wikipedia has a nice description.

Earlier, simple edge smoothing was used, antialising, that resulted in gray pixels added to the jagged lines to mask them, and although it technically created a more blurred outline, due to the way our brain works, we perceived the resulting forms more pleasing, more natural, easier to read.

Colored subpixels arrived when monitor technology moved from CRT screens to LCD where the RGB components making up a pixel are much more uniform. Very simply put, we treat our monitors as having thrice as many pixels horizontally than they actually do. When we render a character glyph, the body will be black, so no difference there. But if we calculate to need just a subpixel more to the left of a complete pixel, we will use that extra subpixel. Similarly, if we need to go just a subpixel to the right, we will use that.

But, using these individual subpixels rather than full pixels as with antialising, we will have color fringe inevitably because these subpixels are physically colored. Just look at your sample: all left edges have the same color fringe, yes, because that's the color of the last subpixel of the previous pixel. And right edges, similarly, have the color of the first subpixel of the next pixel.

What you can see in the screenshot is that the display sent to the monitor is pre-manipulated with the anticipation of the colored subpixels and displayed accordingly. Pixel colors are modified so that when they light up on the monitor screen, only those subpixels will be lit that are required by the calculations.

Monitors might be different and, more importantly, individual sensitivity to this effect is different from person to person. Apple, using only their own monitors and in line with their usual stance of "we tell you how to use it", only offers a way to switch this effect on or off in their user interface (although there is a way to select from a limited list of three different settings using the Terminal app and appropriate commands).

In Windows or Linux, where the hardware selection is much broader and people don't normally accept to be allowed only a single way, ClearType can be adjusted to your individual needs. Depending on the settings you selected, the actual color fringes will be very different.

This is just a compromise. In order to display text to be more legible, we sacrifice chrominance for luminance. Differences in intensity are more noticeable to the human brain than differences in color. So, even if it introduces color variations (which is absolutely not the intention but an inevitable consequence of the subpixels being colored), what we really see are the intensity differences. In simpler words, most of us will only perceive at that resolution and physical viewing distances that there is an extra subpixel, not that it has a different color.

And as to the final question of why gray in some places and colored in others, it's very probably a software issue. The browser you mentioned might have its own graphics rendering engine that simply works differently from what you normally have in the operating system. It's quite possible that it doesn't use the operating system's services to render text but renders everything by itself, pictures and texts as well, as a complete image and uses its own settings and techniques in the process.

  • 1
    $\begingroup$ Yes, sure, I wasn't clear enough, I'll change the wording a bit. The displayed image is manipulated in anticipation of the subpixels, so that the results will be as I described. The actual color variations are simply due to relation of the mathematically calculated outline to the physical position of the pixels. If it crosses a red subpixel, the red subpixel will be lit and you'll see a red color fringe, that's all. $\endgroup$ – Gábor Jan 1 at 12:58
  • 1
    $\begingroup$ Check this out first: osxdaily.com/2014/10/27/…, there is a description of how you can tweak it somewhat in macOS. $\endgroup$ – Gábor Jan 1 at 13:14
  • 1
    $\begingroup$ I didn't mean "prior to asking", just before you decide what to use. Some other setting might be more pleasing to you. :-) $\endgroup$ – Gábor Jan 1 at 13:17
  • 1
    $\begingroup$ I added a paragraph about why gray in some cases and colored in others. $\endgroup$ – Gábor Jan 1 at 13:51
  • 1
    $\begingroup$ Regarding browser behavior: in most modern browsers, the algorithm used can be affected via the CSS text-rendering property. Mind you, the exact behavior of these pretty high-level values is still vendor-specific, as they are explicitely not meant to be more than just a hint. $\endgroup$ – ccprog Jan 3 at 20:03

Your Answer

