8

I'm wondering why my browser (Firefox) add blue tints on the right and brown tints on the left of a solid grey (#333333) font color as shown in the image below.

color picker tool in Firefox shows bluish and brownish tints added to the solid grey font

Could somebody explain to me why this happens?

16

It is called subpixel rendering, or subpixel anti aliasing. Microsoft does something similar for most windows applications.

Your screen consists of colors that are next to each other. If you do a simple sample based anti aliasing you do not get the best possible result. But by leveraging of the knowledge of how the pixels are laid out you can get better results. As you're working with less than a pixels worth of data.

You should be careful with this though. Different monitors have different arrangements for the color emission (hence the tuner mentioned by @PaoloGibellini). Thus if your preparing very high quality screenshots it might be a good idea to turn the subpixel rendering off, or you will get a error 2 times*. Likewise if you take screen captures for print, its best to disable this or your text will look like a smeared rainbow.

*Once by the monitor, which has one order and once by the picture which has a different order

  • Hey, nothing wrong with smeared rainbows! – Janus Bahs Jacquet Nov 14 '15 at 22:36
  • In windwos its called ClearType - microsoft.com/en-us/Typography/ClearTypeInfo.aspx and its done at system level, I don't think its actuallz FF doing that. – Hurda Nov 15 '15 at 8:11
  • @hurda no firefox isn't doing it themselves, you can see it in the options that they are talking of direct draw and that includes clear type. You can globally switch it off if you like. – joojaa Nov 15 '15 at 8:20
  • 1
    A screenshot that contains sub-pixel rendering will not get it re-applied when viewed. It's a function on text and some UI elements, not on all graphics. Also, any print shop worth their salt would convert the black text of such a screenshot to pure black before separating. – Logarr Nov 15 '15 at 8:25
  • @Logarr no it wont be reapplied, but it will be fixed if the pixel order was different then the error gets done 2 times. I really highly doubt any print shop would go and fix pictures retroactively in this way without a fee. Because it would mean they would have to go forth and do this for each element on different backgrounds (on gray, on white on yellow etc). Its just easier to to disable it before screen capture – joojaa Nov 15 '15 at 8:31
6

This is called subpixel rendering. The different colours are only visible because the image has been blown up. It will be easier to give an example of white on black.

An explanation of subpixel rendering

Imagine a one pixel thick white line. On most desktop LCD screens the individual subpixels colours are arranged horizontally. As long as all three colour pixels are turned on we will see a white line one pixel thick - it doesn't matter what order the colours are in. This is what the first two rows show. Using subpixel rendering increases the horizontal resolution of the screen by three times, which is especially helpful when reading horizontal text.

But when you take a screenshot and enlarge it, rather than seeing the subpixels, you see the colours they combine to produce. When our one pixel line is aligned with the pixels you just see a one pixel white line. But if it isn't then you'll see a two pixel thick line made up of two colours. You can see this in person if you are close enough to your screen that you can see the gaps between the pixels - if you're close enough your eyes might not resolve the split pixels together, and you'll see the line as being two pixels wide. But if the screen resolution is high enough then subpixel rendering can work really well and will only be noticed when you enlarge screenshots.

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.