Download - WMA TextInContext

Transcript
Page 1: WMA TextInContext

Text in Context

Tanya Symons BredehoftPrincipal: Artefact Design

Tuesday, October 30, 2012

Hi, I’m Tanya Bredehoft, principal of Artefact Design in Encinitas, CA —— We are an interpretive design group. —— One of our areas of expertise is exhibit design. —— Artefact plans and designs interpretive exhibitions and materials for museums, aquariums and zoos, nature centers, botanical gardens, and a host of other public venues. ∆

Page 2: WMA TextInContext

Text in ContextEasy on the Eyes

WMA ConferencePalm Springs, California • October 23, 2012

Tuesday, October 30, 2012

Today, I’ll introduce you to the visual aspects of text comprehension and walk you through our typical process for creating readable text. ∆

Page 3: WMA TextInContext

Tuesday, October 30, 2012

Let’s start with what we’re trying to accomplish... getting people to read your labels and panels. —— Paul talked about how the brain works —— now let’s illustrate the visual process of designing for the brain. —— Design, and in this context, text design, has a huge impact on how or why we read text. —— Attracting Attention ——To be noticed, your panels need to be saying, HEY LOOK AT ME — by creating visual interest ∆

Page 4: WMA TextInContext

Tuesday, October 30, 2012

To attract and sustain attention, your panels need to be laid out following good design practices. —— The typeface, size, and case must be appropriate to both the subject and the target audience. —— The contrast of the type color on the background, the spacing of the letters, and the length of lines of text all need to be optimized so the content is easy for the brain to process. ∆

Page 5: WMA TextInContext

Tuesday, October 30, 2012

With proper attention to the text design, the content will have a better chance of holding the viewer’s attention long enough for them to become engaged. ∆

Page 6: WMA TextInContext

Tuesday, October 30, 2012

—— ——

Page 7: WMA TextInContext

Tuesday, October 30, 2012

At every level, the relationship between the labels and the content, and the layout of both, must work together for an engaging experience. ∆

Page 8: WMA TextInContext

Keys to Success

Tuesday, October 30, 2012

——

Page 9: WMA TextInContext

Attracting Attention Through Visuals

Keys to Success

Tuesday, October 30, 2012

——

Page 10: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE

TYPE CASE

CONTRAST

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

—— So —— lets take a look at the important visual elements of text ∆

Page 11: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE - foundational choice

TYPE CASE

CONTRAST

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

The first step is selecting the typeface or typefaces. —— Form and function. They need to be attractive to the target audience, include enough variation for heads, bodies, and captions, and be easy for the brain to process. ∆

Page 12: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE - foundational choice

TYPE CASE - establishing a uniform standard

CONTRAST

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

This is about defining what chunks of type may be in all caps, which will be title caps, and which will use sentence capitalization. ∆

Page 13: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE - foundational choice

TYPE CASE - establishing a uniform standard

CONTRAST - is there enough?

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

This is about the selection of the color palette. —— Pretty, daring, or staid may be the stylistic choice. —— Regardless of the style intent, it is vital to evaluate the proposed combination of colors of type and background to insure the result is easy-to-process content.—— If there is going to be a problem with the contrast, it can, and should be, avoided very early in the process.∆

Page 14: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE - foundational choice

TYPE CASE - establishing a uniform standard

CONTRAST - is there enough?

LINE LENGTH - there is always a lot to say

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

Too many words is typically a problem rather than too few. It is the brain of the audience that needs to be accommodated. Long lines of text are more difficult to process than shorter lines.∆

Page 15: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE - foundational choice

TYPE CASE - establishing a uniform standard

CONTRAST - is there enough?

LINE LENGTH - there is always a lot to say

LETTER SPACING - room to groove

Keys to Success

Tuesday, October 30, 2012

Being too cramped or too loose makes things difficult to read. Both the vertical and horizontal space of letters, words, and lines must be addressed. ∆

Page 16: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE

TYPE CASE

CONTRAST

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

All design is an iterative process, but taking time to give proper attention to these keys at an early stage of a project will make it far easier to quickly achieve an engaging result. ∆

