What's a good way to use text over a picture?

Question

My dilemma is aptly shown in the picture below:

How can I make the text more legible?

Answer 1

Alternatively, you can add semi-transparent black background behind the letters.

Example taken from: http://css-tricks.com/examples/TypeOverImage/

Answer 2

Follow conventions already tried and tested in video captioning.

1. High contrast outline
2. High contrast shadow
3. High contrast background stripe/box (usually transparent)
4. Place text strategically in dark or light areas

Answer 3

If you use a black border around each contur of the white letter, the text would be more readable. If the background is black or dark, only the white will show and if the background is white or light the reader will see the black contour of each white letter.

You can see this effect on foreign movies with text translation even I the colors user often are yellow and black. Like this image:

Answer 4

Best options:

1. Put it in a box, fully opaque or semi-transparent, your choice. A few examples on these landing page templates. Another example here: https://soundcloud.com
2. Add a stroke to the text(like Benny's answer)
3. Use a limitted set of images, that means find the right picture(s) and make the text in contrast with the image(example, if the picture is dark, use bright text, if its bright use dark text, color contrast is also good)

Other options > use a glow or drop shadow for the text but I don't recommend that because what looks readable on your screen might not be as readable on other screens(brighter/darker than yours)

Good luck!

Answer 5

If you're like me and care a lot about the visual design of your site I'd use one of the following techniques:

1. Darken the background on your photos and use white text, as seen here on my website

2. Use a semitransparent box behind your text content, similar to this example from the Soundcloud android app

3. Use a gradient or a blur effect as seen in the example below from Circa News to partially dim the section of your photo that has text on it in order to draw attention to your text, as well you may want to add a slight background shadow to your text.

Answer 6

A semi-transparent white (or a contrasting colour) box beneath the text looks both professional and readable:

Answer 7

You are attempting to show both the picture and the text in the same space.
If it's for desktop then you might add a vanishing (animated) contrasting foggy background to make the text legible and the picture less visible, and renew the background when the user moused over the picture.

Answer 8

In addition to the above suggestions (semi-transparent box around the text, outlines, shadows, contrasting colour, etc.) also watch where on the picture you place the text and of course on what picture. On a noisy picture nothing but a fully opaque background or a very thick border will make the text easy to read. Pick an area with as few lightness/colour changes as possible. In the above example such areas are bottom left corner and top middle section. In such areas nothing more than a contrasting colour is needed. But noisier areas and unknown images (for example random or not really prepared as a background to a banner) require stronger measures: more opaque backgrounds, stronger shadows, and so on. Also, thicker fonts are somewhat easier to read against an uneven background, but still require a good contrast against the background.

Answer 9

Sometimes you can calculate the average color of the photo or its luminance and choose between black / white based on the outcome.

More here: https://stackoverflow.com/questions/596216/formula-to-determine-brightness-of-rgb-color