website design - 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) font color as shown in the image below.

Could somebody explain to me why this happens?

Answer

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}