OS X has gorgeous native anti-aliasing (although I will admit to missing 10px aliased Geneva — *sigh*). This is especially true for dark text on a light background. However, things can go awry when you start using light text on a dark background. Strokes thicken. Counters constrict. Letterforms fill out like seasonal snackers.
So how do we combat the fat? In Safari and other Webkit-based browsers we can use the CSS ‘text-shadow’ property. While trying to add a touch more contrast to the navigation on haveamint.com I noticed an interesting side-effect on the weight of the type.
The second line in the example image above has the following style applied to it:
text-shadow: 0 0 0 #000;- Source: /code/knockout-type/1.txt
This creates an invisible drop-shadow. (Why is it invisible? The shadow is positioned directly behind the type (the first two zeros) and has no spread (the third zero). So the color, black, is completely eclipsed by the type it is supposed to be shadowing.)
Why applying an invisible drop-shadow effectively lightens the weight of the type is unclear. What is clear is that our light-on-dark text is now of a comparable weight to its dark-on-light counterpart.
You can see this trick in effect all over ShaunInman.com and in the navigation on haveamint.com and Subtraction.com. The HTML and CSS source code used to create the example images used in this article can be found here.
Comments
17/12/2006
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?.
17/12/2006
Thanks for the tip, Shaun. Another reason I need to get a Mac. (As if I needed one more.)
17/12/2006
Interesting short “anti-aliasing-comparison”, Shaun. Thx!
17/12/2006
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.
18/12/2006
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).
18/12/2006
Thanks for the tip. Fat white type has been bugging me for a long time.
19/12/2006
-moz-opacity: 0.9999; does the same thing for Gecko-based browsers.
21/12/2006
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.
26/12/2006
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!
06/01/2007
Am I missing something? This looks great in Safari but when seen in Firefox the white copy goes to Black.
Any suggestions?
16/01/2007
Great tip, I just it instantly on my website. Thank you.
15/06/2009
This broke on Safari 4. The fix is this line:
text-shadow: 0px 0px 20px rgba(255, 255, 255, 0.1)
08/12/2009
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
25/12/2009
Look, I’m a Mac guy, and not much of a type expert, but I’m inclined to disagree. It seems to me that the absolute width and relative inverse colors of the zoomed-in example “a” were proportionate the same in the first example, whereas in the second, it was discernibly smaller in the white-on-black example. To my mind, this narrowing makes the overall readability just a smidgeon less, except in the Mint example, where I find the Firefox rendering significantly more readable.
Impress us