When you write content, normally you do not have to worry about the length of your sentences (unless you are on Twitter). Most web pages and applications you use will automatically wrap your sentences when you get to the end of the page. But as a designer, it IS your job to worry about this and every other detail that effects how the page is used, read, and understood. There are many factors that effect the readability of text on the web:

  • Font selection (Ariel, Helvetica, Comic Sans)
  • Size of the font (10px, 12px, 50px)
  • Color and contrast (Black is readable on white, not on black)
  • Spelling and Grammar (my old grade school nemesis)
  • Word choice, idea density, complexity, image usage, grammar, language, etc…

Each of these deserves its own post. But today I’m talking about line length. Having the right amount of characters on each line is key to the readability of your text. How wide should a column of text be, to optimize readability?

Short answer: approximately 55-100 characters depending on your audience and the medium! This is the common rule of thumb and from my own experience and research I agree with it.

The optimal line length for your body text is considered to be 50-60 characters per line, including spaces (“Typographie”, E. Ruder). Other sources suggest that up to 75 characters is acceptable. So what’s the downsides of violating this range?

  • If your text is too long – if a line of text is too long the visitor’s eye will have a hard time focusing on the text. This is because the length makes it difficult to get an idea of where the line starts and ends. Furthermore it can be difficult to continue from the correct line in large blocks of text.
  • Too short – if a line is too short the eye will have to travel back too often, breaking the reader’s rhythm. Too short lines also tend to stress people, making them begin on the next line before finishing the current one (hence skipping potentially important words).

It turns out that the subconscious mind is energized when jumping to the next line (as long as it doesn’t happen too frequently, see above bullet point). At the beginning of every new line the reader is focused, but this focus gradually wears off over the duration of the line (“Typographie”, E. Ruder).

wikipedia-readability

Technical manuals and academic papers are more densely written (although I wonder if this is to convey the impression of knowledge and complexity that might be undermined by a big, easy to read letters on the page).  Smart people like to read things that make them feel smart. The pages of academic pages and published studies are densely packed with small fonts, but most still honor the rules of readability.

Most columns are 65 characters in length.

Nature: The International weekly journal of science; Most columns are 65 characters in length.

If its a children’s book, and you are teaching people to read, you might only have a few words per line (i.e “See spot. See Spot Run. Run Spot Run!”). Young adult books also have large fonts and thus fewer words per line - Charlotte’s Web is recommended for readers 9 to 11 years old and is on the low end of the scale at 55 characters per line.  Young readers need larger fonts and more space to separate each word for clarity.

Children's-book

Children’s books like Charlotte’s Web use a larger font and only 55 characters per line.

Printed newspapers have the shortest columns widths of printed material with 25-35 words in a column inch.

nyt paper - 35

For centuries, page design has been influenced by the so called “golden ratio

The golden ratio as applied to page margins and width is used in many books.

The golden ratio as applied to page margins and width is used in many books.

When the Renaissance genius Leonardo_da_Vinci put pen to paper he did so with a careful observation of the golden ratio.

Da Vinci was obsessed with the golden ratio but not readability, all the text was written in a mirror image with 85 characters per line.

Da Vinci was obsessed with the golden ratio but not readability, all the text was written in a mirror image with 85 characters per line.

Early printed books used “justification” to get exactly the same amount of characters per line by breaking words with hyphens and varying the amount of spacing. This makes the page look better but its not always the best for readability. Automatic justification in programs like Microsoft Word is even worse for readability because it can create huge gaps in the sentence and the brain has to work harder to read them.

Early typeset printed documents fudged the spacing to "justify" the margins (50 characters per line)

Early typeset printed documents fudged the spacing to “justify” the margins (50 characters per line)

Some other considerations:

  • Search engines prefer titles with 70 characters or less.
  • Plain English recommends short sentences. Robert Gunning faults marathon sentences in his book How To Take The Fog Out Of Writing. Though he admits to the possibility of long sentences being balanced and readable, he notes that only highly skilled writers such as Charles Dickens and Thomas Wolfe can write a marathon sentence with clarity. He adds: “But even these accomplished writers produced marathon sentences only occasionally. On the average, they wrote fewer than 20 words per sentence.”
  • In an app or special device, like the kindle, you have the ability to completely focus on the text.
The kindle has 50 characters per line

The kindle has 50 characters per line

My favorites:

New York Times - 77 characters per line.

New York Times – 77 characters per line.

usa today - 55 - 85

USA Today has 55 characters on lines next to images, and 85 on the long lines.

Conclusion

These are not absolutes, but when you look at the most readable sites and applications on the web, and by that I mean not the prettiest, or most aesthetically pleasing, because something can look great, and maybe have the impression of usability, but be difficult to use in reality. Sometimes I find myself looking at beautiful page, but not wanting to read the text. The following pages have great readability in my opinion. Keep in mind, if the content is interesting to you, you will find a way to read it no mater what the obstacles. But as designers, we should at least make sure we do not get in the way.

