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?
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.
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.
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.
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.
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; }
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With