& logo d e s i g n typography. part 1 review of the basics

&LOGOD E S I G N

typography

PART 1Review of The Basics

Font Families

SA

NS

SER

IF

OLD

STYLE

Contrast or Conflict?o CONTRAST: Type that contrasts must contrast

dramatically.o CONFLICT: Type that conflicts is too similar (not good).

AVOID

5 Principles Designers Know

o Words carry emotional impact.o Letter forms carry emotional

impact.o The shape and design of a font

impacts how we use the typeface.o Social connotations are connected

to letter forms and typography.o Social contexts affect the way type

is used and understood.

Leading, Tracking, Kerning

Illustrator Photoshop

Leading

Leading is the space between baselines of type.Here’s how the term originated (to help you remember):In the olden days, lead had to be added toincrease the vertical space when laying out type.This is normal leading for this size and family of font.Sans serif type usually needs a little wider leadingto be legible than serif type does.

This is wide leading, used for dramatic effect.

Short blocks of text can have increased leading

Like this. Often wide leading Is found in text

that sits on top of color blocks..

Illustrator: Leading Photoshop: Leading

Tracking

T r a c k I n g I s t h e c o n s I s t e n t s p a c I n g

b e t w e e n l e t t e r s t h r o u g h o u t l I n e s o f t y p e.

T h I s i s a n e x a m p l e o f i n c r e a s e d t r a c k I n g .

This is normal tracking. When you loosen your tracking, its also a good idea to increase leading.

Illustrator: Tracking Photoshop: Tracking

Kerning

Kerning is the space between letter pairs.All type 20 points or higher needs to be hand kerned.

To adjust kerning in an Adobe program, place cursor between letters,use left hand to hold down Shift + Alt (PC) and use right hand to tap left arrow key.Tight kerning is preferred to loose kerning, generally.

Difference Between Tracking and Kerning

Kerning is space between letter pairs that has to beadjusted to correct optical illusions of space (see below).

Tracking is space between all letters in a line of type.It can be increased or decreased for dramatic effect (see above).

Questions Designers Always Ask

o What font and why?o What point size and why?o What color and why?o What size leading, tracking,

kerning and why?

PART 2Logo Design

Type Design Relies on:

o Type Contrast (create BIG differences in size, weight, and/or structure)

o Bold, crisp graphics (in vector)

What is a logo?

What is a logo?

o A logo is a graphic representation of a company name, trademark, abbreviation, etc., often uniquely designed for ready recognition.

A logo can be type onlyOR type plus another graphic symbol.

Logos are “sacred ground.”

Be careful what you communicate . . . accidentally.

The SLAMR Formula

SimpleLegibleAppropriateMemorableReproducible (and Reducible)

Simple

o The most recognized logos in the world are very simple.

Common Techniques for Simplicity

Type Only – type as graphic shapes (“letter forms”)

Common Techniques for Simplicity

Abstraction – stays graphically bold

Common Techniques for Simplicity

Illustration – less common, more complex, but still graphically bold

Common Techniques for SimplicityWhen full illustrations are used, they’re usually used as an option—

sometimes the type alone is used, so it must be able to stand alone.

Legible

o Must be readable if reduced to ¼ “

o PROBLEM EXAMPLE.Problem with logos that have large images and relatively small type is that they’re not legible when reduced.

Appropriate

Their more current logo

Memorableo Simple logos must still be memorable -

unique

o In this case, the type has been altered uniquely.

Reproducible

Must be reproducible in black and white.- Logo on the left turns to muddy grays.- Logo on right stays strong.

Or create a B&W version as well

Final Concepts

Unity: Letter Forms are like Puzzle Pieces

This type fits together well with an extended “g.”

But it does not reproduce well in black and white.

Type Elements Are Always Puzzle Pieces

Kerning, Leading, Tracking

Red and blue next to each other creates painful vibration on the eye.

Solution: Separate them with white.

What’s wrong with this logo?

What’s wrong with this logo?

- Red and blue next to each other- Simple? No- Legible? No- Appropriate? Maybe- Memorable? No- Reproducible in black and white? No

Muddy BW Reproduction

What’s wrong with these?

Instituto de Estudos Orientais

QUESTIONS?

© 2007 Juliet Davis