Advertisement


Making text stand out in front of images


Question

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!

2015/08/04
1
2
8/4/2015 1:17:00 AM

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.

2017/04/13
7
4/13/2017 12:46:00 PM