Browser Font Aliasing Light on Dark vs Dark on Light

Question

Here is a screen grab showing the same face at the same weight as displayed in Chrome 34 on OSX. The only difference is the colour of the text and the colour of the background:

And in case that isn't clear enough, here is an enlargement:

So it's pretty clear the difference isn't optical. Chrome is adding weight to the light text on a dark background. Other browsers do this to varying degrees.

I can understand that in some cases this may help legibility, but in this case at least it makes the text look too bold. How can I counteract this extra bolding?

Answer 1

The sub-pixel antialiasing of light text on a dark background in OSX is horrendously broken and has been horrendously broken forever.

There may be a way to use the font smoothing options in Chrome to counteract this problem but the way I work around this is to choose fonts that have a number of weights and substitute lighter weights when rendering text on a dark background. Source Sans Pro, Merriweather and Source Code Pro are good open source fonts that have this property.