THE LEGIBILITY OF TYPE by: Linda Reynolds What makes type legible? What makes type legible? What makes type legible? What makes type legible?

This is a modified version of Linda Reynolds’ What makes type legible? original work, “The Legibility of Type.” What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible?

Project Start Date 09-02-20 • Designer Jake Riedel • Class VCD III • Graduating Year 2022 • Professor Ma tt Lemmond

Cover LEG I - BILITY What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible? What makes type legible?

2 What makes type legible? This often dismissed 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.

It has never been difficult to find examples of illegibility of various kinds. Still, examples abound now that systems have brought electronic within reachw of those with little or no knowledge of fundamental design principles. Legibility as an issue is perhaps more crit- ical than ever before. Some of the most important factors affecting it are outlined in the document.

3 CHOICE OF TYPE For good legibility, a should have the following characteristics:

4 A relatively large x-height in relation to the capital letter height; this will make the 1 lowercase letters easier to discriminate.

Textx-height Large, open counters and a relatively generous set width; this will help prevent letters 2 from filling in and running together. 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.

P P Set width Not too much variation between thick and thin strokes; delicate thin strokes may 3 disappear if the image is photographically reproduced during reproduction.

Low High P variation P variation

5 These criteria are Aa satisfied by several Sans , both Serif Aa Serif and Sans Serif.

Sans serif faces, however, are considered by some to be 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.

6 The German school of Gestalt psychologists

described several principles by which we try to group Some sans serif faces may also areas of the retinal image that are likely to be part of the cause problems if it is essential that... 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 the roman numeral I suggests that serifs may indeed help adjacent letters be grouped as words, and words to be grouped into lines. the lower-case It is also argued that seriffed letter shapes have more l individuality and are therefore more distinguishable and the upper-case than sans serif letters. Interestingly, lowercase letters’ I 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. should be uniquely identifiable.

7 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

8 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. 9 VARIA- TIONS IN LETTER FORM

10 Capitals TEXT SET IN ALL-CAPITAL LETTERING IS LESS LEGIBLE ANY WORD IN THAN TEXT SET IN LOWERCASE LETTERS WITH CAPI- TALS WHERE APPROPRIATE. ALL CAPITALS HAS

Lowercase letters, with their ascenders and , A RECTANGULAR SHAPE create more distinctive word outlines than capital letters.

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. Bold Type Bold type is, of course, invaluable for emphasis, but it is likely to reduce legibility when used for continuous text. emphasis sit amet.

The dense black type tends to create after-images, notice- Lorem ipsum emphasis sit amet. able as bright glowing areas between the lines.

11 Condensed and Extended Type

The danger with condensed styles is that the letters Condensed Condensed Condensed Condensed Condensed Condensed will either apparently or actually fill in and run together. Extended Extended Extended Extended Condensed Condensed Condensed Condensed Condensed Condensed The standard of reproduction needs to be high Extended Extended Extended Extended to ensure good legibility. Condensed Condensed Condensed Condensed Condensed Condensed Extended Extended Extended Extended Extended styles reduce the number of Condensed Condensed Condensed Condensed Condensed Condensed words that can be read at each fixation. Extended Extended Extended Extended Normal letter proportions can be distorted very Condensed Condensed Condensed Condensed Condensed Condensed easily in electronic typesetting systems, with Extended Extended Extended Extended predictably illegible results in many cases. Condensed Condensed Condensed Condensed Condensed Condensed

12 Italics Italics are less legible than roman letters for continuous text because the italic letters are less distinguishable from one Fake Italics Fake Italics another. We are also less used to them. Real Italics Real obliques With electronically generated type, so-called ‘italics’ may, in fact, be a slanted version of the roman letters, rather than a separately designed . Some of these ‘obliques’ are likely to have reduced legibility. Type Size

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

13 TYPE ON THE PAGE

14 Letter Spacing The space between letters must be sufficient to separate them clearly. If they touch or appear to connect, legibility will be severely reduced. Where condensed sans serif faces are set tightly spaced, it is common to find letters that have fused to form a different but legitimate word with a meaning quite different from that intended. If letter spacing is too great, the words’ outline will be diluted and more challenging to recognize. Line Spacing For ease of reading, words must be grouped into lines that the eyes can follow easily. Therefore, the space between lines must be greater than the word spacing. For continuous text, it is almost always an advantage to set the one or two points greater than the type’s size. Leading like this is especially true for typefaces with a strong vertical emphasis (this would include most sans serifs and modern seriffed faces), and for faces with a rela- tively large x-height. However, if too much space is added, the lines will appear to drift apart, and the text will appear lighter in color.