Page 17: WMA TextInContext

Typeface

Tuesday, October 30, 2012

A typeface is a family or group of related fonts which share the same design, varying only in weight, slant, character width, etc. ∆

Page 18: WMA TextInContext

Typeface

Sans Serif

Tuesday, October 30, 2012

The most basic category of faces is based on whether or not the letters have serifs. —— This is an example of a san serif face. —— Nothing but the basic stroke of the characters. ∆

Page 19: WMA TextInContext

Typeface

Serif

Tuesday, October 30, 2012

Here are some letters in a serifed font. Serifs are the details added to the ends of the strokes for legibility and/or decoration. ∆

Page 20: WMA TextInContext

Typeface

Sans Serif

Tuesday, October 30, 2012

Here are three san serif fonts. —— As you can see, each has qualities, such as the shape of the C or the E, which set them apart from each other. ∆

Page 21: WMA TextInContext

Typeface

Serif

Tuesday, October 30, 2012

Here are three serif fonts. —— As you can see, in addition to each having letter shape qualities which set them apart, each of these also has a different style of serif. ∆

Page 22: WMA TextInContext

Typeface

Sans Serif

Tuesday, October 30, 2012

Here are some familiar san serif fonts. —— Typically, san serif typefaces are good for headlines and small blocks of text. ∆

Page 23: WMA TextInContext

Typeface

Serif

Tuesday, October 30, 2012

Here are some familiar serif fonts. —— Typically, serif typefaces are good for use in larger blocks of text. While there are certainly exceptions, books, newspapers, and magazines are traditionally set using serif type. ∆

Page 24: WMA TextInContext

Typeface

Weights

Tuesday, October 30, 2012

Here are some familiar fonts in different weights. —— Selecting the proper weight for a specific purpose affects both the legibility of your text and the impact you are trying to achieve. —— Squint your eyes and you can see that weights at both ends of the extremes will require careful use to be effective.—— —— ∆

Page 25: WMA TextInContext

Typeface

Style - Italic

Tuesday, October 30, 2012

Here are the slanted fonts of some familiar typefaces. —— Typically in panel and label design, slanted fonts should be limited to foreign language words such as scientific names.—— You should definitely avoid using slated fonts in an attempt to emphasize the meaning of text. ∆

Page 26: WMA TextInContext

Style - Condensed

Typeface

Tuesday, October 30, 2012

Here are the condensed fonts of some familiar typefaces. —— Similar to working with font weights, condensed fonts should be carefully selected and used.—— You should avoid using condensed or compressed fonts to accommodate an overly-wordy chunk of text on a small label. ∆

Page 27: WMA TextInContext

Type Case

Tuesday, October 30, 2012

Most typefaces that are appropriate for panel and label design have both upper and lower case characters. ∆

Page 28: WMA TextInContext

Type Case

Uppercase Title

Tuesday, October 30, 2012

Title and headings can be effective when set in all upper case letters. ∆

Page 29: WMA TextInContext

Type Case

Lowercase Title

Tuesday, October 30, 2012

Title and headings can also be effective when set in what is referred to as lower case title. —— Typically the first letter of every word, except prepositions and conjunctions, are capitalized. ∆

Page 30: WMA TextInContext

Type Case

Uppercase Body Copy

Tuesday, October 30, 2012

—— Pretty much all I have to say about using all caps for body text is ∆

Page 31: WMA TextInContext

Type Case

Uppercase Body Copy

Tuesday, October 30, 2012

Don’t do it.

Page 32: WMA TextInContext

Type Case

A Good Example

Tuesday, October 30, 2012

Here is some effectively set text. —— The title is Frutiger Bold set in 60 point lowercase title, left aligned. The body is Garamond Regular set in 36 point, sentence text, left aligned with ragged right. ---- The peaks and valleys of the upper and lower case letter forms carry the eye along the lines of text. ∆

Page 33: WMA TextInContext

Type Size

Tuesday, October 30, 2012

——

Page 34: WMA TextInContext

Type Size

Type Heights

Tuesday, October 30, 2012

