Bigger type please!

Let’s take a few minutes to look at type on a colored background. Does it need to be bigger?

A few years ago I took a number of typographic “schemes” to the president of our company for approval. He looked at some and said “Okay,” and at others and said “This type needs to be bigger.” After I got back to my desk to make the modifications I realized that he had both okayed and criticized the same scheme on numerous instances, but that the difference was in how the type was displayed against a colored background. So I went to work trying to figure out what was there beyond his obvious “make it bigger” request.

What I discovered was that it is not so much the size of the type as the contrast between the letters and the background that makes certain type hard to read. As you saw in the section on emphasis below, there are circumstances in which you simply need more contrast to make something more readable. Contrast can be achieved in several ways. The first is by making the difference between the value of the type and the value of the background as large as possible. This is a color issue. But sometimes you want to use colors that simply don't have that much range between their values. So what do you do then?

There are other kinds of contrast than just the contrast of value. One, true to my president’s desire, is contrast of size. It is true that making the type bigger may make it easier to read. Not necessarily proof positive, however. Contrast of texture is another way to achieve better readability. Instead of making the type bigger, make it heavier. You can vary weights of type in HTML by fairly small amounts rather than requiring actual bold, demi, or heavy typefaces; and respecting typographic purists who want to honor the typographer’s intent, when you put the type on a colored background, you are already altering the intent so feel free to make minor alterations in weight for the surface you are working on. Contrast of density may be another way of making the type more readable. That is simply spreading it out a little more, both vertically and horizontally.

Surprisingly, all these methods actually work to improve the readability of text on a colored background, proving once again that there is no single answer to any of our reading problems, but a variety of options for solving them. My opinion is to try them all and see which one fits your use best. It may be simply making it bigger.

Is this important?

Or is this?

One of the older myths of page design held that if it was important it should be printed in red. And in some cases, red type does, indeed, draw attention. But in terms of sheer page dominance, red doesn’t hold a candle to strong pure black.

The value of a color often is less significant in cueing your audience to the importance of an issue than the background, position, and graphic treatment of the text. Let’s try that again:

Now this is important!

The first thing you notice is that if you want to use a color to emphasize a point, it should be the dominant thing that people see. The background behind this block of text is far more telling than the text itself. The fact that it creates a significant block across the page rather than just being behind the text portion is another thing that draws your eye to the color. Finally, the level of contrast between the text and the background is high enough that both read well. You'll notice that the red of the background is much more orangish than the red of the first line of type in this post. I’ll talk more about contrast in the next post.

So, if you want to use color to show something is very important, it helps to use the color to create a background or a solid block with type in it rather than to color the type on the same background as everything else. Let’s take one more look at this form to see if it works in reverse.

This is really important.

It makes a big statement whenever you put a black band across your page, but note that in order to make the type stand out against this, it is even yellower and not nearly as red. The reason? There simply isn’t enough value contrast between black and red to keep the type from disappearing into the background.

The rules for emphasizing text:

1. Contrast is more important than color


2. Large blocks of color draw the eye more rapidly than colored type


3. Colored text against a black background needs to be even lighter than the background when black text is used against it

It’s as easy as 1-2-3.

Pagination

Why is it that people find pages easier to read than scrolls?

Well, if we were dealing exclusively with physical pages and scrolls, the answer would be fairly obvious. Shear logistics in finding a place in a scroll as opposed to flipping through a few pages would make preference to pages obvious. But in the electronic world is there any benefit to having pages instead of scrolling screens of content?

The answer to this is still both yes and no. If we compare paginated content in the form of fixed pages that relate to something other than the size of the screen or its viewing area to a bottomless scrolling page, we have to say that there is not a lot of benefit to pagination. The page is seldom the right size for the viewing environment and often requires oddball scrolling before pages even come into play.

