THE LEGIBILITY OF

BY LINDA REYNOLDS

This is a modified version of Linda Reynolds’ original work, “The Legibility of Type.”

3 CHOICE OF TYPE

VARIATIONS IN 5 LETTERFORM

THE ARRANGEMENT OF 9 TYPE ON THE PAGE

TYPE AND ITS 13 BACKGROUND TABLE OF CONTENTS hat makes type legible? This is often dismissed W as merely a matter of common sense, but if common sense is all that is needed, why is it that some of the basic rules for good legibility are so frequently flouted? True, legibility may not always be the first consideration, but for words that are intended to be read, it cannot be ignored.

1 FOREWARD

It has never been difficult to find examples of illegibility of various kinds. Still, examples around now that desktop publishing systems have brought electronic typesetting within reach of those with little or no knowledge of fundamental 2 design principles. Legibility as an issue is perhaps more critical than ever before. Some of the most important factors affecting it are outlined in this booklet. Xx

3

TYPE FACE

For good legibility, a typeface should have the following characteristics:

1) A relatively large x-height in relation to the capital letter height; this will make the lowercase letters easier to discriminate. 2) Large, open counters and a relatively generous set width; this will help prevent letters from filling in CHOICEand OFrunning together. TYPE Skilled readers recognize whole words by their outline and their internal shape rather than reading letter by letter. If the spaces within a word are lost, it will be difficult or impossible to recognize. 3) Not too much variation between thick and thin strokes; delicate thin strokes may disappear if the image is photographically reproduced during reproduction. These criteria are satisfied by several typefaces, both seriffed, and SANS SERIF sans serif. Sans serif faces, however, SERIF are considered by some to be VS intrinsically less legible than serif faces. It is argued that serifs give horizontal emphasis that helps to hold letters together as words and to guide the eyes along each line. This may well be true. The German school of Gestalt psychologists described several principles by which we try to group areas of the retinal image that are likely to be part of the same figure. One of these is the principle of direction, also known as the principle of good continuation, whereby separate elements with a common direction or trend are seen to form a line. The principle of direction suggests that 4 serifs may indeed help adjacent letters be grouped as words, and words to be grouped into lines. It is also argued that seriffed letter shapes have more individuality and are therefore more distinguishable than sans serif letters. Interestingly, lowercase letters’ top halves are more important in letter and word recognition than the bottom halves. The tops of some sans serif letters are very much alike, whereas, in a seriffed face, they are more easily distinguishable. Some sans serif faces may also cause problems if it is essential that the numeral ‘I,’ lowercase ‘l,’ and capital ‘I’ should be uniquely identifiable.

GESTALT PSYCHOLOGY Despite these arguments, researchers have been unable to find any significant differences in seriffed and sans serif faces’ legibility. Most of us are more familiar with seriffed faces, and it may be that we tend to prefer what we’re used to seeing. Provided that the letter, word, and line spacing are suitable, a sans serif face is likely to be just as legible as a seriffed face, and in some situations, it may be more so.

IN 5 VARIATIONS

LETTERFORM “CAPITALS ALSO TAKE UP MORE ABCD SPACE THAN LOWERCASE Abcd LETTERS...” abcd 6

CAPITALS

Text set in all-capital lettering is less legible than text set in lowercase letters with capitals where appropriate. Lowercase letters, with their ascenders and descenders, create more distinctive word outlines than capital letters. Any word in all-capitals has a rectangular shape. Capitals also take up more space than lowercase letters, so more fixations of the eyes are needed to perceive the same number of words, which slows reading. “...ITALIC LETTERS ARE LESS DISTINGUISHABLE FROM ONE ANOTHER...”

ITALICS 7 Italics are less legible than roman letters for continuous text because the italic letters are less distinguishable from one another. We are also less used to them. With electronically generated type, so-called BOLD ‘italics’ may, in fact, be a slanted version of the roman letters, rather than a separately Bold type is, of course, designed font. Some of these ‘obliques’ invaluable for emphasis, but are likely to have reduced legibility. it is likely to reduce legibility when used for continuous text. The dense black type tends to create after-images, noticeable as bright glowing areas between the lines. CONDENSED/EXTENDED The danger with condensed styles is that the letters will either apparently or actually fill in and run together. The standard of reproduction needs to be high to ensure good legibility. Extended styles reduce the number of words that can be read at each fixation. Normal letter proportions can be distorted very easily in electronic typesetting BOLD systems, with predictably illegible results in many cases. BLACK MEDIUM 8

TYPE SIZE If the type is too small, letters and words will be difficult to discriminate. If it is too large, fewer words will be read. For an average reading distance of 12- 15 in, the optimum type size for continuous text is usually somewhere between 9-11pt, depending on the typeface’s x-height and the circumstances in which the material will be used. THE ARRANGEMENT OF TYPE ON THE PAGE

LINE LENGTH LINE SPACING LETTER SPACING

Line length is a significant factor in For ease of reading, words must The space between letters must legibility. If the lines are too short, be grouped into lines that the be sufficient to separate them we cannot make efficient use of eyes can follow easily. Therefore, clearly. If they touch or appear to our peripheral vision, and the the space between lines must be connect, legibility will be severely typical pattern of eye movements is greater than the word spacing. For reduced. Where condensed sans 9 disrupted. If the lines are too long, continuous text, it is almost always serif faces are set tightly spaced, it is difficult for the eyes to make a an advantage to set the leading it is common to find letters that smooth and accurate ‘backsweep’ one or two points greater than the have fused to form a different but to each new line’s beginning. type’s point size. Leading like this legitimate word with a meaning When ‘backsweeping,’ we may is especially true for typefaces quite different from that intended. miss lines or begin re-reading with a strong vertical emphasis If letter spacing is too great, the a line, known as ‘doubling.’ The (this would include most sans words’ outline will be diluted and optimum line length for continuous serifs and modern seriffed faces), more challenging to recognize. reading is between about 60-65 and for faces with a relatively characters and spaces. Lines large x-height. However, if too of more than 70 characters and much space is added, the lines spaces will reduce legibility and will appear to drift apart, and the may be consciously perceived as text will appear lighter in color. challenging to read. The minimum line length for comfort is probably about 40 characters and spaces. LINE LENGTH LINE LENGTH