When you design something, there are two ways to do it. You can go big, and invest your whole heart and soul into it. You can pour time, money, and passion into the endeavor and hope it pays off. Big design is risky. You take chances, and if your do it right, and create something special, the world will love you.

The other approach is to stay with the classics. It took me a long time to learn this. My first lesson was Halloween. Every year, Halloween at the Shoemate house brings performance anxiety. I get my knife out and I stare at the blank face of the pumpkin. I know that a REAL artist would go big. By the end of the night a real artist would carve this pumpkin into some kind of 3d masterpiece that would give neighbor kids nightmares and go viral on the internet. And if I took my time, planned it out, refined the design, thought it through, I could, and have, pull off something awesome. But the truth is, I didn’t plan, and I don’t have time to go big. I still don’t even have my costume picked out.

So if you can’t go big, if you lack the time, skill, or energy to do it right. Then fall back on the classics.

  • Triangle eyes, square notch at the bottom for pupils.
  • Triangle nose.
  • Square toothed smile.

Simple. Fast. Easy. Classic. The classic jack-o-lantern works.

Getting dressed up for a wedding? Black suit, black tie, white shirt – classic.

Making content for a website? Don’t have time to make a fancy info-graphic? That’s ok. Headers, bulleted lists, simple images. Classic.

The classic is a classic for a reason: It works. It’s not boring, you won’t look bad, you don’t need an excuse and if anything, it makes a bolder statement.

Picasso often said: color weakens. So he used just black and white. If you use color, do it deliberately. Boldly. No grey. If you want black – go black. Know what you want and do it.

626cccecf04f16d5fc9f4f34d0135704

By the way: Picasso Black and White on exhibit at the Houston Museum of Fine Arts

 

readyplayerone

I do not recommend books very often, but I recommend this one. Go read: Ready Player One. If you have a single fond memory of the 1980s, or liked any of the following movies: The Matrix, Willy Wonka and the Chocolate Factory (the old good one), Star Wars (again, pre-prequel Star Wars), and if you ever played video games as a kid (and still do) – then you love this book.

I read it straight through over the weekend and I could not put it down and immediately started re-reading it as soon as it was over. I’m gushing about it on my blog because my wife doesn’t share my love for giant robots, virtual reality, or video games but I know that you (the Internet) share my passion for all things geek. Of coarse – you might need to lower your expectations. I had low expectations and only picked it up because Barns and Nobles had it on the buy 2 get one free shelf (yes I still ready paper books). Anyway – hats off to the author Ernest Cline – he wrote the book I wanted to write.

Read it, and let me know what you think.

I have created some presentations on various topics including one on Best Practices for Personalization with IBM WebSphere Portal that I am going to post shortly to Base22.com but before I do, I don’t want to just give it away for free, I want to at least collect the email address of users so I can send them updates or ask if they want to schedule a discussion. Note: Our website used wordpress when I wrote this, now we just a different method.

Assuming you use wordpress, here is how you can require a user to fill in a form in order to get access to a download.

Step 1: Installed the plugin Email Before Download – Email Before Download presents your users with a form where they submit information, like their name and email address, prior to receiving a download. This plugin integrates with the popular Contact Form 7 and WordPress Download Monitor plugins, allowing you to create any form you like and manage/monitor your file downloads.

Step 2: Installed Contact Form 7 – Contact Form 7 can manage multiple contact forms, plus you can customize the form and the mail contents flexibly with simple markup. The form supports Ajax-powered submitting, CAPTCHA, Akismet spam filtering and so on.

Step 3: Install Download Monitor – WordPress Download Monitor Even though it is no longer supported, it still works.

Ok. So now let’s test:

I uploaded a small image as the file.

    Download requires your emailPlease complete the following for access to the free download. A link will be sent to your email. It might go to spam so check.


Your Name (required)

Your Email (required)

Good Design Tells a Story

February 6, 2013 — 1 Comment

Good design tells a story, and it is the story that maintains a website just as much as the help desk and developers. When authors and users believe the story the design tells, the system can practically maintain itself. Imagine if Wikipedia were destroyed. If all the databases were corrupted and all backups lost. If this happened the world could come together and recreate it in a month of patriotic wiki editing, every person contributing his or her own time and knowledge to rebuild it, perhaps better than before. This is possible because everyone understands the story wikipedia tells. The same is true of all great websites from Amazon and Facebook to YouTube and Craigslist (which could use a little CSS in the next iteration).

When we design a site, regardless of how many bells and whistles it has, it is important that it tell a story that is simple enough that people can hold the whole thing in their mind. This sounds hard, but imagine your local grocery store. If I emptied the entire store and then, as a test, asked you to put a loaf of bread on the right shelf, or milk, or an apple, you would probably get pretty close. The story of how a grocery store is organized is intuitive to you as a user. It something you could explain. This makes it easy for both users and those that manage the store to keep it organized.

If you can’t tell the story of how your intranet at work is organized, if it burned down and had to be rebuilt tomorrow (assuming you would want to rebuild it) – could you do it? If not, you should call us at Base22. We can help.