The Death of Readable Websites
Remember when websites were designed to be read? It seems like a distant memory. Today's web is a carnival of distractions, where the simple act of reading has become a feat of concentration. Let's examine why modern websites are failing at their most basic function: presenting readable content.
Common Sins Against Readability
Modern websites commit numerous crimes against readability. Here's what drives me particularly insane:
Medium.com-style layout: - Enormous line height (1.8+) - Massive paragraph spacing - Tiny, grey text (#757575) - Giant headline fonts - Huge hero images Actual content: 10% of screen space
News websites are even worse:
News site layout: - Auto-playing videos - Newsletter popups - Cookie consent dialogs - Social media share buttons - "Read More" infinite scroll Actual article: Lost somewhere in between
The Typography Disaster
Modern web typography seems to follow a simple rule: if it's content, make it grey and thin. Here are some real examples from popular websites:
Arbitrary Popular blog platform: color: rgba(0, 0, 0, 0.54); font-weight: 300; font-size: 12px; line-height: 2.2;
This results in text that's:
- Barely visible against white backgrounds
- Impossible to read for anyone with slight vision problems
- Spaced so far apart you lose context between lines
- So light that it disappears on many displays
The Contrast Crisis
The Web Content Accessibility Guidelines (WCAG) recommend a minimum contrast ratio of 4.5:1 for regular text. Let's look at some popular websites:
Real examples from major sites: - Designer portfolio: grey (#767676) on white = 4.48:1 - Tech blog: light grey (#6B6B6B) on white = 4.23:1 - News site: grey (#757575) on white = 4.35:1 All failing WCAG AA guidelines
The Distraction Factory
Modern websites seem pathologically afraid of letting you actually read their content. While trying to read a simple article, you might encounter:
- Newsletter popup (5 seconds in)
- Social media share buttons (floating)
- "Related content" widgets
- Auto-playing videos (following as you scroll)
- "Read more like this" popups
- Cookie consent dialogs
- App install prompts
- Survey requests
The Solution: Return to Simplicity
Want to make a readable website? Here's how:
body {
color: #000; /* Actually black text */
max-width: 60ch; /* Readable line length */
line-height: 1.5; /* Sensible spacing */
font-size: 16px; /* Readable size */
}
The irony is that making a website readable is technically easier than making it unreadable. It requires fewer lines of code, fewer dependencies, and fewer potential points of failure.
This website you're reading right now? It uses simple HTML and CSS. No JavaScript. No web fonts. No tracking scripts. Just content, formatted to be read. Because that's what a website should be.
Remember: If people can't read your content comfortably, it doesn't matter how "modern" or "engaging" your website looks. The best design is the one that gets out of the way and actually lets you access it's content.