PSA: Time To Step Out From Under Text-Shadow

Over the past few, weeks I’ve been noticing more and more often that when I highlight text it gets blurry and muddled. The culprit that causes this being text-shadow. Until now, I’ve normally marked it down to some obscure default in a theme, or something that makes it appear so frequently.

Twitter Text-Shadow

Can we please stop this.

Unfortunately, I noticed it on the new StackExchange homepage and decided to tweet my outrage. While I was there I decided to check Twitter. Sure enough, in their footer box they had the same damn affliction. While they do it mostly right, it still bothers me. Can we please get to grips with this.

Here are a few rules:

  1. If it’s content that is meant to be read, and actually consumed, don’t use text-shadow. Period.
  2. If it’s a headline/html5 logo, you might be able to use it, but 90% you shouldn’t. Think hard first.
  3. If you don’t know why you need it. You probably don’t. Let it go, you won’t regret it in the least.

So let’s all play our part and clean it up. Stop using text-shadow in your stylesheets.

  • When it comes right down to it, though, this is more of a browser implementation issue than a design issue. Text shadow can accentuate things very nicely (look at the “Post as…” button right here in this comment box; look at Apple’s website menu, etc.). However, it would be nice if browsers would disable text shadow when you highlight text.

  • Josh

    I have the same pet hate. Here is an alternate solution: 
    http://adamwhitcroft.com/baseline/posts/readable-text-shadows-when-selecting-text/

  •  It’s true, my main issue is with highlighting, which could be a browser implementation issue. But even with your examples, it’s nice, but adds so little. I don’t mind the little flourishes on buttons, but it’s not necessary and luckily it isn’t content. It simply shouldn’t be used on paragraphs of text.

  •  Thanks for the link, Josh. Now to get people to implement it if they’re going to use text-shadow.