Imagine you’re writing for a finance company specializing in equity investing. What font color and size should you recommend? Sadly, too many companies don’t consider their audience.
In this case, I’d think about investors ages 35-65 and eye strain. For those of us with many weary eyes and years of experience, the issue is bigger than what your under 30 writers and developers consider relevant.
As much as I dislike admitting it, over the years and millions of words I’ve written, my vision is far from what it was in my 20s.
Reading glasses became a must for me a few years ago. But as far as users are concerned, I believe engineering content (web-based or closed source) for the lowest common denominator reading ability prudent for exceptional communication.
However, ask most developers about this question and likely you’ll receive rolling eyes and smiles. They’re at an age when legibility isn’t a hot button in their lives.
The Terrible Trend of #666666 Color Hex Gray40
There’s an epidemic mounting in the developer community. Sadly, programmers and website CSS teams are addicted to using #666666 for body font colors. It’s not the color selection per se. Instead, it’s the small font size.
Remember, contrast is critical for readability. Think back to the last book you read. One that wasn’t online. Did it have grey text on grey paper? Doubtful. Likely the text was a font size 12 or 14; the color #00000 (pure black).
So why do we force online users to squint through grey text on top of grey backgrounds? Often it boils down to our youthful team members resorting to what looks good to them.
Keep in mind, increasing the font size can resolve the legibility suffering. Good UX design should be based on user-friendly CSS design.
Contrast & Legibility
Another flea market style approach to contrast is ignoring the need for it. Some brand managers are more concerned about their social media presence than their website’s UX. There’s many companies which do a bang up job creating an elegant user experience using text and white space.
One is Apple. Obviously, elegance is built into their brand. However, their website offers a stylistic approach based on imagery rather than lengthy prose. Below is a screenshot:
Note how they do use a grey font (#999) but they’ve bumped up the font size to 54:
Less is More
Many of us have filled out online forms. From surveys to registration pages, the doom and gloom of entering information into fields can be lengthy. What are the best types? Think short.
Regardless of the overarching required information, most user-friendly websites chunk content requirements into multiple pages.
Statistically, short, simple step forms are completed more often than long one-page formats.
Less is more in nearly all forms of digital content. So why do many companies make us suffer through endless sentences and paragraphs tightly nested on fewer pages? Often it’s poor planning of reading comprehension.
The best approach to improving readability is a balance between words and images.
Research on Reading Comprehension
Instead of citing studies, I’ll share one by the Nielsen Norman Group that may surprise you. Read the full report. It chronicles the engagement of users of website content. Their findings are staggering:
- On an average visit, users read half the information only on those pages with 111 words or less
- Average page view durations contained 593 words.
- Users will have time to read 28% of the words if they devote all of their time to reading
- Most users will read about 20% of the text on the average page
Why Does This Data Matter?
It doesn’t unless you want to help your users comprehend your technical documentation. Are fewer words per page the solution? Yes and no.
Indeed, fewer words per page will equate to higher comprehension. Although no, I’m not suggesting you roll with big, fat font sizes. Instead, my approach is to integrate balance between text, white space and graphics. Remember, highly technical content takes time to consume.
Unfortunately, too many companies don’t consider the need for readers to understand formatting while reading.
Structure is vital. Need proof? Consider Stripe the powerhouse payment gateway provider. Designed to integrate credit card transactions for businesses, they approach technical user guide information with elegance.
View this page: https://stripe.com/docs.
What you’ll find is high-velocity technical jargon structured with simplicity. Stripe is the gold standard balancing rich content with multiple columns, navigation links to more learning pages and graphics.
The next time you’re planning a documentation project ask one question: what the font?