How tall should the type be in which block of text. ∆

Page 35: WMA TextInContext

Type Size

Type Heights

Tuesday, October 30, 2012

This is a rough guide for appropriate type sizes for a few typical viewing distances —— It is always a good idea to mock up a few sign types to view in the wild before committing to any final determination of type. ∆

Page 36: WMA TextInContext

Type Size

Type Hierarchy

Tuesday, October 30, 2012

This slide shows a mockup of a sign type for testing out in the wild. —— When planning your design, it’s important to work out how you’re going to identify hierarchy and structure. How big or how bold should the title/headline be? What about sub-headings, body copy or figure captions? —— Remember that using different typefaces can help you create distinctions between different text levels. You can combine different typefaces to create both classical and contemporary layouts. —— Avoid using too many typefaces. ——Creating a logical hierarchy in your designs will make them easier to scan and read. ——∆

Page 37: WMA TextInContext

Type Contrast

Tuesday, October 30, 2012

——

Page 38: WMA TextInContext

Type Contrast

Type and Background Color

Tuesday, October 30, 2012

Always take care to provide enough contrast between type and the background color or image for legibility. Differences between foreground and background colors on labels or panels should be exaggerated. —— Characters and symbols should contrast with their background, either dark characters on a light background or light characters on a dark background. A minimum of 70% contrast is recommended. Always check that your colors provide adequate contrast when viewed by those who may be color blind. ∆

Page 39: WMA TextInContext

Type Contrast

Type and Background Color

Tuesday, October 30, 2012

Placing text over images or patterns forces readers’ eyes to constantly adjust to varying contrasts. Use screens or place text over solid background with 70% contrast to text. ——

Avoid using red and green against each other as text and background, as persons with red-green color deficiencies (the most common color deficiency) are not able to easily distinguish between the two. ∆

Page 40: WMA TextInContext

Type Contrast

Reverse Type

Tuesday, October 30, 2012

Reverse type is light colored type on a darker background. —— It is very popular, but using it requires careful design or the results will be extremely hard to read. —— Regardless of mastery of the techniques, you should use reverse type sparingly. ∆

Page 41: WMA TextInContext

Line Length

Tuesday, October 30, 2012

——

Page 42: WMA TextInContext

Line Length

Make it Easy to Read

Tuesday, October 30, 2012

It's all about making it easy to read —— Since you only have a few seconds to engage the reader, using appropriate lengths for lines of text makes it easy for them to get there. ∆

Page 43: WMA TextInContext

Line Length

Word Count

Tuesday, October 30, 2012

To a reader’s eye, too long or too of short lines can be distracting and exhausting. —— Maintaining a line length between 45 and 60 characters is optimal, or sentences of about 18 words.----- Margins flush left and ragged right is optimal. This alignment complements the natural way we read text in western culture. When done correctly, it is one of the biggest factors in improved readability. ∆

Page 44: WMA TextInContext

Line Length

Alignment

Tuesday, October 30, 2012

While text with fully justified alignment looks really neat and tidy, it can be harder to read because there are less visual cues for the reader to easily tell the difference between the termination of a line of text and the end of a sentence. The varied spacing which can appear between words in order to keep the right edge of the lines of text aligned also hampers quick reading comprehension. ∆

Page 45: WMA TextInContext

Line Length

Columns

Tuesday, October 30, 2012

The intent of this slide is not for you to read the text. Squint your eyes and see the clear difference between the upper and lower chunks of the example text. —— When columns of text are used, the gutter, the space between columns, must be wide enough so viewers do not mistakenly read across columns. ∆

Page 46: WMA TextInContext

Line Length

Widows and Orphans

Tuesday, October 30, 2012

These definitions are from The Chicago Manual of Style ——

WidowA paragraph-ENDING line that falls at the beginning of the following page/column, thus separated from the rest of the text.——OrphanA paragraph-OPENING line that appears by itself at the bottom of a page/column.OR a word, part of a word, or very short line that appears by itself at the end of a paragraph. Orphans result in too much white space between paragraphs or at the bottom of a page. ∆

Page 47: WMA TextInContext

