CSS – white text on black background, looks bolder

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

Leave a Comment