However, if we compare the bottomless scrolling content to a page that is properly formatted and laid out for the viewing area on-screen, some advantages can be seen. First and formost is the problem of the reading line-length of the content. Many scrolling pages have content that is so wide that it is difficult to track from the end one line to the beginning of the next. Secondly, as you scroll, the eye fights to maintain its place in the content. If you use single line scrolling, you are constantly tapping the down arrow, trying to stay in a rhythm with your reading speed. If you use page-at-a-time scrolling, the eye often loses its place at the top or bottom of the screen before settling on a start point for the new reading experience. Both of these problems disappear with paginated content. If it is properly formatted for the screen size, then the line-lengths would be correct, showing multiple columns or appropriate margins to surround the type. The eye automatically snaps to the top left corner of the page (in western culture) an begins reading with the first character every time, reducing the amount of time spent looking for the right place to continue reading.

This does not necessarily improve the locating of content. In fact, in some instances it may be harder to find specific location in paginated content than in scrolling content. Most paginated reading experiences, for example, make it difficult to tell how far into the content you have progressed compared to the elevator box on a scrollbar. Even if you have page numbers, are you on page 100 of 500 or page 100 of 101?

Many people have also suggested that pagination that differs from viewing surface to viewing surface (including the printed book) is highly confusing and makes it difficult to find a particular location if previously viewed in a different layout, or to match locations in a class where there are multiple layouts. I want to suggest that this problem is not better in a scrolling environment and that in either case we need better visual cues and navigation systems in order to make on-screen reading a palatable experience.

Does paginated content offer a better reading experience than bottomless scrolling content? I would have to say that in most of the current manifestations it is a toss-up. But the potential exists to make a phenomenal reading experience from paginated content that is combined with a great user interface and navigation system.

Optimum Line Length

If you go entirely by empirical research, you will discover that from the first books printed in English to today’s paperback novels, there are about 65 characters per line in material that is meant to read immersively. Several studies have looked at the optimum reading line length in English and agree that for immersive reading experiences, around 65 characters per line is best. Even design books will tell designers to use the two-and-a-half alphabet line length as a guideline for best readability. But why is it?

An examination of the mechanics of the eye shows that there is a parafoveal angle of the eye that is approximately 12°. Within that, there is a foveal angle that is about three-quarters of a degree. The foveal angle is the amount of input into the eye that is sharply in focus. The parafoveal is the amount of information that is registered, but largely ignored by they eye as being slightly out of the direct line of sight. Beyond this 12° range we enter peripheral vision. The interesting thing is that this marks out the range of eye movement that can be done without engaging the neck muscles to turn the head as one reads. So, one might say that there are 16 chunks of sharp vision in the 12° range as the eye scans a line of type before returning to the beginning of the line.

But how much information can be acquired in each resting point. Some studies have shown that we can sharply see and register about 4–5 characters within the foveal fixation (coincidentally, the average length of an English word). What is not readily available in that information is whether the character recognition was based on a common book line of type or if it was scientifically arrived at by quantifying how much information the brain is able to comprehend from one foveal fixation point. It seems curious that the line length conveniently works out to 4 times 16 or 64 characters as the optimum.

Without getting into a criticism of what we base our opinions on, I think that there is an open question that arises out of the investigation that no one has broached. Is it the number of characters within the foveal range or the amount of information that is contained therein. If it were the number of characters, we should expect that there should be 4 or five Chinese characters in a fixation of the eye. But each Chinese character is an entire word. So where we have five characters to make up one word, the Chinese would find five words. Can the eye grasp that amount of information in a single fixation? Or does it imply that Chinese should be written with only 32–33 characters per line instead of 64–66?

I raise these as questions, acknowledging that a lot of work has been done on this subject, but not yet having found the exact universal algorithm that would translate typesize intuitively across cultures and script types. I’m not yet ready to propose an answer, even though I’ve proposed a couple patents on technology that would offer one solution. For here, it is enough to question.

To Serif or Not To Serif...

I love the quote from Herb Lubalin regarding Helvetica typeface (on which Swiss, Arial and Geneva are based):

“It is easier for Europeans to use Helvetica. It’s very difficult for Americans. We can appeal to big corporate executives with Helvetica and to stockholders who read annual reports, but for the great masses of Americans we cannot do that. There are over two hundred typefaces in the world for the masses, and then there is Helvetica. Helvetica is for designers, design students, design instructors, and a few intellectuals and clients, and for the population of Switzerland.”

