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 problemocclusion problem

interference probleminterference 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 textscrolling text

“wall to wall 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”“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 easilyshorter 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

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.

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).

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: G

reg Kearsley

Traditional faces are designed to minimize the effort required to discriminate each letterform.

readability: typeface

TIP

Database: G

reg 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.

Text is lined up on the left and “ragged” on the right.

TIP

Database: G

reg Kearsley

“Ragged-right” is easier to scan than fully justified text.

readability: justification

Text is lined up on both the left and the right.

Text is lined up on both the left and the right.

TIP

Database: G

reg 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.

“Holes” and “rivers” appear in fully justified text set into small columns.

TIP

Database: G

reg 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: G

reg Kearsley

Times New Roman Times New Roman

Garamond 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: G

reg Kearsley

Times New Roman set at 10 points

Times New Roman set at 10 points

Times New Roman set at 12 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.

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.

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.

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.

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.”

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.

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.

“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.

“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.

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