Take the 2-minute tour ×
Graphic Design Stack Exchange is a question and answer site for Graphic Design professionals, students, and enthusiasts. It's 100% free, no registration required.

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.

share|improve this question
3  
A soft black outer glow on your text (shadow in all directions) can sometimes be enough to give it more contrast without looking like you've put anything behind it. –  John Apr 8 at 13:06
    
@John I thought about glow too, but without having a lot of glow effect, the problem of not-readable text remains and since I'm working on a corporate website, I decided to strike it out since that would look unprofessional. Thanks for suggestion though! –  I Can Has Cheezburger Apr 8 at 13:22
2  
Should have emphasized how subtle I was talking. Like 20-30% and wide spread where you would hardly notice it. If it looks like a glow, or you can see a transition - it is too dark. Use just enough to make the image around it fade to a slightly darker tone where it meets the lettering. –  John Apr 8 at 13:34
    
@John Hmm sounds interesting, I'll give it a try too. –  I Can Has Cheezburger Apr 8 at 16:17

3 Answers 3

up vote 7 down vote accepted

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

share|improve this answer
    
This looked elegant. Thanks! –  I Can Has Cheezburger Apr 8 at 11:35
    
@ICanHasCheezburger No problem! I face the same problem a lot doing website work such as banner images and I found this to be the most pleasant looking way of getting around it as it works well most of the time. –  SaturnsEye Apr 8 at 11:47

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;
share|improve this answer
    
Thank you for your time! I've planned to use the text-shadow provided by you along with SaturnsEye's solution. –  I Can Has Cheezburger Apr 8 at 11:35
    
@Ican I didn't do a box because you said not to. "Also tried, creating a semi-transparent box around the text. I feel the box one looks out of place." But your site, your call... –  Andrew Leach Apr 8 at 11:37
    
True that, but after seeing SaturnsEye's solution I realized it did look good when the size and color was changed. Sorry for the wrong choice of words. Maybe I should explain better next time. –  I Can Has Cheezburger Apr 8 at 11:49

Give it a black transparent background and some padding

background-color: rgba(0,0,0,0.5);

padding: 0.5em;

Simply play a bit around with those numbers but it should give you an usable result.

share|improve this answer
    
Thanks for your time! I realized that if you have a case where the inner element needs to have a different opacity in the outer, opacity property won't help in this case whereas setting the opacity in the background-color property does the job. Like in here –  I Can Has Cheezburger Apr 8 at 11:44

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.