Readability of overlaid text on images

Question

Text on images seems to be very popular these days, and it does look nice. However, it can be hard to control the legibility of the text. I have darkened the background, and added text-shadow, and it looks fine to me now, but others still say it's not that easy to read.

I was wondering what is the consensus on UX for said design style? Are visitors more compelled to read it?

Answer 1

Readability is hard to get right

Great question. It's always good to question the point at which style destroys function.

---

Example scrim formats

---

I've done quite a lot of user testing on scrim-based image captions (where there is a partial or complete semi-transparent overlay on the image and contrasting text).

Here's what I've found, in no particular order:

• Overlays are hard to get right - To get an overlay right, you are balancing overlay color and transparency with text color, font and relative size of the text vs image. That is a LOT of variables.
• It's even harder when images are not known in advance - For news sites, or social sites (FB, Pinterest) the site does not know what kinds of images will be posted, so creating a generic solution for text overlays is very difficult. When using the popular dark-scrim and light-text, the text will be more legible with low-contrast, light images and less visible with high-contrast, dark images. So some text will appear more readable than others, which can cause confusion or make the layout look weird.
• Overlaid text works best with heavyweight fonts and short, 1-line captions. Heavy fonts carry enough visual mass to render the text legible against a variable background. If your caption is too long to fit in one line, I've found it's better to wrap it (see the BBC News app for example) rather than reduce the font size.
  • I would NOT use overlaid text for anything longer than 6-8 words. Users reported being really frustrated at reading longer text....overlaid text is really taxing on the brain because of the varying background so the task of reading can get really frustrating quickly.
• Google's Material Design has some helpful tips on using scrims. Note that Material Design shows examples of both overlaid captions and captions below images: I think this is an acknowledgement that scrim captions are very difficult to work with.

My conclusion was, it's OK to use text overlays when:

• Images are sparse
• Heavyweight fonts can be used
• Captions are small and ideally 1 line
• Images are known/static
• The text is not absolutely crucial (e.g. the title of a photo is often less important than the title of a news article)

If your app fails 1 of these conditions, it may still be usable. If it fails 2 or more of the conditions, I would think twice about using overlaid text.

Answer 2

It is hard to provide more legible information than black text on a white background but not all things are black and white so let's look at an example...

1. Images provide emotion

Choosing anything other than a high contrast pattern of black on white or white on black makes text information harder to consume. Sometimes this is desirable. For example, placing emoticons inline with text does a better job of conveying feeling over plain text alone.

Medium is a tool where people can share their stories with each other online. At launch they chose to place a higher priority on emotional connection over readability (and succeeded in doing both)

Source: medium.com

2. Text provides information

The irony is that Medium has recently replaced their large image on the welcome screen with a more straight forward and responsive list of content that is easier to read. The page loads quicker and reads well on any device but notice the difference in tone. Doesn't it feel more formal, more distant and even a little colder?

Long time readers of Medium appreciate how easy it is now to access all the best content and how responsive the site is on any device but it comes at a cost.

3. The best of both worlds

Neither choice is better or worse than the other but here are a few things to keep in mind when choosing to place text on top of an image.

• Don't use huge image files that bog down the site. If the image you are using slows down the loading speed of the page then you are more likely to get no response at all instead of the desired emotional response. Smaller devices should use smaller files that load faster.

• Make sure the image provides proper context. For example, placing THIS IS CRITICAL text on top of clowns may elicit the wrong emotional response (unless you're a comedian)

• Make sure the text is short because nobody wants to read a paragraph on top of a distracting image.

• A user should know what to do without ever reading the text on an image (see below for an example where the text is mostly optional). If text is important and needs to be read then don't place an image under it.

Answer 3

I'm not a designer, but consider all of those meme posts with the white text with black outline? There is a reason for that. It's white to pick to highly contrasting colors and use one as an outline. Black and white is just one example.

Answer 4

I was wondering what is the consensus on UX for said design style?

When it comes to broad visual design topics, there's rarely consensus.

Are visitors more compelled to read it?

This is a visual design question and depends entirely on the greater context...what the content is, what the image is, what the message is, the audience, the implementation of the design, etc.

If you're asking if you should place text on an image, well, again, it all depends on the design itself. Both in terms of concept and implementation.