Line Length

Widows and Orphans

Tuesday, October 30, 2012

So, here we have two orphans and a widow. —— Knowing which is an orphan and which is a widow is far less important than knowing not to leave a single word by its self on a line of text or to have only the first few words of a sentence alone at either the beginning or end of a column or page separated from the remainder of the sentence in the other column or page. ∆

Page 48: WMA TextInContext

Line Length

Natural Breaks

Tuesday, October 30, 2012

When possible, structure line breaks to reflect natural language pauses or phrases. Keep hyphenated words together, and be vigilant against over-hyphenation of multi-syllable words. Keep $, numbers and related items together. ∆

Page 49: WMA TextInContext

Letter Spacing

Tuesday, October 30, 2012

For the sake of this discussion, letter spacing is a general term for both the vertical and horizontal spacing of letters, words, and lines. ∆

Page 50: WMA TextInContext

Letter Spacing

Leading

Tuesday, October 30, 2012

Leading is the space between the lines of type in a body of copy. Leading plays a big role in readability. Correctly spaced lines make it easier for a reader to follow the type and improves the overall appearance of the text. Leading also alters typographic color, which is the density or tone of a composition. —— ∆

Page 51: WMA TextInContext

Letter Spacing

Leading

Tuesday, October 30, 2012

The more words you have in a line, the more leading you will need to maintain a pleasurable reading experience. If you increase word-spacing (the space between each word), you’ll have to increase leading to improve the readability of the text block.

Optimal leading is about 150–170% of the text height. Increasing leading can reduce the pace of a piece of text; it can slow the reader by introducing more white space. Too much leading can cause continuity problems, as the eyes of the reader are required to travel a greater distance between lines of text. ∆

Page 52: WMA TextInContext

Letter Spacing

Tracking

Tuesday, October 30, 2012

Tracking is the amount of space between each character in a group of characters. ——Tracking can be described as being loose or tight. Loosely tracked text has more space between each character. In tightly tracked text there is less space between the characters. ——Tracking has similar guidelines as leading, and all of these best practices are tied to readability. —— ∆

Page 53: WMA TextInContext

Letter Spacing

Kerning

Tuesday, October 30, 2012

Kerning describes the amount of space between two characters. —— There is often confusion between tracking and kerning. Tracking affects the space between all of the characters in a group of characters. Kerning is the amount of space between two specific characters. ——

Kerning is the art of adjusting the space between characters so that the eye can flow easily across the copy without being distracted by discrepancies. Remember: good typography is never noticed. ∆

Page 54: WMA TextInContext

Attracting Attention Through Visuals

TYPEFACE

TYPE CASE

CONTRAST

LINE LENGTH

LETTER SPACING

Keys to Success

Tuesday, October 30, 2012

When you have successfully addressed all of these keys, the next step is to create this —— ∆

Page 55: WMA TextInContext

Type Style Guide

Tuesday, October 30, 2012

a type style guide. This document is a record of all of the type and color choices made for every text element of the project. This tool will be a valuable asset to everyone on your team. ————∆

Page 56: WMA TextInContext

Tuesday, October 30, 2012

—— ——

Page 57: WMA TextInContext

Tuesday, October 30, 2012

Some of the typography rules I’ve discussed may seem rigid, but they've been proven over time. —— Study them and develop an understanding of why they work. —— What we have covered are good starting points. —— Exhibit labels, a web page, electronic IDs, and banners will all have their own unique objectives and considerations.—— External influences, such as the surrounding environmental design, identity guidelines, and client approval, WILL alter how you approach the type, as well. — Above all, if you design what will be easy for the visitor to read, you will have done a good job——∆

Page 58: WMA TextInContext

Thank You!

“To design is much more than simply to assemble,

to order, or even to edit; it is to add value and

meaning, to clarify, to modify, to dignify, to

dramatize, to persuade, and perhaps to amuse.

To design is to transform prose into poetry.”

~ Paul Rand

Tuesday, October 30, 2012

Thank you for your time and attention. —— Hopefully you’ve learned something interesting that will help you create more readable text.


Top Related