15 Word Gestalt Of course, the space between words must be perceptibly more significant than the space between letters within a word. The Gestalt principle of grouping by ‘proximity’ is at work here. However, the spacing must not be so great that the horizontal emphasis or ‘good continuation’ of the line is

destroyed. Therefore, optimum word spacing will Gestalt depend on both letter spacing and line spacing. Gestalt Gestalt

16 is a significant factor in legibil- ity. If the lines Line Length are too short, we cannot make efficient use of our periph- eral vision, Line Length and the typi- cal pattern of eye movements is disrupted. Line Length If the lines are too long, it is difficult for the eyes to make a smooth and accurate ‘backsweep’ to each new line’s beginning. When ‘backsweeping,’ we may miss lines or begin re-reading a line, known as ‘doubling.’

The optimum line length for continuous reading is between about 60-65 characters and spaces. Lines of more than 70 characters and spaces will reduce legibility and may be consciously perceived as challenging to read. The minimum line length for comfort is probably about 40 characters and spaces.

17 Justified and Unjustified

Researchers have been unable to show any signifi- cant difference in the legibility of justified and unjus- Setting tified setting for moderate line lengths. However, there is evidence that less-skilled readers have difficulty with justified setting in very short lines Text Frame because of the uneven word spacing and frequent hyphenation. Unjustified setting gives constant Allign Left (Unjustified) word spacing, thereby avoiding the vertical white Justify All Lines ‘rivers’ so often seen in justified text. As well as being aesthetically displeasing, rivers destroy the ‘good continuation’ of the lines, thus making them more Rivers challenging to follow. Therefore, successful justifi- cation requires a line length of 60 or so characters and spaces, a good hyphenation program, and the facility to make fine adjustments in word spacing.

18 TYPE AND ITS BACK- GROUND

19 White text 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 open counters to counteract this optical phenomenon, and the letters should not be too tightly spaced. Sans serif faces gener- ally withstand reversal better than seriffed faces. There are no fine serifs or thin strokes to be lost if the image is thinned-down, and no serifs to fuse if it becomes thickened.

20 text White 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 open counters to counteract this optical phenomenon, and the letters should not be too tightly spaced. Sans serif faces gener- ally withstand reversal better than seriffed faces. There are no fine serifs or thin strokes to be lost if the image is thinned-down, and no serifs to fuse if it becomes thickened.

21 Half Tone Pattern

