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.
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:
- If it’s content that is meant to be read, and actually consumed, don’t use text-shadow. Period.
- If it’s a headline/html5 logo, you might be able to use it, but 90% you shouldn’t. Think hard first.
- 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.