010: Legibility vs Readability Smackdown
Updated: Sep 26, 2021
Today’s episode tackles the type topics of legibility and readability through two stories. The first is about a horrendously illegible logo, criticized the world over. The second is about a designer who is helping to improve the readability of documents for millions, through the design of his groundbreaking typeface.
Before I tell you the stories, let’s back up so that we’re on the same page. What the heck is the difference between legibility and readability, anyway?
Legibility refers to the degree to which the individual characters can be deciphered by the eye. It’s all about how a typeface is designed. Some typefaces are designed to be more legible than others. Specific typographic techniques that affect a typeface’s legibility include x-height (the larger, the more legible... to a certain point of course), character shapes (traditionally recognizable shapes), stroke contrast (again, enough that it reflects traditionally recognizable shapes, but where the contrast isn’t too high), the size of its counters (space in open or closed letterforms), whether or not serifs are used, and stroke weight (not too heavy, not to light, but juuuuuust right). Type that is designed in such a way that readers can easily distinguish shapes of letters from one another is inherently more legible.
Some display type (letterforms that are designed to catch readers’ eyes and their attention) should never be used for long passages of text (this is what ‘text’ style type is for). Some type is purposefully less legible (think, graffiti or certain ornate script fonts), however by and large, the type you select for your project should be legible. Illegible type makes it more difficult for our brain to recognize the shapes of letterforms, making it more difficult to process the type, therefore making the act of reading more difficult. Readers should not have to think about the process of reading. Excellent legibility lends itself to excellent readability…
Readability is all about how the type is set, and whether or not it improves the ease at which a long passage of text can be read. Legibility comes first in order to have a shot at achieving strong readability. But aside from clear letterforms, what makes a passage of text more or less readable? A few things. Often, serif typefaces are chosen for long passages of text because of the extra weight they provide makes the baseline have greater visibility. This increases the ease at which our eyes can follow a line of text. Sans serif fonts are typically preferred when setting long passages of type on screen because serifs don’t translate well into pixels and can actually interfere with the legibility of letters. Furthermore, size (larger type is more readable to a point, until it makes the length of a line too short and negatively impacts readability), line spacing (also called leading), line length (also called measure), alignment (left aligned is the norm in the western world), letterspacing (also called tracking, or how much white space exists between individual characters), and word spacing (the space between words). All of these techniques can be tinkered with to improve the readability of a passage of text, although often the default in many word processing and design programs are set to be inherently readable. In all of these typographic strategies, the secret sauce to making a document readable lies in finding middle ground. By that I mean that too little or too much of any marking or spacing will impact the overall readability of a document. For example, if lines of text are squeezed together, the document can likely still be read, but it might not be readable. If lines of text are spread farrrrrrr apart, the document can still likely be read, but you’re not likely to label it ‘readable’. Lines of text that are given adequate white space to breathe, but are near enough the lines above and below is a good balance. A visual middle ground (or ‘Goldilocks approach’, as I like to call it) should be the goal.
Let me now introduce you to two examples of legibility and readability. Or rather, illegibility and improved readability. One is a logo, the other a typeface.
The year was 2006. Creative design and branding firm, Wolff Olins, who has worked with some of the world's most recognizable brands like Google and Uber, won the bid to design the visual branding strategy for the 2012 London Olympic summer games. The Brief: the 2012 logo was supposed to creatively capture London's Olympic spirit and inspire the vision that 2012 is "Everyone's Games".
In 2007, the logo was revealed. The world was gobsmacked. The logo was met with disapproval and hostility. It was called “childish”, “ugly”, “ridiculous”, in no way representative of the brand. An unofficial public poll by the BBC found that 80% of those surveyed gave the logo the lowest possible ranking. A petition circulated in Great Britain that had 48,000 signatures to have it scrapped and start again.
But the Olympic Committee stood behind the design. As they put it: "Our emblem is simple, distinct, bold and buzzing with energy.... It feels young in spirit... Not afraid to shake things up, to challenge the accepted. To change things.” Managing Director of Wolff Olins, Ije Nwokorie, says: “The notion of energy was really at the heart of the mark itself.”
When asked how they developed the design, Wolff Olins Chairman, Brian Boylan, explained: “The mark itself came from an energy grid we drew of lines that moved around, contained within a rectangle, which we stopped at one particular moment. This was used in a very random way to create a pattern, so this idea of freeform is right at the heart of the brand. The typeface very much links back to that. We never recommended anything with horizontals or verticals–it was always slightly to one side, to make people look at this thing and think twice. We used the term “prescribed anarchy”–it wasn’t [that] we just wanted to draw something spiky.”
But how much did the “inukshuk meets 1989 logo” cost to create? A rumoured 400,000 pounds to create (approximately $800,000).
Perhaps the lesson here is two fold: not everyone will get your vision; it’s impossible to make everyone happy. Secondly, you don’t always get what you pay for when it comes to branding. Understanding the true “soul” of the brand is critical to design effective and relevant visual communication that will represent a brand’s community. FAIL!
Or was it…?
For one thing, it’s instantly recognizable and incredibly memorable… and we’re still talking about a design unveiled more than 13 years ago.
They received a lot of criticism in the press, but they also received support for the brand identity. Nwokorie breaks it down: “Interestingly, the critical reviews tend to point out the rules we’ve broken, and in that sense they tend to be correct; the only disagreement is whether those rules need to be broken. Take a look at the attacks: “It’s too dissonant.” Absolutely, the dissonance was intentional. “It doesn’t reflect any of London’s famous landmarks.” Absolutely, the world knows about those, we don’t need to tell them. “It’s too urban, it’s too young.” Absolutely. It’s really interesting that even though the tone might be off, they shine quite an acute light on exactly the points we were trying to make.”
In an article entitled The London 2012 Logo - A Designer’s View, published in 2007, six designers weigh in on the logo’s effectiveness.
First up is Paula Scher, Principal at Pentagram. Scher appreciates that the logo bypasses cliches - of torches, of London city landmarks (Big Ben, anyone). She also appreciates that the logo ignores conventions of typographic legibility, and instead opts for abstract form. The jagged shapes don’t represent one type of sport, instead they represent the energy of the games, with a bright colour palette to reinforce this idea. Scher also likes the fact that the messaging can be a little subliminal. By associating this jagged shape and bright colours to the London 2012 Olympic Games, all of a sudden, other jagged shapes and bright colours remind us of the games. That said, while Scher likes the idea behind the logo, she thinks the execution of the drawing and the placement of the words London is amateurish. Her exact words are: “I'd give it five stars for the idea, but none for the craft.” Ouch.
Alternatively, famed designer of the Jurassic Park logo and Associate Art Director at Alfred A. Knopf, Chip Kidd, has fewer nice things to say. In fact, he is in almost complete opposition to Scher’s ideas. His main beef is the fact that “there's just nothing even remotely British about it.” He’s in such gobsmacked awe in it’s atrociousness, he gives it “no stars”. Yikes.
How about Rick Valicenti, Founder/Principal of Thirst? Rick doesn’t have much of anything nice to say. In fact, he wonders if in selecting this design, the team at Wolff Olins wanted to give the world a mirror at which they could look at who they really are as a collective, creative force? “I rate this design’s contribution one star for effort and zero if these disposable results were accompanied by an invoice.” Oof.
Next up is Lisa Simpson (great name), Creative Director at Pearlfisher. She makes an excellent point that while the logo’s goal is to be iconic and universally appealing, it’s neither. Although it’s graffiti-like characters are designed for a younger audience, isn’t this a little stereotypical? After all, the more minimalistic and sleek designs seen in the likes of Apple or Nike or Nintendo are revered and loved by those across generational lines. Simpson feels that we should give the younger audiences more credit when it comes to their design savviness. The one thing Simpson believes they got right is the non-static and ever-changing nature of the logo, which gives it the space to evolve in interesting ways. Her rating: “Two stars.” Urk.
Fifth is designer Carl Rush, Founder and Creative Director of Crush Design & Art Direction. Rush recalls the outpouring of criticism from the general public and asks the question: “Why does everyone think they're a designer?” He acknowledges though that it’s a good thing for the design and creative industries that the general public thinks that graphic design matters enough to be so up-in-arms about this logo. He thinks the logo actually works quite well if the brief was to inspire everyone and reach out to young people, but he fears it might look outdated by the time the 2012 Olympics roll around. “Four stars.” Generous.
Lastly is designer Andrew Bogucki, Principal and Chief Creative Director at Corebrand. In his own words: “In my mind, an Olympic logo should meet two simple standards: clearly communicate the year and place, both verbally and graphically; and capture the contradictory notions of the Games' stature and heritage with its contemporary excitement and energy.” He thinks it hits the mark in some respects and misses in others. For example, he likes the fact that the English punk rock scene seems to be the source of iconic inspiration, versus the more stereotypical representation of structures in the host city, however the execution leaves something to be desired. It’s rejection of rules just doesn’t quite fit the organizational structure of the institutionalized behemoth that is the Olympics. Poignantly, he does suggest that this logo would be perfect for an Olympics after party, though. He gives it “three stars”. Well said.
Relating back to our main focus of legibility, one thing is clear: this logo was designed with other priorities in mind; legibility taking a back seat to capturing the spirit and energy of the host city and Olympic games. But the question remains: should a logo using numerals to communicate the year of a global, inclusive event be illegible? While I don’t necessarily agree with the design decisions made, who am I to decide? Those decisions were way above my pay grade.
Moving onto our next story all about readability.
The year was 2008. Dutch design student, Christian Boer, had a vision for a way to take his gift of graphic design and help himself, and millions of others, around the world. You see, Boer is dyslexic, which is a learning disorder that occurs in the area of the brain that processes language.
According to the British Dyslexia Association:
Dyslexia occurs across the range of intellectual abilities.
It is best thought of as a continuum, not a distinct category, and there are no clear cut-off points.
Co-occurring difficulties may be seen in aspects of language, motor coordination, mental calculation, concentration and personal organisation, but these are not, by themselves, markers of dyslexia.
Boer wanted to design a typeface that would improve readability for millions. Boer’s breakthrough in studying his condition was that dyslexic individuals have a difficult time identifying 2D objects, but they don’t have a problem identifying 3D objects. He created 3D letters that he then modelled backwards into 2D letterforms. Symmetrical forms of traditional type is what makes it difficult for those with dyslexia to distinguish letters from one another. The threw traditional type rules out the window. He designed a typeface that prevents four things: mirroring, turning, swapping and overcrowding.
Because this is a typography-heavy podcast, I’m going to get specific. (Check out dyslexiefont.com to see exactly what I’m talking about.) This typeface is designed with nine core features that make it easier for individuals with dyslexia to read:
Heavier bottoms - Each character has a thicker stroke weight towards the bottom of the letterform to ground it. This helps prevent letters from being flipped upside down (p’s into d’s, for example).
Different shapes - The shapes of letters (such as close cousins, b and d) are subtly different. If you were to mirror the letter b, it would not have the same shape as the letter d. The lowercase b has much greater weight on the lower right hand side of it’s round bowl, while the lowercase d has much greater weight on the upper left hand side of it’s round bowl.
Better spacing - The distance between individual characters is increased throughout to avoid crowding and make the typeface more readable overall.
Longer sticks - Some ascenders and descenders of the lowercase letters are longer than other letters within the typeface, as well as longer than typical typefaces at a similar point sizes. This also helps characters remain distinguishable from one another.
Capital letters and punctuation - These both have increased weight to give the effect that they are bolded. This helps emphasize breaks, endings and beginnings of sentences.
Inclined letters - Letters that look alike are slightly sloped, also to distinguish them from one another.
Bigger openings - Larger open and closed counters help make each letter recognizable, while providing each letter with a little more breathing room.
Various heights - Letters that look alike are misaligned and exist at different levels to avoid swapping. For example, the crotches of the v, w, and y all exist at different levels - v has the lowest crotch, w the middle and y the highest crotch.
Higher x-height - The height of the lowercase letters is increased, but not the width. Which adds white space in and around each letterform, improving readability.
He used his research, his first hand understanding of his experiences with dyslexia, and his knowledge and passion for graphic design to create Dyslexie Font: a typeface designed to make reading easier.
Since releasing his font into the world, he’s received numerous accolades and awards for his work. Namely first prize at the Smart Urban Stage Awards in Amsterdam in 2011. The typeface was a finalist in two large international competitions in 2013: The INDEX: Design to Improve Life awards in Copenhagen and FastCompany Innovation by Design Awards in New York. It then won first prize later that year during the Rabobank New Generation Pitch in Utrecht.
In the years that followed, toy manufacturers approached Boer to use the font on their wooden toys. In 2015, over 1,000 titles were on the list of books published using the Dyslexie font. The font was made available for free for home use, including a Chrome extension and Dyslexie font text editor in 2016. Boer has also been featured on TEDx stages spanning two continents.
It’s exciting to see a young designer use his creative skills and available technology to make real change in the world. Reading and literacy are such important aspects to being an involved citizen in our world, that relatively simple technologies (like typefaces) that help level the playing field are an exciting step to making our world more inclusive, and ultimately, a better place for all of humanity.
When thinking about your next design project, keep in mind the seemingly mundane, yet critical aspects of legibility and readability. As legendary type designer, Adrian Frutiger, puts it: “From all these experiences the most important thing I have learned is that legibility and beauty stand close together and that type design, in its restraint, should be only felt but not perceived by the reader.”
In this light, often typographic restraint and mindfulness of design to produce legible letterforms help improve readability, thus helping readers avoid reading.
Music by Podington Bear: Daydream Heartbeat
Talk Paper Scissors Theme Music: Retro Quirky Upbeat Funk by Lewis Sound Production via Audio Jungle
Boat Origami Photo: Boat Origami Photo by Alex on Unsplash