Knockout Type - Thin Is Always In

17 Comments

Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.

Got something to add? You can leave a comment below.

  1. Jeff Kenny

    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.

  2. Julian Stahnke

    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?.

  3. Alex

    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.

  4. Shaun Inman

    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).

  5. Ryan Miglavs

    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!

  6. Eric Blankfield

    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

Be friendly / use Textile