Can text shadow enhance readability?

Question

CSS font shadows are often used to help make text stand out (or in, or colorful, or many other fancy things.) I'm wondering if it can be used to aid readability.

I know finding the right amount of contrast can help greatly on digital screen readability. Font shadows are always surround the text, so it could be used to control contrast, both brightness and color. reference: Is there a problem with using black text on white backgrounds?

Answer 1

In some situations a drop shadow or stroke can be used to maximise accessibility and maintain the contrast ratio between text and the background. I have used this method once or twice when dealing with strict brand guidelines that demanded non-conforming colour combinations. It is mentioned as a technique for meeting the SC 1.4.3 (Contrast) criterion of WCAG:

...if a letter is lighter at the top than it is a the bottom, it may be difficult to maintain the contrast ratio between the letter and the background over the full letter. In this case, the designer might darken the background behind the letter, or add a thin black outline (at least one pixel wide) around the letter in order to keep the contrast ratio between the letter and the background above 4.5:1.

Answer 2

Apart from the answer given, I would like to mention one very important Use Case where the solution is nothing BUT shadows.

Text on an image

When you don't have control over the image on top of which you are writing text, you have to ensure proper contrast for best readability. A Big hero Image seems to be rage these days. A dark shadow is added behind white text and a light shadow behind black text.

The old Nexus website made heavy use of the fact, because the version of Roboto that looks amazing on photos is the Ultra Thin one. It is white coloured text with a dark shadow so as to give contrast on top an image without sacrificing font-weight or adding an overlay. We used this fact on our own website.

EDIT After OP has posted the comment, a use case of having shadows on top a solid background may be where we are not control of the background (say its coming from a CMS). If we have white text, we can use a black shadow and the text will be visible on black backgrounds and somewhat in white backgrounds as well.

Answer 3

To me, the answer is yes, especially for dark themed sites.

Here are some images from a site that I designed for my brother's roofing company. He wanted an all dark theme. So I gave him a dark gray background, some off white and gray body texts, all with darker CSS3 shadows.

^{( Small caveat: the images actually came out darker than the site actually is when I took the screen shots )}

First up, Home page:

Dark gray background.
Large gray, white, and red body text fonts.
Shadows darker than the background.

Second, the Services page:

Dark gray background.
Small gray and white body text fonts.
Shadows darker than the background.

Lastly, the Products landing page:

Dark gray background.
X-Large mixed light and dark gray logos.
Shadows darker than the background.

I think you can see that without the shadows, it'd not only be tougher to read, but wouldn't pop as much.

Answer 4

It can, by increasing the contrast between the text and the background, which is its primary purpose.

jsFiddle for actual demo ...

Answer 5

Text shadows can make text pop but do not make text more readable.

I'll concede that adding text shadows around white text on a white background will make the text more readable since anything is more readable than invisible. I disagree, however, that using text shadows around black text on a white background is more readable than simply black text on a white background.

Proper contrast is the key to readable text

If you want the text to stand out because it is special then adding text shadows can accomplish that. If you are just trying to have the most readable text, however, then high contrast without text shadows is the way to go. For example, some version of black text on a white background.

If you know the environment is going to be a dark server room or something then the server room guy will thank you for using some version of light text on a dark background.