The Law of Readability: Designing for Typography
The law that helps you read better on websites
Introduction
Every day we come across hundreds of text bodies without even realizing the intricate process behind presenting them so that they appear ‘readable’ to us. Think about the morning newspaper you skim through with your coffee, the highway billboards catching your eye as you drive, or the enticing descriptions on your favorite e-commerce app. What makes them easily understandable? What ensures they grab your attention? The unsung hero behind this is Typography and its bedrock principle, The Law of Readability.
You are reading the 12th chapter of the series, “30 Days of UX Principles and Laws.” If you are yet to read Day 11 of the series, give it a read before we proceed. Today we will be looking into :
- Breaking down the Law of Readability
- The Law of Readability and UX
- Rules for Typography
- Real-life brand examples
- Brands that broke the law
- Limitations and difficulties
Breaking Down The Law of Readability
Before diving into its depths, let’s take a step back to unravel the concept of The Law of Readability. The law is rooted in the empirical findings of early printing press artisans and psychologists who pondered over how the human brain decodes written texts. They found that the readability of a text was influenced by several factors such as typeface, font size, line spacing, color, contrast, and much more. And thus, The Law of Readability was born, transforming how we design written content, from Gutenberg’s Bible to modern digital interfaces.
The Law of Readability and UX
The Law of Readability deeply influences User Experience (UX) design, particularly in the digital realm. To truly understand its impact, let’s consider a scenario involving an online news portal.
Imagine visiting a news website that utilizes a stylish but complicated font. The articles are densely packed, with negligible line spacing and poor contrast against the background. You strain your eyes, squinting and struggling to decipher the text. Overwhelmed and annoyed, you’re likely to exit the portal without delving into the articles, no matter how compelling the content may be. This situation clearly illustrates how neglecting readability can lead to a frustrating UX, thereby driving away potential users.
Now, envision an alternate scenario where the same news portal uses a simple, clean font. The text is well-spaced, and there’s a stark contrast between the font color and the background. The headlines are bold and larger than the rest of the text, guiding your attention naturally through the content hierarchy. In this setting, you can navigate the site smoothly, diving into the news articles with ease. The reading experience is no longer a struggle, but a pleasure. As a result, you are likely to spend more time on the portal, explore more articles, and even become a repeat visitor.
This example clearly illustrates The Law of Readability at work, enhancing the UX by making the digital content not just accessible, but also enjoyable. The difference between the two experiences lies not in the content quality but in the design’s readability. Hence, observing The Law of Readability can profoundly impact user engagement, retention, and ultimately, the success of a digital platform.
Rules for Typography
Understanding and implementing The Law of Readability becomes easier when we follow certain typography rules:
1. Font Selection:
Choose fonts that are easy to read. Sans-serif fonts like Arial, Helvetica, or Verdana are more legible for screen use. Choosing between serif and sans-serif fonts hinges on the context and medium. Serif fonts, like Times New Roman, often grace printed materials, as their ‘feet’ guide the eye along lines of text. However, on screens, sans-serif fonts, like Arial or Helvetica, are usually clearer, especially in small sizes. Yet, serif fonts can still lend sophistication to digital headlines or decorative elements. Ultimately, your choice should consider the project’s needs, brand identity, audience, and medium, all while respecting The Law of Readability.
2. Hierarchy and Scale:
Use different font sizes to establish a hierarchy of information. Headlines should be larger than the body text, and less important information can be smaller.
Read more on The Law of Proximity; which talks about the hierarchy in designs
3. Line Spacing and Length:
In the context of readability, line spacing, and line length are key. Line spacing, or leading, refers to the vertical distance between text lines. Spacing of 120–150% of the point size helps prevent text crowding, aiding smooth reading. Line length, the width of a text block, ideally ranges between 45–75 characters. Too long can make the next line hard to find; too short can disrupt the reading flow. These factors, balanced well, enhance reading comfort, a core aspect of The Law of Readability.
4. Contrast:
Ensure there’s sufficient contrast between the text and its background. High contrast ensures legibility and reduces strain on the reader’s eyes.
5. Consistency:
Stick to a consistent typeface and style across your content. Consistency makes your design look professional and helps readers know what to expect.
This relates to one of the UX Laws: The law of Familiarity. Read about it to know more
6. Whitespace:
Don’t be afraid of whitespace. It gives room for the text to breathe, making the overall design clean and the content more digestible.
Real-Life Brand Examples
Now that we’ve seen the law in action, let’s examine some real-life brand examples. Google, renowned for its minimalist design approach, is an excellent exemplar of The Law of Readability. Their search interface features a simple, large, sans-serif font that stands out against a white background, making it easy to read and navigate.
Similarly, Apple, with its clean and intuitive interface, employs Helvetica Neue, a font renowned for its readability. The text is comfortably spaced, ensuring information is easy to read and digest, embodying the essence of The Law of Readability.
Brands that broke the Law
1. Gucci:
Luxury fashion brand Gucci, known for its distinctive and creative approach, sometimes uses all-uppercase text and tight letter spacing on its website and advertising. This approach typically reduces readability, but it fits the brand’s image and still manages to convey the intended message effectively.
2. Burberry:
This British luxury fashion brand occasionally features text in its marketing that is light in color, small in size, or overlaid on complex backgrounds, reducing contrast and thus readability. However, it aligns with the brand’s sophisticated, minimalist aesthetic.
A few other examples are :
1. Adotorio Studio
2. Piet Oudolf
3. Pest stop boys
Difficulties and Limitations
While The Law of Readability seems like a silver bullet, applying it isn’t without challenges:
- The same font doesn’t work universally. A font that is readable on a billboard may not work on a mobile screen.
- Cultural nuances may affect how a font is perceived. A typeface that seems formal in one culture could be interpreted differently in another.
- Legibility and readability are distinct but closely intertwined. Sometimes, enhancing one may compromise the other.
- Balancing aesthetics and readability can be a fine line to tread. A visually appealing font may only sometimes be the most readable.
Conclusion
The Law of Readability is a fundamental principle shaping how we design and interact with written content. It’s the invisible thread weaving together aesthetics, accessibility, and user experience, creating a seamless tapestry of effective communication. As you delve deeper into the world of typography, remember to view it through the lens of The Law of Readability. Whether it’s a newspaper, billboard, or mobile app, good typography design differentiates between a text that’s merely seen and one that truly communicates.
The challenge lies in understanding and implementing this law to ensure optimal readability without compromising on visual appeal and cultural appropriateness. It’s a journey of continuous learning and refinement, and at the end of the day, keeping the user’s needs at the forefront is the key to mastering the art of readable typography.
Check out “30 days of UX laws and principles”
Check out Day 11: The Law of Past Experience
Check out Day 13: The Law of Contrast
ANNOUNCEMENT 🔥
We’re working on our very own AI tool that lets you create fully editable screens just from text prompts!
Check it out here and don’t forget to join the wait list :)
