34
Typographical Basics

Typographic basics

Embed Size (px)

DESCRIPTION

Guidelines for novice designers

Citation preview

Page 1: Typographic basics

TypographicalBasics

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 TerminalSerif

Page 4: Typographic basics

Letter form

Hxg Hxg Hxg HxgAriel Times NR Geo Slab Hattenschweiler

Page 5: Typographic basics

KerningInter-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 lowercaseletters 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

Typographic samples

Page 27: Typographic basics
Page 28: Typographic basics
Page 29: Typographic basics
Page 30: Typographic basics
Page 31: Typographic basics
Page 32: Typographic basics
Page 33: Typographic basics
Page 34: Typographic basics

Typography exists to honor content

Robert Bringhurst, The Elements of Typographic Style