Typography and Imagery in Design

Presented by Ashley Reeder

Typography in Design

People’s perception and understanding of print depends upon how it is presented. The goal is to:

 • engage an audience• create visual appeal• communicate a clear message

Step 1: HierarchyThe designer must determine the most important component and bring it to the forefront of a design.

 Hierarchy Techniques:• size/scale• color• negative space

Step 2: BalanceBalance is the distribution of type and other design elements. There are two types:

 • symmetrical• a sy mm etrical

Step 3: Proportion

It helps to determine proportion by aligning a design within a grid. A grid helps to maintain:

• clarity• legibility• balance• unity

Proportion and Type Alignments

There are several variations of type alignments, including:

• flush left/ragged right• flush right/ragged left

• justified• centered

Step 4: ShapeTypography can also serve as shapes in a design

Step 5: TextureType can lend texture to a composition depending upon the:

• weight• negative space

• line of type• l e t t e r s p a c i n g• layering

Categorizing TypefacesType falls into two basic categories:

 • text• display - Text typefaces are used when legibility is an issue,

especially with small print and a lot of text. 

- Display typefaces are used when projecting a mood or attitude. These are typical of names, logos, titles, headlines and other short passages.

Typeface ClassificationsType also falls into two additional classifications:

 • Serif• Sans Serif 

-Serif type includes a short, extra stroke on the letter while Sans Serif does not.

Typographic Terms• Character: individual letters, numbers,

and punctuation.

• Letterform: style and form of each individual letter in an alphabet.

• Typeface: design of a single set of letters, numbers or punctuation marked by consistent properties. Identified by name.

Typographic Terms• Type Family: a range of style based on a single

typeface.

• Type Font: a complete set of letters, numbers and punctuation that allow for typesetting by keystroke.

• Type Style: modifications in a type that create design variety while maintaining the character of the typeface. Includes weight, width or angle.

Typographic Terms• Uppercase: capital or larger letters of a

type font.

• Line Length: the horizontal length of a line of type, typically measured in picas or inches.

• Point Size: a unit for measuring the height of type and distance between lines of type.

Imagery in DesignImagery in design accomplishes the

following: • arouses curiosity• grabs a viewers attention• results in an emotional response

Types of Imagery-Photography

Photographs are the most credible type of imagery because they are perceived as real.

 

Photography Uses in Design • informative content is key, such as

journalism or news channels• accuracy or recognition is

important• advertising is the medium

Photographic Design Tips• work the design around the

photograph• crop to the best part of the photo• do not try to enlarge a small scale

photo• photographs with strong

emotional or aesthetic appeal deserve prominence

Types of Imagery-Illustration• Illustrations are appropriate

when an emotion needs to be enhanced.

• Illustrations can help to represent somethingthat cannot be seen or to convey a complex idea.

Sources for Imagery• royalty free collections• stock agencies• commissioned• fonts• found imagery

Image Terminology

Press houses and scanning manufacturers have their own terminology. Some of these buzz words include:

• continuous tone• grayscale• halftone• line art

Symbols and Logos• Symbols and logos are illustrations

stripped down to their simplest forms.

Simple Image Terms• Ideogram/Ideograph-an image that

represents an idea.

• Logo-represents a product, brand, company or group.

 • Logotype-letters, words or a name

representing a product, brand, company or group.

Simple Image Terms• Mark-a symbol used to represent a

product, brand, company or group. • Pictogram/Pictograph-an image

that conveys an object or activity.

• Symbol-letter or sign representing an activity, idea or object.

Informational Imagery• This imagery informs people when a

universal understanding is required and words cannot suffice.

• Good examples of informational imagery are maps and signage.

Charts and Graphs  Charts and graphs are another form of informational

imagery. They accomplish the following:

• convey statistics• engage a viewer’s attention• compare data

The most common are:• pie charts• bar charts• graphs

Design ChallengesThe greatest challenge in design is limiting your options. Four main restrictions help do so:

• the reproduction process• the client specifications• the budget• the deadline

Choose A LookCommunicating a feeling, idea or message takes a specific “look” depending upon the content. This could include:

• a generic look• a corporate look• a visual-wow look• an info-heavy look• an omnibus look• a typographic look• a trendy look

Creating Visual ImpactVisual impact is achieved through the

following elements:• size• color• the unexpected• visual puns• unconventional

BibliographyThe Elements of Design 2nd edition, Poppy Evans and Mark A. Thomas

Robin Williams Design Workshop 2nd edition, Robin Williams and John Tollett.