Dear Storyline, why does my blog look funny?

Artwork by Tug Wells

Artwork by Tug Wells

This week on the Storyline Blog we deal with some web typography best practices often ignored by developers and clients, and what to do about it if you’re a writer.

Dear Storyline,

I write a regular column for a client that runs a dating website. I’m not a designer or anything, but I notice that when my articles are published on the blog, they look really funny. The type is tiny and the lines are way too long. I mean, I can’t even read what I’ve written. And if I can’t read it, why would anybody else even try?

So, I’m wondering, is this normal? And is there anything I could or should be doing about it?

Sincerely,

Funny Blog

Dear Funny Blog,

Obviously, you don’t mean “funny like a clown”, but funny as in “what the bejesus is happening here?” Because, while we could indeed send you a gif of Joe Pesci grilling Ray Liota in Goodfellas as a sign of solidarity, there is no “what the bejesus is happening here?” Joe Pesci gif that we know of.

But can we interrupt this blog for just a moment to tell you how happy we are to hear from you? We’re not celebrating your bewilderment or sadness at dealing with bad UX or anything. We’re just glad to see that you’ve noticed the problem, identified it as such, and taken the time to bring it up.

Now back to your bejesus.

You use the word “funny”, which hints at a design or appearance conversation. Which, in part, it is. The decisions that led to your befuddlement are usually CSS choices and only take a little tweaking to correct.

But the underlying problem actually goes a little deeper, so it’s better to think about it as a functionality issue. Because stakeholders (devs, clients, employees, etc.) usually take bad functionality a little more seriously than bad design. Alas.

Here is why your funny copy problem is actual a funny functionality issue.

Imagine your daily walk to work took you past a row of houses painted vomit green. Not nice at all, maybe even icky, but you wouldn’t call that an architectural issue.

Now imagine that, in addition to the vomit-y color, the designers of those houses decided that the front doors, which are all elevated four feet above pavement level, didn’t need steps.

If it was your house, I’m sure you’d be asking yourself “What the bejesus is happening here?” whenever you stepped out the front door. So would your guests. So would the postman. So would Joe Pesci, for that matter.

Your reading issue is more like those stepless houses than the purely vomit-y ones. Because, in your case, a set of bad design decisions have actually impacted your ability to interface with your writing.

That’s the bad news.

The good news is that it’s usually very easy to fix bad user reading experiences (URE).

The reason you can’t read your writing is simply because it was designed not to be read.

And before we tell you exactly why, we want to add a huge disclaimer that we aren’t digital gurus, professional typographers or usability researchers.

We’re hardcore readers, writers and editors who interact with an obscene amount of web content across every screen size and condition imaginable every day.

While there are studies still being quoted today that say longer line length (95 characters) actually improves comprehension, we’re siding with our own experience and virtually every long-form content platform that exists today.

1

Eyes don’t want to read lines longer than about 75-85 characters on screens any more than they want to read books that stretch across two pages or five road signs stacked horizontally together to form a message. If your lines run far over that character length, it’s just glyph stew. No one’s going to read it.

2

Eyes can’t read body text comfortably at 16px and below. Typographers, readers and grannies everywhere are in perfect alignment on this one. Tiny font sizes, like the ones you’re reporting, are often the sad preference of devs and digital agencies. More on why below. But the end result is clear: tiny fonts don’t get read either.

3

Eyes can’t read text that has low contrast, weird letter spacing (tracking) or funny line height. Okay, you’d have to have a pretty odd bird writing your CSS to have odd tracking (well-designed typefaces don’t need any adjustment for body text), or line height. But color can influence URE too, and color is tricky. For more on color accessibility best practices, check out what the Web Accessibility Initiative has to say about it.

If the designer of the website your articles end up on isn’t aware of these web typography best practices, you’re going to end up with illegible texts that serve more as ornamentation than content.

Now the important question.

What can you do about it?

We aren’t web theorists, but we do have a theory about why this happens and it’s tied to your question.

Our theory is that designers who design texts that can’t be read probably don’t spend much time reading, or writing, texts online. It makes sense and has a strong precedent in other areas of UX.

For example, when tech companies like Squarespace or Google decide to introduce a new feature or tweak an existing one, their decisions are usually based on feedback from diehard users. These are the users who not only know the products best but who know their limitations and what would make them better.

If you spend two or more hours a day reading and writing online, you know best what types of line lengths eyes prefer, how big text should be and what colors work. If you don’t interact with web texts regularly, it’s all the same to you.

That’s our take, Funny Blog.

If you want to do something about it, the best thing would be to have a civil chat with the design or dev team. You can bring a little research to support your case (feel free to quote us) and some examples of blogs or content whose formatting showcases these best practices. Honestly, the content experience should speak for itself.

If you still don’t convince them, we recommend making a bet with the whole team.

Unless they manage to read their own 120-character, 16px lines on a desktop screen (1440px-2500px) all the way to the end without rolling their eyes and sighing, taking a break to check their Twitter feed, or zooming in to about 125%, you get the key to their CSS file.

Don’t know what to change? Drop us a line here.