Fixing overbold text on Mac web browsers
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.
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;
Example of fixed text