It seems that with one trend in website design, designers almost have another trend pushed upon them. This is the case with large background images – using a slide show with a variety of different photographs means that whatever color text you choose it will show up better on some than on others, so the solution has been to place a filter or transparent layer between the image and the text, meaning that the text will show just as clearly on any image.
This design trend does not only apply to photographic background images, some sites use halftones or transparency on solid color backgrounds, and the addition of a very small drop shadow makes white text look extremely crisp and sharp. Here we are showcasing a selection of websites that use this method to keep their text easy to read without compromising the quality of the images.
How They Work
I would imagine just about every designer knows how filters and transparency work when placed between an image and the text, but to show the amazing difference that such a layer can make, I have produced some images to prove it!
Images with White Text
Black Transparent Layer at 25% Opacity Added
Small, Black Drop Shadow on Text
Halftone Layer at 40% Opacity
How to Create a Halftone Pattern with Photoshop
This method will work for any version of Photoshop, and is simplicity itself. The image below has a gradient-filled background with the halftone pattern layer above it.
Transparency and Filters in Action
ICRC Delegates at Work
This site uses a black transparent layer between the full screen slide show and the white headline text. As you can see in the screenshot below, the text stands out even against the man’s white shirt.
Light & Shadows
This site uses a very dark transparency that lightens slightly on mouse-over. A hint of color also appears on mouse-over, different colors for each panel.
Petr Novikov
This site uses a light transparency over a background video, again using white headline text.
Ndoto
This site has a full screen slide show with 3 images, each of which has a different color transparency. The screenshot below shows part of each image.
MVMT
With a grid-style layout, this home page uses a very dark transparency that is completely removed on mouse-over, revealing the full color photograph beneath.
Cloudways
Here is a unique and gimmicky effect on the home page. The background image is animated, showing the guy typing on his keyboard, and the headline text is presented in a ticker-tape fashion so we can imagine he is typing the sentence, deleting, typing… etc. The sepia transparency helps the thin black text to stand out.
Louise Bradley
This website uses a block of transparency over the full screen background slide show – a somewhat different and creative approach.
DraughtMaster
This site uses a variety of layer styles to help the white headline text stand out. The screenshot below shows 4 of their pages using different layers: black transparency, water drop texture, bokeh texture and ice texture.
Mundial Memories
This site dedicated to the Brazilian World Cup Tournament 2014 uses a proportionately large, square halftone pattern over the full screen image.
Tap In
Another site that is a guide to the matches of the Brazilian World Cup Tournament 2014. This site uses a sepia transparent layer over the slightly animated full screen image.
Yunik
This home page has a transparency with a bluish tint on its full screen background slide show that only consists of 2 images. As you scroll down the page there are more varieties of transparency including black, blue and an image using a halftone layer.
Smart Codes
This site uses a halftone lined layer to make the text stand out. The screenshot below shows a portion of the text at full size as the size reduction has impaired the effect somewhat.
Tinybigstudio
Here the designer (Pablo Dominguez) has used a very hot red transparency over a full screen image of himself at work. A yellow teardrop-shaped element holds a thumbnail image of himself also.
La Ferme de Biarritz
Although the layout of this site is not necessarily high-fasion right now, the black transparency for the content area makes the white text readable against the sandy background.
Fresh Design
This site uses a black transparent layer at the perfect opacity for the white text to stand out on all their slide show images. The text also has a small, black drop shadow for even more clarity.
Dr Laffourcade
For the designers of this site, black is the new black, and they have used a white transparent layer to emphasize their black headline text.
Believe.in
This site uses a halftone layer at the ideal opacity to keep the white headline text crisp and clear, yet not distort the animated background images.
Adveris
This design does not have a full screen background image, it has a solid blue background with a bokeh-style pattern on it. The mesh-style layer between the background and the page elements gives a very sharp and crisp edge to everything. The white text is enhanced with a small drop shadow.
Yin + Young
This is the About page of the Yin + Young site. Using a very vintage typographic style, the old street that forms the background image of this page has an Instagram-like filter to cast bright light and allow the black text to stand out. This site uses quite a few transparency and filter-style effects, and interestingly, if you click on the Home button you will find yourself on one of two different home screens!
Conclusion
The knock-on effect of one trend creating another seems to be happening more frequently with the advent of flat design. It clearly shows how trends are started by finding solutions to problems created by other trends – flat design itself was started out of necessity, to solve the problem of small screen size clarity and ease of use.
Have you come across any other methods of making text stand out on images of different colors and contrasts? Please share your opinions and links with us in the comments section below.
