Recently, my colleague Bob Ball wrote an excellent piece on the fundamental principles of good typography, If I can’t read it, it’s ugly! If you haven’t read it, go check it out before you continue reading this article.
It’s ok. I’ll wait.
Done? Good.
Bob makes some great points. Designers would be wise to heed his warning to avoid the siren call of favoring form over function. (I’m looking at you, Panda-Hat-Wearing-Millennial-Designer.)
He also lobbed me a proverbial softball, asking the question, “What makes for good digital typography?” This is an important question to ask, especially for those of us who work with non-profits.
Our work affects the lives of millions of people all across the world. Done well, our designs have the potential to provide food for orphans, shelter for the needy and hope for the hopeless.
Typography matters.
So what makes for good digital typography? Before we answer that question, we have to answer 3 other questions:
- How is digital typography similar to print typography?
- How does digital typography differ from print typography?
- How do these differences affect our readers?
Let’s talk about the first question.
How is digital typography similar to print typography?
Bob makes the point that all typography serves the same purpose:
“In short, the best design whether in print or online is where the reader does not notice the design or the type, but comprehends the message.”
Typography is similar to theater lighting. In a theatrical performance, there is almost always some sort of lighting being used for the benefit of the audience. But, if you’ve been to a play before, chances are good you don’t remember the lighting. That’s because good theater lighting is invisible. When done well, it calls attention to the events that are unfolding on the stage, not to itself.
Typography is the same. Done well, it doesn’t call attention to itself, but enhances the message the author is trying to communicate. There are many techniques that transcend the medium used and Bob has covered a number of them, so I’ll spare you the reiteration. The details of what makes for good digital type vary somewhat from print, but the principles of legibility are generally the same.
How does digital typography differ from print typography?
The primary difference between print and digital typography comes down to how the characters are created. Printed type consists of ink or a similar material applied to a physical surface. Digital type amounts to light shining from a screen.
This seems like kind of a “duh!” thing to point out, but it accounts for the fact that digital type is harder to read than print type. Over time, reading digital type causes eye strain. The eye is taking in light from the screen while trying to focus on something specific in the midst of that light. (Not to mention compensating for more light from the inevitable screen glare.)
By contrast, reading printed type relies on a reflected light source to illuminate the ink on the page.
Also, the issue of formatting is a distinct difference between the two. With print type, you can control every tiny detail. Typeface selections can be perfect. Line lengths can be exact. Ink color and paper consistency can be expertly paired for a beautiful reading experience. Not always so with digital type.
Because of the infinite possible combinations of screen size, default fonts, browser capabilities and monitor display settings, you can’t know many things that were once taken for granted in the publishing process.
How do these differences affect our readers?
Besides knowing that digital reading causes eye fatigue, we also know that the habit of the typical online reader is to skim content, not read it. This isn’t just because our eyes can’t handle extended screen time. It’s because internet use is rewiring the way our brains work.
In his book, The Shallows: What the Internet Is Doing to Our Brains, Nicholas Carr argues that our use of the internet is fundamentally rerouting the synapses of our brains and changing the way we interact with the printed word:
“The Net’s interactivity gives us powerful new tools for finding information, expressing ourselves, and conversing with others. It also turns us into lab rats constantly pressing levers to get tiny pellets of social or intellectual nourishment.”
The internet is feeding the pleasure center of our brains. We are rewarded when we hop from one link to the next. Our need to get to the next bit of information is being constantly created and fed as we browse. As a result, the online user is like a toddler on a sugar high: easily distracted and unwilling to give up more time than is absolutely necessary to reach their goal.
So…what do we do?
In light of this, a simple principle to remember is don’t make me think. According to Steve Krug, who wrote a book by the same name, this is the most fundamental rule of usability. It permeates every area of web design and needs to be our North Star as we create digitally.
I thought we were talking about typography?
True. You’ve been patient. And now that we understand the context for digital typography a little better, here are some practical guidelines that can improve our use of digital type:
- Body type can be set in either sans serif or serif type. (Creative directors rejoice!) Sans serif used to be the best option for digital type because computer screens didn’t render serifs well. With the rise of higher resolution screens, this rule has become a little more relaxed.
- Font size should be set using a digital unit of measurement called an em. 1 em is the typographic cornerstone that all web type is based on and is usually the baseline size for all body copy. The exact value of an em will vary from device to device, and usually has been optimized by the device maker to be a comfortable size for reading a line of text. Most often it’s equal to something between 16 and 18 pixels.
- Line length should fall somewhere between 40 and 75 characters.
- Line height (known as leading in the print world) should be directly proportionate to the line length. The rule of thumb is that the longer the line length, the greater the line height. Line height is also measured in ems and is based on type size. Typically, I aim for somewhere between 1.5 and 1.75 ems for the line height of body copy, and 1.1 to 1.2 ems for headlines.
- Paragraph lengths should be short and the amount of copy should be optimized for scanning. If possible, breaking dense copy into small chunks and using bulleted lists improve retention. Remember, don’t make me think!
- Type color is amplified by the nature of the backlit computer screen. Extreme blacks and whites are difficult to look at and should be avoided. Dark grey and off-whites should be used in their place.
- Contrast between type color and the background color should be high.
- White(ish) text is not off-limits but should be used sparingly. Reversed type should never be used for an extended length in the body copy.
- Type size relationships are important to consider. It is necessary to define a coherent set of H1 to H6 headline sizes in proportion to the size of the body copy. (I recently stumbled across this resource. It’s quite helpful in selecting type sizes.) Your type system should responsively scale-down, based on your device size. The relative proportions that work well on a desktop computer won’t work as well on a mobile phone. Typically, headlines will need to scale-down while your body copy size should stay pretty close to the same size.
At the end of the day, I am not too concerned with how much you know about typography. Seriously. You’re probably thinking, Wait a second. Didn’t he just ramble for way too long about typography? What is he talking about? Hear me out. My chief concern is not how well you understand typography. My chief concern is whether you care about your audience.
Empathy is tough to impart through a blog. But take a second and ask yourself, Do I care about the people I’m designing for? Do their needs matter to me? If I found out that I could improve their experience, would I do it?
You see, if you care about your audience, you’ll master your craft. You’ll strive to create work that is not only beautiful but helpful, and you’ll take every opportunity to improve it. If you care about your audience, you won’t bristle when you receive a critique — you’ll embrace it.
If you care about your audience, you will grow. The typography will follow and it won’t be ugly.
The panda hat though…get rid of that. You look ridiculous.