: Making text stand out in front of images 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

@Rambettina927

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:



BLACK DROP SHADOW + BIGGER FONT



BLACK DROP SHADOW + EVEN BIGGER FONT



BACKGROUND TRANSPARENCY + BIGGER FONT



BACKGROUND COLORED BEIGE BLUR + BIGGER FONT



BACKGROUND COLORED BLUE BLUR + BIGGER FONT





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

Vote Up Vote Down

@Sims5801359

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:



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.

Vote Up Vote Down

@Lee3735518

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.

Vote Up Vote Down