Typography

Text needs to be visible, legible and readable. Typography

Can the people who need to read this text actually see it? visible size problem contrast problem

visible size problems size problems occlusion problem interference problem

If they can see it, can they make out the letterforms? legible indistinct character shapes letter spacing problem

If they can see it, can they make out the letterforms? legible Low contrast and interference from the background reduce the legibility of text

If they can see it, can they make out the letterforms? legible The state labels are visible, but some of the letterforms are broken up and not easily legible.

If they can see it, can they make out the letterforms? legible

If they can see it and make out the letterforms, is the text easy to read? readability scrolling text “wall to wall text”

We have trouble with long lines of text because we get lost “scanning” back to the beginning of each line. readability: line length “wall to wall text”

Although lines of text can become too short, lines that are between 2/3 and 1/3 of a standard page width are easier to read than are longer lines. readability: line length shorter lines of text scan easily

Lower case letters are easier to read than uppercase. Lower case make a more distinctive gestalt shape (contour) in words than upper case letters do. readability: letterforms distinctive word contour

Display type and italic type are harder to read than the common “book” faces, either serif or sans-serif. readability: typeface Use display face for short titles or labels.

Display type and italic type are harder to read than the common “book” faces, either serif or sans-serif. readability: typeface Use book faces for continuous text (blocks).

Display faces may be readable for individual words and short titles, but fall apart in long passages. readability: typeface TIP Database: Greg Kearsley

Traditional faces are designed to minimize the effort required to discriminate each letterform. readability: typeface TIP Database: Greg Kearsley

“Ragged-right” is easier to scan than fully justified text. readability: justification Text is lined up on the left and “ragged” on the right. TIP Database: Greg Kearsley

“Ragged-right” is easier to scan than fully justified text. readability: justification Text is lined up on both the left and the right. TIP Database: Greg Kearsley

“Ragged-right” is also easier to set into shorter lines for readability. Justified text pulls apart and creates gaps that the reader’s eye has to scan across. readability: justification “Holes” and “rivers” appear in fully justified text set into small columns. TIP Database: Greg Kearsley

Typography

Text is one of the visual components in a display. Typography

Text is one of the visual components in a display. Typography Although the content of text is important, designers must also consider the visual role that text plays in balance, dominance and “color” (gray value) of a display.

Text has gray value. Some typefaces are heavier than others, and therefore their gray value is darker. text as visuals TIP Database: Greg Kearsley Times New Roman Garamond

On the computer screen, two different point sizes of the same typeface frequently have different weight. You may mean to change only the size of the type and discover that you have changed its gray value too. Text may also appear bold, signaling an unintended meaning to your readers. text as visuals TIP Database: Greg Kearsley Times New Roman set at 10 points Times New Roman set at 12 points

The gray value of this text is moderate – it does not feel heavy or dominate the rest of the display more than it should. text as visuals

However, although it balances the visual on the right, the text cannot completely anchor the bright blue box in the lower right. text as visuals

When one component of a display is too dominant, each other component has to escalate in order to shout down the rest. You can make text “shout” with various treatments … typeface selection, point size, boldness, italics, and color. text as visuals Size and color alone can make a display virtually scream.

When one component of a display is too dominant, each other component has to escalate in order to shout down the rest. You can make text “shout” with various treatments … typeface selection, point size, boldness, italics, and color. text as visuals Here color is integrated, but size and boldness and italics run rampant.

Sometimes designers add too many treatments in a sincere attempt to satisfy different functional requirements – each treatments is supposed to mean something different. text as visuals

Treatment problems and dominance problems compound each other … the background is so dominant and the text is so small that the designer is forced to resort color and italics. text as visuals The functional requirement for indicating links complicates this designer’s problem … underlining is the only option, and that adds more noise to the display.

You can use multiple text treatments if you reduce the dominance of the “basic” treatment and background so that others do not have to become too loud in contrast. text as visuals

Typefaces convey affective meaning through metaphor and through common use. text as visuals Unadorned san-serif typeface tends to give a scientific or utilitarian feeling to a display.

Typefaces convey affective meaning through metaphor and through common use. text as visuals Embellished script faces convey ceremony, romance and “special occasion.”

Typefaces convey affective meaning through metaphor and through common use. text as visuals Traditional, serif typeface evokes serious, upscale connections to news and book publishing.

Super clean and “cool” color scheme may mean high-end design … text as visuals “modern” typeface invokes European design tradition.

… or hospital. text as visuals “warm” tones and human images relieve the antiseptic blue/white minimalist design while retaining the feeling of cleanliness, competence and scientific know-how.

Redesign the text below (link to original) using fewer treatments for the same meanings. Use Dreamweaver or a web authoring tool & print out the result.link to original activity

Alternatives to applying treatment to type: –Use spatial arrangements – columns, tables & horizontal division of text by white space –Use a different size or weight of the same face in preference to color, boldness or italics –Reduce dominance of the base type so that other treatments can be “lighter” and still make a difference activity

Typography