typographic basics

27
Typographical

Upload: mauddawg

Post on 01-Jul-2015

1.366 views

Category:

Technology


2 download

DESCRIPTION

Based on Design for the Non Designer by Robin Williams

TRANSCRIPT

Page 1: Typographic basics

Typographical

Page 2: Typographic basics

Font features

TypographyCap Height Ascenders

DescendersBaseline

X-Height

Page 3: Typographic basics

Character parts

Typ-o-graf-e

Axis Ear Hook Bar

Counter Terminal

Serif

Page 4: Typographic basics

Letter form

Hxg Hxg Hxg HxgAriel Times NR Geo Slab Hattenschweiler

Page 5: Typographic basics

Kerning

Inter-character spacing

Time Unkerned type

Time Kerned type TNT

Page 6: Typographic basics

Tracking

Page 7: Typographic basics

Leading (Line spacing)

Leading refers to the space between lines. It can be tightened or expanded as needed to fill space. (1)

Leading refers to the space

between lines. It can be

tightened or expanded as

needed to fill space. (1.4)

Leading refers to the space

between lines. It can be

tightened or expanded as

needed to fill space. (1.25)

Leading refers to the space between lines. It can be tightened or expanded as needed to fill space. (.8)

Page 8: Typographic basics

Relationships

Type is a building block

Three types of relationships

Concordant

Conflicting

Contrasting

Page 9: Typographic basics

Concordant

Use one font

Use variations on that font Size

Italic

Bold

Color

Seen as calm, formal

Page 10: Typographic basics

For example . . .

Page 11: Typographic basics

Conflicting

Use of two or more fonts that

are similar (same family)

Creates a visual dissonance

Should be avoided

Page 12: Typographic basics

For example . . .

Page 13: Typographic basics

Contrast

Strong contrast attracts

Simple way to create interest

Creates energy on a page

May involve 2 or more fonts

Requires careful planning

Page 14: Typographic basics

For example . . .

Page 15: Typographic basics

Oldstyle

Diagonal stress

Serifs on lowercase

letters are slanted

Moderate thick/thin

transition in the stroke

Page 16: Typographic basics

Oldstyle

Page 17: Typographic basics

Modern

Vertical stress

Radical thick/thin transition

in the stroke

Serifs are thin

and horizontal

Page 18: Typographic basics

Modern

Page 19: Typographic basics

Slab serif

Serifs are

horizontal and

thick (slabs)

Little or no

thick/thin transition

of contrast in the

strokes

Little vertical stress

Page 20: Typographic basics

Slab serif

Page 21: Typographic basics

Sans serif

No stress because

there’s no thick/thinNo serifs

No thick/thin transition

in the strokes

Page 22: Typographic basics

Sans serif

Page 23: Typographic basics

Connected Script

Page 24: Typographic basics

Unconnected Script

Page 25: Typographic basics

Decorative

Page 26: Typographic basics

Typography exists

to honor content

Robert Bringhurst, The Elements of Typographic Style

Page 27: Typographic basics