Why Marketing Designers Need to Think Legibility Above All

Why Marketing Designers Need to Think Legibility Above All

by NewsCredSeptember 1, 2015

As designers, our number one goal is to communicate effectively. The vehicle to achieve this goal happens to be an attractive interface that draws eyes, keeps them fixated, and initiates an action. This may sound obvious, but sometimes we are so immersed in the details of the design process — design and prototyping tools, color palettes, photo selection — that we lose sight of what’s most important. The bottom line is none of those things matter if the message is not clearly articulated. So, why (oh why!) is there so much illegible text out there? It pains my soul to see gorgeous pixel-perfect layouts that have unreadable text because of size or contrast issues.

The Struggle Is Real

Since full-screen photos and videos have become the norm on the web, designers are often presented with the challenge of inducing contrast between imagery and overlaid text. There are several ways we are solving for this — blurred or darkened background images, colored bars or shapes behind text, subtle drop shadows on text, the list goes on. However, too many times are there no treatments at all, resulting in major illegibilities.

Even Google is guilty of this, check out their Hangouts splash screen below. While the full-color images are very impactful, we have to strain to read the time. Since the background photos are on a randomizer, there is no way for Google to predict how text will read on any given image. If the image is busy or has high contrast (say for example, a nighttime cityscape), this can cause major readability problems.

Google Hangouts’ splash screen background images make it difficult to read the time

This site uses an untreated background video that occasionally blends with the headline

This homepage carousel uses full-color high-contrast background images, making it very difficult to read any of their headlines


Sites That Do It Right

Pushh uses a combination of techniques to ensure legibility: a blurred gradient-overlaid background image and a subtle drop shadow on the headline

Basic uses large type over a ghosted and blurred background image

Do uses levels to slightly darken their background images (sidenote: how crazy is it that they were able to purchase the domain do.com?)

In an increasingly visual world, photos and videos are likely to become even more prevalent. As a result, we’ll need to master the craft of placing text on imagery. Together, let’s empathize with our users and prioritize legibility over everything else.


Jeremy Ford is a designer at NewsCred. Header image courtesy of Amazon for Amazon Fire TV Stick.