This is actually an optical illusion. I learned about this fun little phenomenon in a typography class in art school way back in 1993-94. You can actually test this theory out yourself – set x point type in Illustrator black text on white and then another (same size) reversed out. Now print it. And stare at it. The white text on black is going to look fatter. Its just the way our eyes perceive it.

I do like this tip though.

Thanks, I was freaking out a little bit trying to work out what was going on with the ‘phatness’

Noticed that as well. Seems as if sub-pixel anti-aliasing is turned off when using drop shadows. You can try and turn it off manually in the ‘appearance’ pane in the system preferences by setting the anti-aliasing mode to ‘best for CRT’. The result is that all light text on dark background looks thinner. Normal text looks worse, though.

Apparently, this will improve in the future. Firefox 3 and the new Camino dev version use Cairo which somehow manages to display the text better even with sub-pixel anti-aliasing turned on. See here for an example: Hickdesign: Cairo beats Safari?.

Thanks for the tip, Shaun. Another reason I need to get a Mac. (As if I needed one more.)

Interesting short “anti-aliasing-comparison”, Shaun. Thx!

Interestingly enough, there’s a bug in Gecko that also causes OS X to revert to Standard (non-subpixel rendering) anti-aliasing, this time when the CSS property “opacity” is in use and set to any value other than its default of 1.

So I guess if you wanted this pull off this effect in Camino and Firefox on Mac, as well as in Safari, you could simply specify “opacity: 0.9999” or something to that effect on the body element. The downside is, there’s no apparent way to pick and choose where the effect is applied (it is a bug, after all), which might make smaller text too thin and difficult to read.

One thing to be careful of when specifying opacity, Safari seems to choke up on animated JavaScript effects when transparency is used (the original version of Si8 called for a semi-transparent sidebar until you rolled over it—but that resulted in the shelf animation being painfully slow in Safari).

Thanks for the tip. Fat white type has been bugging me for a long time.

-moz-opacity: 0.9999; does the same thing for Gecko-based browsers.

Wow, that’s great! I’m just finishing up a site with light-on-dark type, and this is fantastic. I’m not into introducing the -moz-opacity thing because it’s not so very valid, and I don’t want to have to add another CSS file just now (I already have a separate “iesucks.css” for IE muck).

Thanks, Shaun! Cheers!

Am I missing something? This looks great in Safari but when seen in Firefox the white copy goes to Black.

Any suggestions?

Great tip, I just it instantly on my website. Thank you.

This broke on Safari 4. The fix is this line:

text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1)

I read another interesting blog post on sub-pixel rendering over at Ordered List:

http://orderedlist.com/articles/thining-text-in-safari-under-snow-leopard

It goes black in my version of Firefox running under Ubuntu. Very strange. I’ll see if I can hack a fix.

Thanks for the tip I used the fix
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1)
and it looks great.