Can You Read Me Now? Testing the Limits of Readability in Design

Mark Heaps

1

I’ve long been obsessed with how things work. Sometimes I think maybe designers are secretly engineers who don’t like math. Maybe you can relate?

Like so many of my peers, I was inspired by designers like Paul Rand, Saul Bass, or David Carson. As I mature in my experience as a creative I realize that something I loved most about their work is the ability to deconstruct and reconstruct elements of a design so that it speaks in unique ways. And this leads to some fundamental questions all designers face:

• How can you represent information without it feeling boring?
• How can you create hierarchy in ways that are different than simply making words bold or a different color?
• Can we create visual interest and use a playful approach to make people want to do more than just glance at your design?

David Carson was amazing at this… he chopped things up, and even once wrote an article completely in wingdings just to see who would decipher it.

I recently ran a test on social media to see how far I could simplify text and still allow people to read it. At a certain point, the text became so “simplified” that even changing the font hardly changed its appearance:

The one on the left is set in Arial, and the one on the right is Times. You can see that as we inflate some weight around the type, and scale the shape outward, they start to morph into a very similar forms.

I wanted to see how far this could be pushed, and what would make a simplified shape work… one that was still legible. Surprisingly, out of nearly a hundred responses online, everyone could read the phrase below… can you?

People suggested that context was the reason they could read this. Surely, sentence structure, logical phrasing, and word pairs helps a lot. But how is it that we can read the last word?

Taking the Test Further

I then tried reducing details further still, though tweaking the forms to see if I could keep them legible:

Amazingly, this is still somewhat readable. Adding spacing between the characters seems to help them become distinguishable as they’re inflated. Also, the ascenders and descenders of characters really help.

Punctuation was clearly a problem, but since people only had to identify a few words (and because the phrase was one they were familiar with), their eyes were immediately drawn to the word shape that didn’t fit the quote they knew… in this case, the last line. That quickly taught them to focus on differentiators.

From here, I tried to reduce variance even more, switching to all caps:

Everyone agreed this was easier to read, and just the slightest difference in detail, even though it was minimal, allowed the letters to be quickly identified. For example the C and O in the last word.

What would happen if I applied it to a design? Could additional elements within the design frame suddenly make the simplified letter forms even easier or harder to read? I placed the text over a graphic with a taco in it. But then I changed the phrase, adding a completely unrelated word to see whether the cognitive dissonance would make it difficult to read:

Surprisingly, even at the smaller font size, well over 95% of people could still read the last word: “Smoothie”.

Of course, this was an informal test and not highly scientific, but people playing along ranged in ages from 17 all the way up to 82 years old. Some wore glasses, and some didn’t. Interestingly even my friends who have dyslexia found they had no problem reading the phrases. Some even questioned if the simplification made it easier on them, or perhaps the challenge simply caused them to focus more?

Seeing Brands

Then I wondered about using words or names that people are familiar with (i.e. when people know a name as a brand by construction and not by appearance). Could folks read the word faster because the cluster of letters forms a simple geometry? Turns out, most thought so:

You can probably find the one artist/group name in here that isn’t a real brand, right? I made up one fake artist group name to see if it would stand out quickly. But actually over 95% could read all of them, even the fake band name.

It’s fascinating to think that in words like Leonard, the N is almost indistinguishable from the H in Radiohead. And you can see that the M in Metallica is almost the same shape, but slightly wider—just enough for us to quickly identify it as an M in comparison. (Are you nerding out as much as me yet? I love this stuff!)

So next I created some fake artist names to see if people could read them. Without the exposure to recognizable character arrangements, would people be able to read it still? And what if I injected an obnoxious color combination?

This is where things got a little harder. Roughly 85% of people could read all of the words, but about 15% struggled with a few of the words. Without zooming in, people couldn’t tell that the last word was GUTTERPUNKS. At a smaller size, they couldn’t see the G was not an O, because that vertical edge on the right was being lost in the preview size on Facebook. So obviously scale plays a huge part in the simplification success rate.

Scale Factors

At this point I wondered whether maturity and comprehension in reading plays a large factor in this simplification experiment. So I brought in my seven-year-old daughter who is currently in second grade. She reads, according to her school, at a fourth grade level. (I’m a proud dad), but could she read this? “Easy peasy” is what she said. And she flew through example after example of anything I typed up.

However, once I got to where the scale was around an 18pt font, and she was four feet away from the screen, she started to truly struggle to assemble the words into sentences where her brain could fill in the blanks. Scale is important… Could I use this in presentation media on large screens? What about billboards, or poster designs?

It’s clear that common words, phrases, or names could be simplified the most. Even with just a passing glance, people just “knew that shape.” Words or phrases that are less familiar, not established as a brand phrase, forced people to work harder.

So how would we use this? Could you simplify details like the location of an event? Does this change how we could approach type hierarchy for levels of importance? For example, here’s a simple treatment to inform about an upcoming event… and we can still read the information without putting extra geometry into the location name:

The Power of Gestalt

If you have ever studied Gestalt psychology, this all falls inline with it’s core principle: The human brain wants to complete things and finish details, even when they aren’t there. It’s why we can see things in negative shapes and spaces. Or for someone like me, who has a condition known as pareidolia, where my brain tries to organize patterns in shapes and forms where no pattern was meant to exist, and it causes me to see things that aren’t really there. The most common being faces in everyday objects like cars, signs, etc.

One thing I know, from a production standpoint, is that if I like this approach I can save this type treatment as a graphic style in Illustrator and use it non-destructively to keep my editable copy as actual type. This will be helpful for creating graphic typography solutions, that have a visual interest, but still function and can stay editable up until the moment they go to final output.

In the end, we’re always pushing ourselves to see things differently, make things differently, and speak differently. As David Carson once said: “Never mistake legibility for communication.”

Maybe next I’ll try this with blurring instead of inflating? Enjoy!