The Usability Post
Thoughts on design and user experience by Dmitry Fadeyev

CSS Trick: Improve the Quality of Bold Text in Safari with text-shadow

OS X, the Mac operating system, has a pretty good font rendering engine – it adheres to the intended font proportions closely to create an image of the font on the screen that accurately depicts what you would see printed out on paper.

One complaint that I’ve read about often is that sometimes it makes the fonts a little too blurry or too fat – especially when they are bold. This is made worse when the font is colored in a light color and placed on a dark background.

If you’re designing websites for a sizable Mac audience you can use a little CSS trick to make your bold fonts look better. This involves the “text-shadow” CSS property and will only work in the Safari browser.

Have a look at the following screenshot. Here are three white fonts being rendered on a dark grey background in Safari. All the fonts are bold. You can see that the outcome isn’t very clean – the white seems to spill out, blurring the font.

no text shadow

Now, lets apply a “text-shadow” property to the CSS stylesheet. I’m going to apply a shadow with the same color as the background and everything else (position and blur) set to 0. Here’s the code:

text-shadow: #333 0 0 0;

Here’s what we get:

basic shadow of the same color as background

Much better! The shadow seems to have cleaned up the font a lot. It’s no longer spilling out so much, yet it is still clearly bold.

If you like, you can play around with the shadow property to get some nice effects. For example, the following image shows the shadow color set to black, the position to 1 pixel down and the blur set to 0 (text-shadow: #000 0 1px 0;)

darker shadow moved down 1 pixel

This will only currently work on Safari – however, because a large percentage (majority?) of OS X users do use Safari as their main browser, a simple one line of CSS code here and there in my opinion is worth using to enhance the overall quality of your site.

(Edit: 23 Dec 2010) The above no longer works for Safari (or Chrome) unless the shadow blur is set to at least 1 pixel (e.g. “text-shadow: #333 0 0 1px;”)

“For even falsehood, uttered by the tongue of man, seemed like truth and light before this hopelessly-deaf and unresponsive silence.”

My new book: a translation of selected short stories by Leonid Andreyev, the father of Russian Expressionism from the Silver Age of Russian literature. A piercing, pitiless glance into the heart of the human condition.

☛ Read online

Further Reading

Proust wrote that the true voyage of discovery is not to visit strange lands, but to possess other eyes, to behold a hundred universes that each of them beholds. Thus, in the words of Ruskin, what good books give us is not mere knowledge, but sight.

Sign up to my email newsletter to receive regular recommendations of exceptional books on a wide range of topics including design, art, history and philosophy. A summary of my latest posts will also be included. Sign up below: