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.

enter image description here

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

Nope, this is an optical illusion, open it in photoshop and invert the colors, it looks the same. — Benjamin Gruenbaum, Jan 23 '13 at 10:20
@BenjaminGruenbaum - I just did, and no it doesn't look the same. — Philip, Jan 23 '13 at 10:21
maybe I don't have an artist's eye then because it looks the same to me :/ — Benjamin Gruenbaum, Jan 23 '13 at 10:25
yeah, or maybe we just have different screens =) Thanks though! — Philip, Jan 23 '13 at 10:26
In Chrome, I took this fiddle http://jsfiddle.net/YxHkz/ and screencapped it and then zoomed in to get this: http://cl.ly/image/3k1U1N3Z240C It looks exactly the same pixel for pixel to me. — Alex Wayne, Jan 23 '13 at 10:28
maybe this font you are using has a white border... did you try to check for it? maybe changing the background and font color to see if there's any trace of white border... — periback2, Jan 23 '13 at 10:30
This is not an optical illusion. It is a **rendering issue**. The fraction of a pixel difference as a result of anti-aliasing may not be obvious to some devs - but to people trained in design, and those who are working between Illustrator / Photoshop and a browser, this is an eye-sore. Do not down-vote this question - it is completely legitimate. — Larry, Feb 12 '14 at 07:47

score 36 · Accepted Answer · edited Sep 24 '14 at 13:30

36

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

edited Sep 24 '14 at 13:30

Malloc

15,434
34
105
192

answered Apr 02 '13 at 20:57

Staker Humanoid

480
5
8

10

Yeah this works - It's really annoying when people try to claim it is an optical illusion when it clearly isn't! – advert2013 Feb 12 '14 at 11:52
2

I think the moz version should be -moz-osx-font-smoothing: grayscale See [this answer](http://stackoverflow.com/a/17927764/896907) – josef Sep 09 '15 at 21:55
3

Hmm, I still get thicker font renderings on chrome/windows with white text. – Ricky Boyce Oct 01 '16 at 11:54

score 8 · Answer 2 · edited Jul 19 '17 at 21:38

8

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.

edited Jul 19 '17 at 21:38

Paweł Gościcki

9,066
5
70
81

answered Jan 14 '14 at 02:04

Armin Cifuentes

517
1
6
17

1

The link was down. Mirror here: https://web.archive.org/web/20131019233655/http://tanookilabs.com/your-fonts-look-bad-in-chrome-heres-the-fix – geon Jan 20 '15 at 14:29
Two archived issues and 5 years later latest Chrome still renders light text on dark background in a totally disgusting way on MacOS. That sucks so much... – Paweł Gościcki Jul 19 '17 at 21:36
@PawełGościcki macOS has a system-wide setting for "stem darkening" which is Apple's fancy name for the fattening thing. Go to System Preferences > Appearance and turn off "Use LCD font smoothing when available". This will turn off fattening for the whole OS, including built-in apps like Finder and Terminal.app. And Google Chrome. – Dev Jan 24 '22 at 17:28
@Dev you most definitely don't want to disable font smoothing in your OS. Everything will look way worse if you do that. Also, on MacOS this option is no longer there, you need to execute a command and reboot. – Paweł Gościcki Jan 29 '22 at 18:03
@PawełGościcki This isn't the same as disabling anti-aliasing, it just disables stem darkening and *subpixel* antialiasing. I have used a Mac for years with that "font smoothing" turned off, and it looks much better. Subpixel AA is generally designed for screens with a relatively low pixel density, where you can see the individual pixels and subpixels actually matter for accuracy. On Retina displays, and high-resolution PC monitors, it doesn't help much. Grayscale AA is more than enough on those screens. So combined with the stem darkening being gone, disabling font smoothing is fine. – Dev Jan 30 '22 at 03:24
It's worth noting that even after my Mac broke (and is out of warranty so Apple won't fix it), and I had to switch to a PC laptop running Windows, I still turned off the ClearType subpixel AA because the color fringes are obnoxious to my eyes and in screenshots. Now, on *Windows*, turning off subpixel AA is much more detrimental, as Microsoft cares much less about typography and design, so you will get stupid issues like kerning being rounded to the nearest pixel, and the dots on the top of lowercase `i`s being misaligned from the actual stem, and so on. But apps supporting HiDPI work fine. – Dev Jan 30 '22 at 03:27
On macOS that is total non-issue as even apps that run in low-DPI mode have correct font rendering and look just as good, if not better than they would with subpixel AA. – Dev Jan 30 '22 at 03:28

score 1 · Answer 3 · answered Jun 21 '18 at 10:40

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.

score 0 · Answer 4 · answered Jan 09 '19 at 06:33

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.

CSS - white text on black background, looks bolder

4 Answers4