What Lubalin points out with his tongue-in-cheek witticism is that readability is largely cultural in nature. Why else would Europeans—and especially the population of Switzerland—have an easier time with the sans serif font? If you stop to look at the wider ramifications of the thesis that serif type is easier to read than sans serif, you find how ridiculous that is when you are dealing with Arabic, Chinease, Kanji, Korean, Hebrew or other non-western scripts. We find it easiest to read what we are used to reading.

I believe that today Lubalin would find a much wider audience for Helvetica based simply on its commonness (in one or more of the variants above) on computers. In fact, those who are using computers at young ages may even show an affinity to Helvetica akin to that of the Swiss. Compare that to their parents who learned to read paper books printed in New Century Schoolbook (serif typeface).

So, I hold that there is no definitive evidence that validates the generalization that serif type is easier to read than sans serif. I do, however, believe that in keeping with the credo first stated in my October 7 posting below (the purpose of design is to communicate) the savvy designer will choose a typeface that is comfortable for the majority of his or her audience in order to ensure optimum readability.

Readability

Here’s an issue that seems to rile up everyone from Bill Gates to my daughter’s grade school teacher. What makes a document readable? Where’s the hard science that backs up the big assertions for readability? Is there any way to adapt documents to different reading environments and maintain good readability?

Okay, so that’s an issue that we can and will talk about for about 30 postings as I’ve been trying to make sense of it for 8 years now and still don’t have all the answers. (Maybe a few, but not all.) So maybe the best thing is to state some common assertions and see if there is hard science to back any of them up.

1. Serif type is easier to read than sans serif.


2. 65 characters is the optimum line length.


3. Paginated content is easier to read than scrolling content.


4. Colored type draws attention.


5. Type on a colored background needs to be bigger.


6. Screens won’t be easy to read on until they have a resolution of 300 pixels per inch.


7. Lettersize or A4 is the most readable page size.

Well, that will give us something to work on for a while. I’m sure we’ll find some other assertions floating around eventually. Do you have any? Or comments on these? I’ll investigate them in future posts, but not necessarily in this order.

The Purpose of Design

Back at the advent of the desktop publishing revolution (in the mid-80s) there was an influx of new designers in the market, most of whom had designed nothing more complicated than their signatures before getting an Apple Macintosh. A friend actually sent me a letter that used all 28 of the original Apple fonts on one page. He was so overwhelmed with the opportunity to use type that he’d never had before that he simply couldn’t control himself. Hence we entered an era of “ransom note publishing.”

But we set about educating the new raft of designers and computer users and we mostly got past uncontrolled typography. But documents still didn’t look good, and the more features that were added to desktop publishing programs that real designers were craving (rotated type, text wrap, kerning, etc.) the worse the non-designer’s documents looked.

So I came up with a basic tenet that I delivered to all my students: The purpose of design is to communicate a message. Design that fails to communicate, fails. And I hold that some of the “real” designers out there probably still need reminding occasionally that no matter what clever technique they have discovered recently, if the design doesn’t facilitate the communication of the message, it fails.

Why “The Vulture Papers”

Several years ago Mary Doria Russell wrote a terrific book called The Sparrow. In it she wrote of a type of person who sat at the edge of a worker’s desk and watched exactly how his or her job was done. When the analyst had thoroughly completed the job, he or she wrote an artificial intelligence program that could do the job just as well as the worker.

The workers at the desk were referred to as sparrows and the analyst was the vulture.

Over the past several years, I’ve been analyzing the design of documents, both on-screen and on paper, and inventing methods to automate huge chunks of the design process. Having been a publication designer, I feel a twinge sometimes about making design an artificial process. So I started referring to the papers I was writing as Vulture Papers.

When you start to look at the whole process in as much depth as I have, one thing you will surely discover is that designers won’t be replaced anytime soon with artificial intelligence. But the 80% of a designer’s function that deals with calculating grids, typesizes, and adapting from one media to another can be automated—freeing designers to focus on the 20% of the job that sets them apart as designers rather than assembly-line workers.

But, I still feel like a vulture, so I’ll keep publishing “The Vulture Papers.”