White Headline Text in Web Design

The current trend of the use of large or fullscreen background images on website landing pages has forced the introduction of another trend – white headline text. Very often background photographs are dark, so it would seem that white is the new black in website design.

Here we have collected a selection of sites making use of this trend – as you will see, it works better on some designs than others, but all of these examples are beautifully effective.

The Use of White Headline Text

Believe.in

This UK charity software site uses a fullscreen slideshow of photographs, but they have put a halftone screen between the images and the text, so however dark or light the images are, the text remains perfectly visible.

Believe.in

DraughtMaster

This vertical scrolling site has a different photograph on each page, and white headline text on every page. They have cleverly used textures to help the white stand out even on the lighter images. I have included two screenshots from this site.

DraughtMaster
DraughtMaster 2

The Form Group

The fullscreen slideshow on this site’s landing page uses a black transparent layer to keep the white headline text crisp and sharp against the lighter images.

The Form Group

Where2GetIt

This site has a static fullscreen image that has a slight blur, making the white headline text stand out very nicely. When you first land on the page, the headline: ‘Transforming the way businesses’ is static, whilst the line below it rotates through: ‘get discovered’; ‘get found’; ‘engage’ and ‘market’ – a pleasant detail in the design.

Where2GetIt

Zeis Excelsa

This clothing site is unusual in that it has a horizontal fullscreen slideshow. Apart from using outstanding photographs, they use a black transparent layer to keep the white text sharp.

Zeis Excelsa

Tap In Guide

This is a guide to the 2014 World Cup soccer tournament in Brazil. Their full screen static image with a touch of animation has a sepia filter over it. It mainly works well, but perhaps the headline text should have been placed a centimeter or so higher so the sub headline is clearer.

Tap In

UNE

This site uses an extreme amount of blurring on its full screen image to allow the white headline text to stand out.

UNE

Adveris

This website design uses a different approach from the previous examples. A solid block of color with a bokeh-style texture and a black mesh texture create the background. I was intrigued by the color palette used in this design – not a scheme that would automatically spring to mind when designing. The palette is shown below.

Adveris
Adveris Color Palette

Night Walk

This is a Google site, and their white headline text is pretty grungy.. I’m not sure if that is to portray age or scariness – or perhaps both. When you land on the page, there is a short video of the girl (Julie) walking to the start point. Of course, white headline text lends itself perfectly to dark, night time scenes.

Night Walk

Smart Codes

This site uses a full screen background video on its landing page, and here is another type of transparency/halftone screen – vertical lines. The red and black color scheme is also quite unusual these days.

Smart Codes

Allstate’s Holiday Home Decorator

This is actually the site of an insurance agency. You can choose an address and decorate the house online – but if you overload the electricity circuits you will start a fire… do you have home insurance? The blue background with some Christmas decorations, animated snowfall and a large banner make the white headline text stand out.

Allstate's Holiday Home Decorator

Astuteo

This site uses a full screen photograph with black transparency on its landing page. They use both white and yellow for their headline text, and the text has a slight drop shadow to make it stand out even more.

Astuteo

The Ernest Hemingway Collection

Ernest Hemingway was an American author and journalist who had a profound effect on US literary styles. This site sells products dedicated to Hemingway… in that they are retro or old-fashioned. The full screen vintage photograph is an ideal backdrop for the white grungy headline text.

The Ernest Hemingway Collection

InVision App

Here is another design that uses black transparency over their static full screen photograph. They use transparency on all of their images on the site to make the white headline text stand out, and they also make use of the currently trending hollow or ghost buttons.

InVision App

Profleet

This site uses a blue transparent circle to enhance its white headline text.

Profleet

Surprisingly

This is a trailer for a site that is to launch in the near future. So you don’t have an image, and you are keeping things secret… just take a block of color and fill the screen with huge white text – done! As you scroll down the page, you read: “What if you knew…. That something magical was coming… But you didn’t know when… And you didn’t know what… How would you feel? Surprisingly. Stay tuned, something magical is on its way…” then you are invited to submit your email address to be kept posted.

Surprisingly

Denim Academy

This site, topically uses a denim textured background throughout the site. White headline text is a must for them!

Denim Academy

Check-In Arte

This site uses an airport departure/arrival style board for its home page, and includes the clicking sounds as the letters flip around.

Check-In Arte

Imagina nas Ferias

This site uses a lot of small blocks of pastel/retro colors, and the larger block top center has the white headline text. There are also a lot of ‘flipping’ mouse over effects on this page.

Imagine nas Ferias

WebVDEO

A red transparent layer over the image to allow the white headline text to stand out makes a pleasant change from black. This was more popular in design a few months ago.

WebVDEO

Conclusion

It is really good to see designers pushing the limits of creativity – as I guess we should always have believed they would.

Do you like the effect of white headline text over large background images that seems to be popping up just about everywhere these days? Have you used this style of design yourself?

Please share your thoughts, opinions and links with us in the comments section below.

Advertisement