2

I'm trying to make my text stand out in front of my image. I've seen sooo many websites that do this well: e.g. http://brewsters.ca/

However I clearly am not: http://immehabayas.com/

I wanted to know what exactly are they doing to the images so that the text stands out so well (even without one of those containers with opacity).

NOTE: I'm not looking for: "why don't you use a black container with an opacity.

THANK YOU!

  • 2
    You realize your sample uses a toned down, tinted, photo to darken it, right? – Scott Aug 4 '15 at 2:14
  • You need to either darken the underlying images, add strokes or shadows to the text, or use a heavier font -- or a combination of all of those. – Hanna Aug 4 '15 at 4:23
7

The website you showed as example uses a very thick/bold and big font. They also modified the background to be monotone and have a "flat" color to create more contrast. They seemed to have blurred some zones so the details of the background pictures don't mix up with the text.

It's possible you can't do that to the images on your immehabayas.com website though, especially if it's a responsive website. Unlike your website, it doesn't matter if details from the brewster background are lost to increase the contrast of the background + text; you might want to show the details on your pictures though. A very big and soft drop shadow can create a similar effect, and you can do this in CSS instead of adjusting each slider images separately.

Your website uses a small and skinnier font and uses the original image. Your text is white and the background image has a lot of white sometimes. That's why you can't get the same effect on your text.

Maybe an idea could be to add a very subtle blur behind your text, and select another font that has a bit more impact. You could also add a subtle black shadow around that text.

Some examples of what can be done:

These examples use OpenSans extra bold.

ORIGINAL PICTURE:

Original picture busy background

BLACK DROP SHADOW + BIGGER FONT

How to make a text on website look clear with drop shadow

BLACK DROP SHADOW + EVEN BIGGER FONT

How to use font size and drop shadow to increase text visibility

BACKGROUND TRANSPARENCY + BIGGER FONT

How to use background box transparency to make white text more visible on a picture

BACKGROUND COLORED BEIGE BLUR + BIGGER FONT

How to change background color and subtle blur on website text banner

BACKGROUND COLORED BLUE BLUR + BIGGER FONT

Change the background color of text on a picture to make slider image and text more visible when using pictures


Here is another way you can add more emphasis on your text when used on a busy background.

2

The Brewsters website darkened their photos with what looks like a Sepia Tone of sorts. They also use a much heavier weight font.

Yours on the other hand uses a pretty light font in comparison, and very light photos. Especially around the outer areas of your photos where most of the text is it gets lighter, you have to darken that.

Just look at where you put text - its the whitest part of the photo:

enter image description here

Burn, Curves, Levels, Brightness/Contrast, Airbrush --- there's many, many ways to fix this. Play around with them and find a style that suits you while getting rid of some of the bright areas.

1

The website you have referenced uses a fat slab font. Those always stand out well and look great in color.

Lato however, is a much thinner font and I wouldn't play around with colors on your site to increase contrast. If you want the font to stand out, try increasing the font weight a little bit. Since you're a webdesigner I guess you will also be familiar with the CSS3 text-shadow property? You can use text shadows like in this example to make your text stand out more without changing font or font weight. Here are some more great ideas using the same method but achieving another style.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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