When overlaying text onto images, the most important thing you need to consider is readability. If the text being placed on top of the image doesn’t have enough contrast with the image itself, the message will get lost and frustrate visitors as they try to work out what it actually says. You don’t want visitors to have to work hard just to read something on a website. This can contribute to them ignoring the message you want to get across or even cause them to leave the site.
What Not to Do
First we need to get an understanding of why this is important. Here are some examples of text being placed on top of images making the text difficult to read.
The combination of the thin typeface, white text and white and light colours in the main image on the Knoxville Tourism website make it difficult enough to read without having to look closely.
Some of the destinations on the luxurious destinations list on Elegant Resorts get almost completely lost due to the use of a black and white image with white text. This is especially bad as these are links to elsewhere on the site. If the user can’t read them, what chance will they click on them?
Australia’s Official Tourism Website use a drop shadow on the text to try and make it more readable but unfortunately the effect is too subtle to be able to read it at a quick glance.
4 Ways of Making Text on Images More Readable
1. Position the Text Appropriately
As you can see from the example above on Pacific Benefits Group, the white text is placed on top of the darkest part of the image. This makes it easier to read than if it was placed over the sky or over the water.
2. Increase the Contrast
Tweetground use a dark coloured text on a light background. This contrast allows the text to be read easily. The obvious ways to increase contrast is to user either dark text on a light background or light text on a dark background. Look back at The Principles of Good Web Design Part 3: Colour here on Inspect Element to see more examples of good and bad examples of colour contrast.
3. Use a Transparent Overlay
The previous two tips work well for static images and text, but what if they are being pulled in separately from a content management system? Here we could get issues where the positioning of the text may not be appropriate to the image. In other words the image and text have not been ‘designed’ specifically for readability so you’ll need some way of keeping the text readable.
As in the example above Manchester City’s website, they have used a transparent black layer in between the image and the text. The contrast between the text and image remains at a very readable level no matter what image is used. This transparent layer also allows the image to show through so even though some of the image will be covered you’re still able to see what is underneath.
4. Drop Shadow
Beak use drop shadows on the text to give it extra definition against the background image. When used well this is a perfectly acceptable technique but doesn’t tend to work well on busy images as the shadow gets lost amongst the noise of the image itself. Also, the only way to implement this for use within a CMS is to use CSS3’s text-shadow property which is only supported by modern browsers and not by any versions of Internet Explorer.
Nice article. While I’m only a hobbyist designer, I cringe at text that is unreadable because of a poor background choice. I see it all the time in brochures and take-away menus.
I’m a fan of the transparent overlay idea with the jagged outline as shown in the example.
Good post! Important stuff.
Adding dropshadow sometimes work but can look a bit ‘photoshopped’. But at least you did mention it.
The Transparent Overlay looks really good.
Interesting post – I also find it hard sometimes to make text on images good readable. Thanks a lot for this.
Keep up the good work!
Nice short article and some great examples of those pages we have all come across that seemed to have been designed but not tested by anyone!
Tom, would be hugely grateful if you could have posted at least a few examples of how to sites that showed how some of the good points were achieved. You probably know a few.
Thanks anyway.
Very nice post, I completely agree with you and with these ideas here.
Nice post! These are important things that beginning designers need to know and have solutions.
If you’re using a graphic (not text from a CMS), I like adding a 1 px black stroke to the text, if it’s too strong of an outline, just take the opacity down until you’re more comfortable with the look. This is a nice, subtle way to distinguish text from the background.
It’s a fantastic article, but unfortunately, everyone knows that the text and images should be appealing and readable.
Also shown in example 4, blurring of background (when appropriate) diffuses lines that distracts viewers from the text.
Transparent overlay wins every time I think. It’s very much a modern trend and looks clean and interesting. Of course you can also use a block colour background too. It may cover up some of the image but make the text REALLY stand out!
Great article. I use Drop Shadow a lot as well as the Transparent overlay.
You posted a great text-design reminder. Keep it clean, simple, and most important… readable.
just a small drop shadow makes it so much more readable
Surely some comment should have been made about the fact that you should SPELL your words correctly?
Tweetground – “Are you twetting from the right ground?” being a superb example.
Haha, well spotted Ken! Regardless of their spelling, it is still a relevant example for the article.
One very subtle way of increasing contrast around the text is to add a 1px size drop-shadow in Photoshop, distance offset set to zero. Play with the opacity and shadow colour. This gives a thinner than 1px outline around the text. The effect should be subtle, but noticeable if you toggle it on/off.
how are the texts in manchester http://www.mcfc.co.uk/ be as big and as smooth as that? did they used an anti aliasing or some kind of css hack? cuz its not only very readable, it also doesn’t have any rough edges no matter how big the font is. anyone have an idea?
again a debatable issue and it is everlasting
2 Mark: the City website uses h2swf http://wiki.github.com/mgunneras/h2swf-replacement
@Mirek – hey man, thanks for the reply but the link doesn’t give me anything. Is that an application or something? a plugin?
Mark, I haven’t heard about h2swf before, I just figured out from the source code that City uses it and then googled. I don’t know why that page on Github is down now. It didn’t say much though, just that h2swf is similar to sIFR and can add background boxes, you can see that on the City website.
It seems h2swf is jQuery plugin, but I have no idea if this is the only way how to use it or how to set this up.
It’s not very helpful, but it’s all I’ve got.
hey
great post…wondering if there is a way to change the colour of the text based on the colour of the pixels in the background ?
imagine a photo site, and the images are displayed full screen, with the text z index on top.
so if the current photo on display, is dark (for the area behind the text) then you make the font white, and flip it for the reverse.. just wondering if its possible ?
cheers
cuan
Thank you … That has me very helped.