LINE 10 SPACING LETTER SPACING JUSTIFIED AND UNJUSTIFIED SETTING

Researchers have been unable to show any significant difference in the legibility of justified and unjustified setting for moderate line lengths. However, there is evidence that less-skilled readers have difficulty with justified setting in very short lines because of the uneven word spacing and WORD SPACING frequent hyphenation. Unjustified setting gives constant word spacing, thereby avoiding the vertical white ‘rivers’ Of course, the space between so often seen in justified text. As well as being aesthetically words must be perceptibly more displeasing, rivers destroy the ‘good continuation’ of significant than the space between the lines, thus making them more challenging to follow. letters within a word. The Gestalt Therefore, successful justification requires a line length of 60 principle of grouping by ‘proximity’ or so characters and spaces, a good hyphenation program, 11 is at work here. However, the and the facility to make fine adjustments in word spacing. spacing must not be so great that the horizontal emphasis or ‘good continuation’ of the line is destroyed. Therefore, optimum word spacing will depend on both letter spacing and line spacing. JUSTIFIED AND UNJUSTIFIED

12

WORD SPACING TYPE AND ITS

BACKGROUND

13

WHITE TEXT ON DARK BACKGROUND

White text on a dark background will appear larger than dark text on a white background because of ‘irradiation,’ a phenomenon whereby small bright images on a dark ground will optically spread. The typeface should have HALFTONE BACKGROUND open counters to counteract this optical phenomenon, and the letters should not be too tightly spaced. Sans serif faces BACKGROUNDS generally withstand reversal better than seriffed faces. When placing text over a halftone There are no fine serifs or thin strokes to be lost if the image is background (also known as thinned-down, and no serifs to fuse if it becomes thickened. mechanical tint), it is crucial to look carefully at the dot size in relation to the type size. The coarser the screen, the more likely 14 it is that the dots will distort the letter shapes. Sans serifs tend to survive better than seriffed faces because of their more simpler and robust letterforms.

CONTRAST

For good legibility, the contrast between type and its background should be at least 70%. For example, say you’re setting black type on a black background; if your background is 100% black, your type should be no greater than 30% black.

There are several ways to build a color palette with contrasting colors using Newton’s color 15 wheel. There are three sections to the color wheel:

• Primary Colors: Blue, Yellow, and Red • Secondary: Orange, Green, and Purple • Tertiary: Blue-Purple, Blue-Green, Yellow-Green, Yellow-Orange, Red-Orange, and Red-Purple

BLUE RED YELLOW

16

YELLOW COMPLEMENTARY

Complementary colors maximize contrast and provide a kind of visual tension because they are opposed to each other. There are six complementary color options:

• Blue and Orange • Yellow and Purple • Red and Green • Yellow-Orange and Blue-Purple • Yellow-Green and Red-Purple • Blue-Green and Red-Orange 17 SPLIT-COMPLEMENTARY

Split complementary color schemes are a way to capitalize on the power of complementary colors, but add a third color to your palette. For example, if we decided to choose green as our main color, we’d look across the color wheel for its complementary color, red. Then, look to the two colors directly beside it. Now, we have green, red-orange, and red-purple for a perfect split complementary color scheme. Unlike the straight- line contrast of complementary colors, the triadic scheme is shaped like an isosceles triangle.

18

ANALOGOUS

Similar to monochromatic color schemes, Analogous color combinations use three colors located beside one another on the color wheel. For example, selecting orange, yellow, and red, or green, blue, and purple. Analogous color schemes are as jarring as complementary schemes. RECTANGULAR/ TETRADIC A rectangle (a.k.a., tetradic) is a color combination made of four colors that CHROMOSTEREOPSIS are made up of two complementary While Chromostereopsis is not a traditional pairs. Like the name implies, the color Newton-based color contrasting strategy, scheme is in the shape of a rectangle. it worth noting its effect. When combining colors, be aware of Chromostereopsis, a visual illusion wherein one color may jump out while another color appears recessed. The result is most potent with combining red and blue, but can also happen with green and red. This effect can be utilized to emphasize or de-emphasize a design element, but keep in mind that this color combination will likely be tiring to read. 19

SQUARE

A square is similar to a rectangle palette, but the two sets of complementary pairs are colors evenly spaced around the circle. “...A VISUAL ILLUSION WHEREIN ONE COLOR

While Chromostereopsis is not a traditional MAY JUMP OUT WHILE Newton-based color contrasting strategy, it worth noting its effect. When combining colors, be aware of Chromostereopsis, a visual ANOTHER COLOR illusion wherein one color may jump out while another color appears recessed. The result is most potent with combining red and blue, but can also APPEARS RECESSED” happen with green and red. This effect can be utilized to emphasize or de-emphasize a design element, but keep in mind that this color combination will likely be tiring to read. 20

TRIADIC

A triadic (a.k.a., triangle or triad) is a color combination made of three colors that are evenly spaced around the color wheel. Unlike the straight-line contrast of complementary colors, the triadic scheme is shaped like an equilateral triangle.