When creating a website, there’s a mental checklist a designer might run through… is this engaging?, is it easy to understand?, is it on-brand?… but the very first, no-brainer point is, can people read it?
Yet, Microsoft, a $340 billion company with “an army of designers, researchers, developers, prototypers, typographers, program managers, ethnographers, writers and creative thinkers”, has completely illegible text on their homepage.
And, they’re not alone. There’s an increasing trend of having text that’s difficult, even impossible to read.
It’s not small companies that can’t afford designers and it’s not obscure, out-of-the-way pages. It’s often large, design-conscious companies and typically on their homepage or prominent section pages.
I see three key factors at play here:
1. Responsive design
2. Not designing with real content
3. Not giving a shit about the text
If you’re overlaying text on top of imagery, it’s difficult to get it to work across a range of screen sizes. There’s a delicate balance between clear-space in the image and line-length in the text. Trying to figure it out with static visuals can be impossible.
It doesn’t need to be production code. It doesn’t need to work on different browsers. A basic, rough-as-hell mockup will quickly show you what will or won’t work across different sizes.
Design with real content
Making a design work using optimal images is relatively easy. If you’re dealing with user-generated or dynamic content, you need to plan for worst case scenario images. If you’re overlaying white text on an image, expect that someone might use a predominantly white image.
Give a shit about the text
Visual design is about communication — combining text and imagery to deliver a message or tell a story. Choosing a beautiful photo and treating the text as an inconvenience — something stuck on top with no regard for whether people can read it — is bad communication and it’s not really design.