CSS - white text on black background, looks bolder - css

Question

When using white text on black background the text looks fatter than it should look. Its pure text with css. I'm using typekit.org font.
Is there any way to fix this or is it some kind of anti-aliasing problem?

Answer 1

The text is bold because of the anti-aliasing algorithm being used in your browser. It's easy to verify. Take screengrabs in IE, Safari, Firefox and Chrome. They all anti-alias differently. Some make the text look thicker than others. Generally the better text looks white-on-black, the fatter it looks reversed.
There's a full explanation here: http://www.lighterra.com/articles/macosxtextaabug/
This will turn off anti-aliasing in most browsers:
body {
-webkit-font-smoothing: antialiased;
-moz-font-smoothing: antialiased;
-o-font-smoothing: antialiased;
}

Answer 2

Actually, it is a known bug:
I was able to fix this by using:
-webkit-font-smoothing:antialiased
Source: this article (cached on archive.org).
Kinda late, but it may still be useful to some.
Just remember this is not recommended. Unless you're on MacOS and are using light text on dark background.

Answer 3

This is not an optical illusion. It is an OS and browser related issue which still exists in 2018. This little snippet demonstrates the problem:
<div style="background-color: #000; font-size: 16px; position: relative;">
<div style="color: #fff;">Hello World</div>
<div style="color: #000; position: absolute; top:0;">Hello World</div>
</div>
If you are sitting in front of a macOS box you might notice the white outlines. They are the result of over motivated font smoothing. Try using
-moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; to reduce this effect.

Answer 4

I've found that a combination of font-smoothing: antialiased or font-smoothing: grayscale (like the others have mentioned) and text-rendering: optimizeLegibility can produce consistent results on light and dark colors and also across different browsers. You need to do proper testing in each browser because you don't get the same results with every font. Sometimes only setting font-smoothing does the trick, sometimes only setting text-rendering does the trick, and sometimes you need to use both.