<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

<p>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).</p>

<p>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.</p>

<p>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.</p>

<p>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.</p>

CC BY-SA 4.0
2019-01-01T12:58:38.993Z
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.
Gábor
CC BY-SA 4.0
2019-01-01T13:07:49.320Z
*an inevitable consequence of the existence of subpixels* sums up your answer to "why color" for me very nicely, thank you very much!! I think that "why gray in some places, color in others: is better asked in Apple SE since I have a hunch it's going to be platform-specific and not really a topic for Computer Graphics SE.
uhoh
CC BY-SA 4.0
2019-01-01T13:14:09.673Z
Check this out first: http://osxdaily.com/2014/10/27/change-font-smoothing-text-os-x-yosemite/, there is a description of how you can tweak it somewhat in macOS.
Gábor
CC BY-SA 4.0
2019-01-01T13:15:33.240Z
[Why does some text on my laptop have gray-scale sub-pixel rendering and some has color?](https://apple.stackexchange.com/q/347234/143729) oops too late. If that answers this question, please feel free to post it there!
uhoh
CC BY-SA 4.0
2019-01-01T13:17:16.553Z
I didn't mean "prior to asking", just before you decide what to use. Some other setting might be more pleasing to you. :-)
Gábor
CC BY-SA 4.0
2019-01-01T13:51:19.357Z
I added a paragraph about why gray in some cases and colored in others.
Gábor
CC BY-SA 4.0
2019-01-03T20:03:12.537Z
Regarding browser behavior: in most modern browsers, the algorithm used can be affected via the [CSS `text-rendering`](https://developer.mozilla.org/en-US/docs/Web/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.
ccprog
CC BY-SA 4.0
2019-05-03T00:02:43.937Z
@Gábor For some reason I didn't get notified of your last comment about the edit, I just stopped by today and I see it now. I wish I could up vote and accept twice! This is an excellent and really thorough answer! Thank you again for your time and effort.
uhoh
CC BY-SA 4.0
2019-01-01T12:34:28.337Z
2019-01-01T13:53:50.913Z
2019-01-01T13:53:50.913Z
Gábor
<p>In <a href="https://retrocomputing.stackexchange.com/q/8627/7118">this question</a> I generated the images below to explain why I can't use TTFs for that 1-bit display application.</p>

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

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

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

<p><strong>update:</strong> The answer to <a href="https://computergraphics.stackexchange.com/q/2034/5846">why does black text have orange and blue pixels</a> 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.</p>

<p><a href="https://i.sstatic.net/wAiuH.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/wAiuH.png" alt="enter image description here"></a> <a href="https://i.sstatic.net/IyBx3.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/IyBx3.png" alt="enter image description here"></a></p>

<p>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". </p>

<p><a href="https://i.sstatic.net/bTMCk.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/bTMCk.png" alt="enter image description here"></a></p>

CC BY-SA 4.0
2019-01-01T09:48:17.123Z
CMYK colorspace? Anyway you could be more clear whet is the other picture from
joojaa
CC BY-SA 4.0
2019-01-01T09:54:51.597Z
@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": https://i.sstatic.net/r6kGH.png
uhoh
CC BY-SA 4.0
2019-01-01T13:09:07.640Z
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.
joojaa
CC BY-SA 4.0
2019-01-01T13:30:05.140Z
@joojaa just fyi I've just asked [Why does some text on my laptop have gray-scale sub-pixel rendering and some has color?](https://apple.stackexchange.com/q/347234/143729) separately, since it's platform-specific. Thanks for your help!
uhoh
CC BY-SA 4.0
2019-01-01T13:56:25.440Z
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.
joojaa
<font-rendering>
Why does some text on my laptop have only gray-scale pixels while other text has color pixels?
uhoh
# Why does some text on my laptop have only gray-scale pixels while other text has color pixels?

(Asked by: username_0 on 2019-01-01)

In [this question](https://retrocomputing.stackexchange.com/q/8627/7118) 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](https://computergraphics.stackexchange.com/q/2034/5846) 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](https://i.sstatic.net/wAiuH.png)](https://i.sstatic.net/wAiuH.png) [![enter image description here](https://i.sstatic.net/IyBx3.png)](https://i.sstatic.net/IyBx3.png)

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](https://i.sstatic.net/bTMCk.png)](https://i.sstatic.net/bTMCk.png)

**Tags:** font-rendering

> **Comments:**
> **username_1**: CMYK colorspace? Anyway you could be more clear whet is the other picture from  
> **username_0**: @username_1 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": https://i.sstatic.net/r6kGH.png  
> **username_1**: 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.  
> **username_0**: @username_1 just fyi I've just asked [Why does some text on my laptop have gray-scale sub-pixel rendering and some has color?](https://apple.stackexchange.com/q/347234/143729) separately, since it's platform-specific. Thanks for your help!  
> **username_1**: 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.  

---

## 1 answers

### Answer by username_2 on 2019-01-01. Score: 5 | Accepted answer

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.

> **Comments:**
> **username_2**: 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.  
> **username_0**: *an inevitable consequence of the existence of subpixels* sums up your answer to "why color" for me very nicely, thank you very much!! I think that "why gray in some places, color in others: is better asked in Apple SE since I have a hunch it's going to be platform-specific and not really a topic for Computer Graphics SE.  
> **username_2**: Check this out first: http://osxdaily.com/2014/10/27/change-font-smoothing-text-os-x-yosemite/, there is a description of how you can tweak it somewhat in macOS.  
> **username_0**: [Why does some text on my laptop have gray-scale sub-pixel rendering and some has color?](https://apple.stackexchange.com/q/347234/143729) oops too late. If that answers this question, please feel free to post it there!  
> **username_2**: I didn't mean "prior to asking", just before you decide what to use. Some other setting might be more pleasing to you. :-)  
> **username_2**: I added a paragraph about why gray in some cases and colored in others.  
> **username_3**: Regarding browser behavior: in most modern browsers, the algorithm used can be affected via the [CSS `text-rendering`](https://developer.mozilla.org/en-US/docs/Web/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.  
> **username_0**: @username_2 For some reason I didn't get notified of your last comment about the edit, I just stopped by today and I see it now. I wish I could up vote and accept twice! This is an excellent and really thorough answer! Thank you again for your time and effort.  

---

