Text not very readable on different image backgrounds



Text not very readable on different image backgrounds


Question

I've come here seeking for a bit of design help or advice on how I could possibly improve the following:

Like the title says, I'm having a website banner with multiple text displayed on different images as backgrounds. Now, since most of the images are dark, I've set the font color as white. But even then, some of the text is not very readable on a couple of images like:

standard

Since I'm working with CSS, I've tried different options such as:

Adding Text Shadows:

with text shadow

CSS:

text-shadow: 3px 3px 0px #000;

Also tried, creating a semi-transparent box around the text:

with semi-transparent background

Demo

I feel the box one looks out of place.

I've created a fiddle for anyone who knows CSS. If not, please feel free to advice me based on your imagination alone.

PS: You could also advice on using a different font if that would help it stand out better.

2014/04/08
1
30
4/8/2014 10:09:00 AM

Accepted Answer

As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text?

enter image description here

This would allow the font to work on basically any image also.

div {
    position:absolute;
    top:250px;
    left:140px;
    width:500px;
    height:50px;
    background-color:black;
    z-index:0;
    opacity:0.5;
}

EXAMPLE

2014/04/08
22
4/8/2014 10:58:00 AM

I suggest making the font bold (just a change of weight, not the font itself) and respecifying the shadow so that it defines all the edges of the letters:

Example 1

font-family: Raleway;
font-weight:900;
text-shadow: 0px 0px 3px #000;

You can even combine more than one text-shadow to create a definite outline as well as a blur:

Example 2

text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;
Andrew Leach
2014/04/08