Sam Brown

Safari's text-shadow anti-aliasing CSS hack

#348 4th December 2008 at 1pm Article 8 Comments

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.

Safari text-shadow #1

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.

Safari text-shadow #2

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

Post a link to this on Twitter ↩

Comments

Tim Van Damme 4 December 2008, 14:31 #1

Bad news, Sam: The next version of Safari and Firefox, and the current version of Opera kinda trip over this trick, resulting in a pixelated border around the text. Too bad, it was lovely trick…

Sam Brown 4 December 2008, 15:12 #2

@Tim: Actually, if you specify the text-shadow colour to be similar to the background colour (not always black) the resulting pixelated border in those future browser versions does not exist.

But yes, it is unfortunate that Webkit is doing this in their nightlies and will nullify this in the future. A hack indeed.

Wilson Miner 4 December 2008, 15:20 #3

There are definitely situations where it’s a huge improvement (especially with large bold serifs and close letterspacing), but there are also a lot of situations where it actually hurts readability. The default sub-pixel anti-aliasing in Safari is a little heavy-handed, and can really screw up certain fonts, but it favors definition over fidelity. The standard anti-aliasing that gets triggered by the text-shadow trick can really swallow-up small and transparent/light-colored type. If I have to pick one method to use consistently, I just prefer to stick with the default, which tends to be more readable more of the time (if not always as attractive), especially since this workaround looks to be going away in the future.

Spencer Lavery 5 December 2008, 09:44 #4

I for one am a huge fan of this hack, and wasn’t aware of the bug in the nightlies so cheers for bringing that to my attention.

I have noticed another particularly frustrating bug in Google Chrome’s rendering of the property though, it’s almost bad enough to stop me using it, but then I wonder just how far I should go to support beta – and quite clearly buggy- browsers.

Using drop-shadows to help define text has been a technique used in print design for a very long time, it’s a shame we have to call it a ‘hack’ in web design simply because there’s always the risk that browsers will remove its support in the future.

Elliot Jay Stocks 7 December 2008, 13:44 #5

Even if future browser versions implement this differently, I think that – depending on the context – the same basic principle could still be used to improve legibility. Roll on multi-browser support…

Stuart risby 9 December 2008, 12:43 #6

It’s a technique I’ve been using to keep effect on my own site for a while, in my case I have it applied to Georgia for my titles, and helvetica for my copy, and it just stops the fonts getting that little bit too strong.

Adam Sentz 12 June 2009, 09:23 #7

“For those that aren’t aware the CSS property text-shadow can be applied to any element giving it a drop shadow effect.”

This seems misleading since the effect only applies to text. Box-shadow, of course, does the same thing for actual box elements.

Sam Brown 12 June 2009, 22:37 #8

@Adam I’ve updated that sentence to better reflect what I meant: “For those that aren’t aware the CSS property text-shadow can be applied to any element giving its text a drop shadow effect.”

Commenting has closed for this article. Feel free to me.

Hi, I'm the VP of Design at Foursquare in New York City.

– Dribbble • Endorse • Facebook • Foursquare • Instagram • Twitter