Over the past few years I have regularly run into an issue with web browsers on Mac OS X rendering fonts too bold. This can sometimes give the appearance of text appearing at a complete font-weight above what it should be. I have, however, stumbled upon the solution.

The issue does manifest itself in most browsers on Mac OS X, due to the way that the operating system handles antialiasing. Mac OS X uses ‘sub-pixel’ antialiasing which results in some text appearing too bold when displaying light text on dark backgrounds. The other way around renders the fonts correctly.

Before Example of overbold text

There are a couple lines of CSS which will resolve the issue in Firefox and Webkit browsers. You only need to apply this CSS to the affected DOM elements and not the whole page (which will result in dark on light text being too light). The CSS is as follows:

-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;

After Example of fixed text

As you can see the text is now rendering the same on both backgrounds. Thanks to Maximilian Hoffman and Dmitry Fadeyev on this one.