Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

CSS - white text on black background, looks bolder

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.

enter image description hereenter image description here

Is there any way to fix this or is it some kind of anti-aliasing problem?

like image 416
Philip Avatar asked Jan 23 '13 10:01

Philip


People also ask

Why is white letters hard on black background?

White has 100% color brightness, and black has 0% color brightness. Such a disparity in color brightness creates intense light levels that overstimulate the eyes when reading text. This causes the eyes to work harder to adapt to the brightness.

Is white text on black background good?

While white text on a black background provides very high value contrast, it is less readable and causes greater eye fatigue than black text on a white background. All light-colored text on dark backgrounds causes eye fatigue.

What is white text on a black background called?

Optimal legibility requires black text on white background (so-called positive text). White text on a black background (negative text) is almost as good. Although the contrast ratio is the same as for positive text, the inverted color scheme throws people off a little and slows their reading slightly.

How do you get white text on black background?

Select the paragraphs where you want to make the change. (Highlight all the text.) Choose Borders and Shading on the Format menu, click the Shading tab at the top of the dialog box, and set the paragraph shading to black. Choose Font on the Format menu and set the Font to white.


1 Answers

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; } 
like image 85
Staker Humanoid Avatar answered Sep 25 '22 08:09

Staker Humanoid