When placing text over a halftone background (also known as 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 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.

Legible Illegible

22 Contrast Contrast Contrast

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

60% Black 50% Black 45% Black 40% Black

35% Black 30% Black 25% Black 20% Black

15% Black 10% Black 05% Black 00% Black

23 COLOR COLOR COLOR

24 Newton's color wheel

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

Red Blue Yellow Orange Green Violet Primary colors Secondary colors

Blue Blue Yellow Yellow Red Red Violet Green Green Orange Orange Violet Tertiary colors

25 Color

Monochromatic Analogous

A monochromatic color scheme is Similar to monochromatic color often more subtle and perhaps even schemes, Analogous color peaceful due to a lack of hue contrast. combinations use three colors Monochromatic color schemes are located beside one another derived from a single base hue and on the color wheel. Analogous extended using its tint, tone, or shade. color schemes are as jarring as complementary schemes.

• Tint = pure hue + white • Tone = pure hue + grey • Shade = pure hue + black

26 Complementary Triadic

Complementary colors maximize contrast A triadic (a.k.a., triangle or triad) and provide a kind of visual tension is a color combination made because they are opposed to each other. of three colors that are evenly There are six complementary color options: spaced around the color wheel. Unlike the straight-line contrast of complementary colors, • Blue and Orange the triadic scheme is shaped • Yellow and Purple like an equilateral triangle. • Red and Green • Yellow-Orange and Blue-Purple • Yellow-Green and Red-Purple • Blue-Green and Red-Orange

Square Tetradic

A square is similar to a tetradic palette, but A tetradic (a.k.a., rectangular) is the two sets of complementary pairs are a color combination made of four colors evenly spaced around the circle. colors that are made up of two complementary pairs. Like the name implies, the color scheme is in the shape of a rectangle.

27 Chromostereopsis

While Chromostereopsis is not a traditional Newton- based color contrasting strategy, 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.

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. Unlike the straight-line contrast of complementary colors, the triadic scheme is shaped like an isosceles triangle.

28 CHROMOSTEREOPSIS

CHROMOSTEREOPSIS

29 NOTES Title The Legibility of Type, Author Linda Reynolds, Disclaimer This is a modified version of Linda Reynolds’ original work, “The Legibility of Type.” Introduction What makes type legible? This often dismissed 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. It has never been difficult to find examples of illegibility of various kinds. Still, examples abound now that desktop publishing systems have brought electronic typesetting within reach of those with little or no knowledge of fundamental design principles. Legibility as an issue is perhaps more critical than ever before. Some of the most important factors affecting it are outlined in the document. Choice of Type For good legibility, a typeface should have the following characteristics: A relatively large x-height in relation to the capital letter height; this will make the lowercase letters easier to discriminate. Large, open counters and a relatively generous set width; this will help prevent letters from filling in and running together. 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. 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 faces, however, are considered by some to be 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 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. 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. Variatons in Letter Form 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. Bold type is, of course, invaluable for emphasis, but 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. 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 ‘italics’ may, in fact, be a slanted version of the roman letters, rather than a separately designed font. Some of these ‘obliques’ are likely to have reduced legibility. 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 systems, with predictably illegible results in many cases. 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 The space between letters must be sufficient to separate them clearly. If they touch or appear to connect, legibility will be severely reduced. Where condensed sans serif faces are set tightly spaced, it is common to find letters that have fused to form a different but legitimate word with a meaning quite different from that intended. If letterDesign spacing is too great, the words’ outline will be diluted and more challenging to recognize. Of course, the space between wordsby: must be perceptibly more significant than the space between letters within a word. The Gestalt principle of grouping by ‘proximity’ is at work here. However, the 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. For ease of reading, words must be grouped into lines that the eyes can follow easily. Therefore, the space between lines must be greater than the word spacing. For continuous text, it is almost always an advantagwe to set the leading one or two points greater than the type’s point size. Leading like this is especially true for typefaces with a strong vertical emphasis (this would include most sans serifs and modern seriffed faces), and for faces with a relatively large x-height. However, if too much space is added, the lines will appear to drift apart, and the text will appear lighter in color. Line length is a significant factor in legibility. If the lines are too short, we cannot make efficient use of our peripheral vision, and the typical pattern of eye movements is disrupted. If the lines are too long, it is difficult for the eyes to make a smooth and accurate ‘backsweep’ to each new line’s beginning. When ‘backsweeping,’ we may miss lines or begin re-reading a line, known as ‘doubling.’ The optimum line length for continuous reading is between about 60-65 characters and spaces. Lines of more than 70 characters and spaces will reduce legibility and may be consciously perceived as challenging to read. The minimum line length for comfort is probably about 40 characters and spaces. 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 frequent hyphenation. Unjustified setting gives constant word spacing, thereby avoiding the vertical white ‘rivers’ so often seen in justified text. As well as being aesthetically displeasing, rivers destroy the ‘good continuation’ of the lines, thus making them more challenging to follow. Therefore, successful justification requires a line length of 60 or so characters and spaces, a good hyphenation program, and the facility to make fine adjustments in word spacing.Type and Its 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 open counters to counteract this optical phenomenon, and the letters should not be too tightly spaced. Sans serif faces generally withstand reversal better than seriffed faces. There are no fine serifs or thin strokes to be lost if the image is thinned-down, and no serifs to fuse if it becomes thickened. When placing text over a halftone background (also known as 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 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. 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. Color There are several ways to build a color paletteJake with contrasting colors using Newton’s color wheel. There are three sections Riedel to the color wheel: Primary: Blue, Yellow, and Red, Secondary: Orange, Green, and Purple (a.k.a Violet), Tertiary: Blue-Purple, Blue-Green, Yellow-Green, Yellow-Orange, Red-Orange, and Red-Purple. A monochromatic color scheme is often more subtle and perhaps even peaceful due to a lack of hue contrast. Monochromatic color schemes are derived from a single base hue and extended using its tint, tone, or shade. Tint = pure hue + white. Tone = pure hue + grey. Shade = pure hue + black. 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. 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. 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. 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. A rectangle (a.k.a., tetradic) is a color combination made of four colors that are made up of two complementary pairs. Like the name implies, the color scheme is in the shape of a rectangle. A square is similar to a rectangle palette, but the two sets of complementary pairs are colors evenly spaced around the circle. While Chromostereopsis is not a traditional Newton-based color contrasting strategy, 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.