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:
Since I'm working with CSS, I've tried different options such as:
Adding Text Shadows:
CSS:
text-shadow: 3px 3px 0px #000;
Also tried, creating a semi-transparent box around the text:
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.
Accepted Answer
As an alternative to the already great answers, how about adding a black div with 50% opacity behind the text?
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;
}
Popular Answer
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:
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:
text-shadow: 0px 0px 3px #000, -1px -1px #000, 1px 1px #000;