31

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.

4
  • 4
    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, 2014 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!
    – AyB
    Apr 8, 2014 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, 2014 at 13:34
  • @John Hmm sounds interesting, I'll give it a try too.
    – AyB
    Apr 8, 2014 at 16:17

3 Answers 3

21

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

1
  • @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, 2014 at 11:47
17

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;
3
  • Thank you for your time! I've planned to use the text-shadow provided by you along with SaturnsEye's solution.
    – AyB
    Apr 8, 2014 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... Apr 8, 2014 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.
    – AyB
    Apr 8, 2014 at 11:49
4

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.

1
  • 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
    – AyB
    Apr 8, 2014 at 11:44

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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