: Why does browser add bluish and brownish colors to a solid font color? I'm wondering why my browser (Firefox) add blue tints on the right and brown tints on the left of a solid grey (#333333)

@Lengel450

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.



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.

Vote Up Vote Down

@Cugini998

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

Vote Up Vote Down