CSS - white text on black background, looks bolder

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?

Solution 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;
}

Solution 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.

Solution 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.