Due to the rise of web fonts and the big improvements in display technology we should all take a short break. Yes, it’s you I am talking to. Designers, developers, actually anybody building stuff for screens. Mobile as well as desktop. We nearly missed the moment that it happened. We now (yes, now!) have the control and quality at our hands that was previously only available to these serious looking print designers and their books, posters and magazines (well, almost).

With our newly acquired possibilities (hell, we’re real designers now, aren’t we?) come a few distinct duties which we had previously thought wouldn’t apply to us. In the past, we always just needed to point at technical limitations and uncertain environments to have an excuse for not going the extra mile for good readability. But, fortunately, those days are over. No more excuses. We now are fully comparable to our seasoned brothers and sisters in the printing industry. And we should stop violating hundreds of years of basic design knowledge.

Rest assured, there’s no need to be afraid of anything. There is no magic happening over there, either. All we need is a little knowledge refresh on our typography and layouting muscle. Most of this stuff is simple. It’s been tried and tested for hundreds of years. And for your convience, I will give you a quick and dirty roundup on the very foundations of good readability and layout. For a more detailed and in-depth take on this topic take a look at my upcoming book “Readability“.

Information Density

You may have heard of my old companion Edward Tufte (if you haven’t, learn more about him here.). He strongly felt that we made the wrong use of Information Density. And he is right. Still this is the most frequent design error I see. And it’s the most basic one, too.

“Tufte feels that the main measure of a web site (or any computer interface) should be the percentage of the screen that is actually devoted to the task at hand. He wants web pages to use words instead of icons, because words can display information more compactly. He does not like navigation bars, but instead wants as many choices as possible on the main page.”
Jeff Atwood on Edward Tufte’s book Beautiful Evidence.

He may (or may not) be a bit over the top on this. But his main message is as right now as it was over ten years ago when he started preaching it. This is the way any application or web site providing information should be designed:

• Above all else, show the data
• Maximize the data-ink ratio
• Minimize non-data ink

It’s good to remind ourselves occasionally about our utmost priority. And this is what every user expects from us at the most basic level. To let him consume our information efficiently. So, don’t decorate or litter your site. Where possible, do away with contextually useless data (like ads or other unrelated visuals that distract or consume your user’s attention unnecessarily). Show him what he expects to see. Stop gaming your own users. Instead, be helpful. This is the foundation of everything.

Now that that is said, let’s get down to taking a look at your content. If it is text (actually, most content is), you will find some of this useful.

Finding the optimal line height and characters per line

Amazingly, I see lots of people struggle to get these most fundamental settings right. So let’s start out with “setting” this straight. The measure. That’s what typographers call the numbers of characters per line. This is the number of characters in one line of text, before wrapping to the next line. It’s a crucial setting that can hugely impact readability by your users. So let’s choose it with care.

“Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66-character line (counting both letters and spaces) is widely regarded as ideal. For multiple column work, a better average is 40 to 50 characters.”
Robert Bringhurst,The Elements of Typographic Style.

This is a the classic typographic approach from the old print days and it seems to still hold true. Research says that lines that are too short stress people while reading and break their reading rhythm, while lines that are too long confuse them because they lose their sense of where the line starts and where it ends. To avoid both these negative consequences, you should settle for a measure between 50 and 75.

To keep the line length scale with your font size, you should choose em (or rem) as your unit in CSS. Remember not to set your type too small. Go for a comfortable reading font size starting around 16px.

Now use this to determine your vertical rhythm or leading. These are the old print terms for what we now call line-height (it’s the distance from one baseline to the next).

The rule of thumb here is that the wider your measure (characters per line), the more generous your line height should be. Furthermore, you should take a look at your font and its x-height (the height of the character “x”). Fonts with a high x-height need more line-height than ones with smaller x-height. Additionally, Sans Serif fonts tend to need more line height than Serif fonts. This is because Sans Serifs often tend to have thicker line strokes compared to Serifs. Setting them too densely can make your page look dark and crowded, impacting readability quite badly.

