21

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?

  • There have been great answers so far. Are there any use cases where font-shadow might be used to improve readability against a solid background? And could it be used to benefit the copy (or larger body of text) rather than just title and headlines? – Gn13l Jan 27 '15 at 16:21
  • I've added an edit to my answer for this. – Gaurav Ramanan Jan 28 '15 at 15:42
14

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.

  • 1
    1) Could you provide an image as an example of when it could be needed/useful? 2) What does "non-conforming color combinations" mean? (probably I don't get it because of my not-so-good english) – Alejandro Veltri Jan 27 '15 at 15:45
  • 2
    @rewobs WCAG accessibility guidelines require a contrast ratio of at least 4.5:1 between text and the background to ensure readability. If for whatever reason you are forced to use a particular combination of text colour and background colour that doesn't meet that requirement, you can sometimes add a background around the letters using an outline or shadow to ensure sufficient contrast. I'll see if I can find an example. – Matt Obee Jan 27 '15 at 15:49
  • Oh I got it, I used to do it in graphic designs when I got on those without-option situationn, I didn't know it was part of a standard/guideline. Good to know, thanks! – Alejandro Veltri Jan 27 '15 at 15:54
  • 2
    @MattObee One particular instance of that I (unfortunately) come across every now and then is needing to put light text on to a completely mid grey bg (#808080) where no colour will get the required contrast to meet the guidelines. http://snook.ca/technical/colour_contrast/colour.html#fg=FFFFFF,bg=808080 – Roger Attrill Jan 27 '15 at 15:55
  • @Roger Attrill Yes, that sort of thing. We had something where a client wanted a twitter button in twitter blue (#55ACEE) with white text, which is only 2.46. – Matt Obee Jan 27 '15 at 17:39
18

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.

enter image description here

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.

  • This question is the gift that keeps on giving. Thank you for updating your answer. It seems to me that the general assessment of the UX community is that text shadows are best used to improve readability when the background (or whatever may be rendering behind your text) is outside your control. I really enjoyed Code Maverick's answer, but the use-case might be in the minority. – Gn13l Jan 28 '15 at 19:14
  • @Gn13l Glad we could help. Now you have the tough task of selecting the best answer! StackExchange etiquette yous see! – Gaurav Ramanan Jan 28 '15 at 19:33
11

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.

Home Page

Second, the Services page:

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

Services

Lastly, the Products landing page:

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

Products

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

  • 1
    I really like your answer with an example that shows the copy readability being improved by increasing the contrast with an even darker shadow than background. I feel like this technique broadens the possibility for various background color use. – Gn13l Jan 27 '15 at 19:30
  • @Gn13l - Yea, the technique could definitely be used with many other color palettes. Shadows don't always have to be black with text. I would just make my shadows a darker color of whatever color the background is when talking about something other than white. – Code Maverick Jan 27 '15 at 19:35
  • @Gn13l - Also, just in case you were wondering the top bar background on this site is #222, not #000. That's the same color I used for the "dark gray background" on my brother's site that I was referencing in my images. Then for the text shadow I used: text-shadow: -2px 2px 4px #000;. – Code Maverick Jan 27 '15 at 20:10
4

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

jsFiddle screen shot

jsFiddle for actual demo ...

  • 3
    Hey @Superstringcheese, could you screen shot your fiddle and lose the link? This answer might get deleted due to its low quality, as your source is really a link-only answer. – Code Maverick Jan 27 '15 at 18:39
  • 2
    I went ahead and took a screenshot and added it for you and linked the image and text to your jsFiddle. – Code Maverick Jan 27 '15 at 19:08
  • I considered the demonstration supplemental to my answer, but thanks for the improvements. – Superstringcheese Jan 29 '15 at 15:05
2

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.

  • For black on white I still wouldn't use the #000 for black, I'd use #111 or something a tad lighter. Just like I wouldn't use #fff, but #f0f1f1 or something similar. Not to mention, the OP did say "Can" not "Does" therefore your first statement talking about required doesn't really fit, but I follow you =D – Code Maverick Jan 27 '15 at 19:03
  • good point - I've updated my answer to be more straight forward. – DaveAlger Jan 28 '15 at 21:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.