Safari's text-shadow anti-aliasing CSS hack
Now if that’s not a buzzword laden post title to get you interested I really don’t know what is! Wilson Miner posted a message to Twitter earlier today stating that he was removing the ‘text-shadow Safari anti-aliasing hack’ on his site as it was bugging him. Let me explain what it is exactly and how I think it can help improve the look and legibility of some text in Safari.
For those that aren’t aware the CSS property
text-shadow can be applied to any element giving its text a drop shadow effect. The property has four distinct values; colour, horizontal distance, vertical distance and blur radius. The
text-shadow property has been working in Safari for a while now but not many other browsers have implemented it.
Here are two examples of
text-shadow being used, and neither to give a drop shadow effect but instead to apply a faux anti-aliasing effect in Safari. This simple little CSS hack produces a nice effect and can certainly sometimes improve the readability of the text.
The above example is from the recently redesigned Jam Factory, Gav is using the rather nice Bookman Old Style font for his body copy and at this size it isn’t quite as crisp as it could be (left side). By entering this simple bit of CSS into the stylesheet
text-shadow: #000 0 0 0; on the body element, it can dramatically improve the smoothness and readability of the copy.
This second example is from an interface I am currently building and while this is much subtler I still think it’s an improvement. Certainly on wider or bolder fonts it makes a big difference, Bookman and Helvetica being used in these examples,
text-shadow is not used on this text on my blog as it makes Lucida look a bit too skinny.
Of course this currently only works in Webkit based browsers at the moment, it will definitely be interesting to see if and when other browsers roll out this property if it makes as big a difference to them. Used sparingly and thoughtfully I think this is a really useful technique to clean up some of the rougher fonts that Safari renders.
UPDATE: Follow up: Safari’s text-shadow anti-aliasing CSS hack