• Longer lines = higher line height / shorter lines = lower line height
• Higher x-height = higher line height / lower x-height = lower line height
• Sans Serif = higher line height / Serif = lower line height

You should settle for something between 125 and 175 % of the font’s size, chosen using the rules above. This will require you to trust your own feelings a bit (hey, you are about to develop a designer’s eye!). If you don’t feel comfortable with this decision, ask someone you trust. But it isn’t that difficult. Follow the above rules and things should work out fine.

We should already have quite a reasonable result by now, and now that we have decided on these important basics: Let’s get into a few details that will let your text shine.

“Don’t compose without a scale”

“In the sixteenth century, a series of common sizes developed among European typographers, and the series survived with little change and few additions for 400 years. Use the old familiar scale, or use new scales of your own devising, but limit yourself, at first, to a modest set of distinct and related intervals.”
Robert Bringhurst, The Elements of Typographic Style.

In short: Your text needs some sort of scale between its main parts (H1, H2, H3, p) to be easy to read. This may sound difficult to achieve, but actually it isn’t. At least at a basic level. And that is already a good starting point. There are lots of great tools around to help you develop a scale that fits your content. I would recommend using the Typography from Ian Lamb. It does a great job in helping you develop a good typographic scale. Choose one of the predefined scale systems. Now, implement the CSS. You should end up with something similar to this code:

 body { font-size:100%; }
 h1 { font-size:2.25em;  /* 16x2.25=36 */ }
 h2 { font-size:1.5em;   /* 16x1.5=24 */ }
 h3 { font-size:1.125em; /* 16x1.125=18 */ }
 h4 { font-size:0.875em; /* 16x0.875=14 */ }
 p  { font-size:0.75em;  /* 16x0.75=12 */ }
 

Remember: These settings are just the foundation. You should spend some time fine-tuning the details till you feel comfortable with them. The whole topic of Typographic Scale and Proportion/Harmony is worth another ten blog posts, so I will limit myself to this short introduction. I will be covering this topic (and many more) in “Readability” in great detail.

Ligatures and Hyphenation

These two get forgotten so often, it makes me weep. But they can do wonders for your text flow and increase the reading user experience greatly.

First, Ligatures. These are specially designed character combinations that need special treatment to fit perfectly (for more detailed explanation check out this FontShop blog post or subscribe to get notified as soon as “Readability” is available). If you use a decent font with Open Type features they should contain ligatures, as well as alternative characters, smallcaps, different kinds of numbers and more. You can activate them by simple using this piece of CSS:

 h1 {
   -moz-font-feature-settings: "liga=1, dlig=1";
   -ms-font-feature-settings: "liga", "dlig";
   -webkit-font-feature-settings: "liga", "dlig";
   -o-font-feature-settings: "liga", "dlig";
   font-feature-settings: "liga", "dlig";
 }
 

Same applies to Hyphenation. This is a relatively new CSS feature, but it degrades gracefully. CSS Hyphenation is the better Word-Break. It’s locale-aware (depending on the dictionaries available for your browser) and inserts the hyphen character in the correct place when breaking the words. This is especially important in responsive design. It will save you from a lot of ragged lines. Just kick in these lines of code:

 -ms-word-break: break-all;
 word-break: break-all;
 
 // Non standard for webkit
 word-break: break-word; 
 -webkit-hyphens: auto;
 -moz-hyphens: auto;
 hyphens: auto;
 
 -webkit-hyphenate-before: 2;
 -webkit-hyphenate-after: 3;
 hyphenate-lines: 3;
 

This will bring you the broadest possible browser support and will degrade gracefully in all unsupported browsers. For a detailed list of browser support, check out CanIUse.

These recommendations should give you a good starting point on your path to a satisfiying user experience. I know for some of us this stuff seems a bit daunting. But I can assure you, everybody can learn to engineer a good reading experience. And if you want to know more about designing for readability on screens, check out my upcoming book “Readability“.

You might also like…