INTRODUCTION TO

TYPOGRAPHY
GRAP2587 | Design for Digital Media 1
 INTRO TO TYPOGRAPHY
1.  Understanding Typography 3. Typography in Use
The Definition In Communication Design
Seeing Typography In Interactive Design
Typography Practice In Information Design
Font & Typeface In Motion Design
Formats

2.  History of Typography 4. Learning Typography

Sounds to Symbols The Importance of Typography
Evolution of Writing Systems All Principles Applied
Gutenberg & Movable Type How to Learn & Train Typography
Mechanization of Type Resources
Photocomposition
The Digital Age
THE DEFINITION
(Greek)
/ typos /: form
/ graphein /: to write

Typography is, simply put, the art

& technique of choosing, setting
& arranging type.

Good typography serves a

purpose.
THE DEFINITION
SEEING TYPE
Type exists.
Type is everywhere.
Type is a fundamental part of
human life & society.
SEEING TYPE
SEEING TYPE
SEEING TYPE
SEEING TYPE
 SEEING TYPE
Individual letters, when arranged in a particular way, represent the sound of
spoken language & visually express ideas in such a way that another person can
understand them in the manner intended.
SEEING TYPE
SEEING TYPE
SEEING TYPE
 TYPOGRAPHY PRACTICE
Then what exactly what typography is?
Typography engages with people on different levels:
There are:
•  The holistic view (macro-typography): type choice, visual impact, type
choice, layout, compositions, hierarchy, whitespace, grid system (number of
columns & rows), etc.
•  The detailed view (micro-typography): type choice, sizes, spacing between
lines, spacing between words, spacing between letters, etc.
 MACRO / MICRO

macro-typography
 MACRO / MICRO

micro-typography
 MACRO / MICRO

macro-typography
 MACRO / MICRO

micro-typography
 TYPOGRAPHY IS & ISN’T

Isn’t!
 TYPOGRAPHY IS & ISN’T

Is!
 TYPOGRAPHY IS & ISN’T

Isn’t!
 TYPOGRAPHY IS & ISN’T

Isn’t!
TYPEFACE / FONT / FAMILY
 FONT & TYPEFACE
Font: a set of letters, numbers, symbols, etc. of the same design. Examples:
Helvetica Neue Light is a Font

Typeface: a set of fonts that share common design features. Examples:

Helvetica Neue is a Typeface.

Font family: often used interchangeably with Typeface.

 FONT & TYPEFACE
The physical embodiment of a collection of letters, numbers, symbols, etc.
(whether it’s a case of metal pieces or a computer file) is a font. When referring
to the design of the collection (the way it looks) you call it a typeface.
FONT & TYPEFACE
 FONT & TYPEFACE

typeface
 FONT & TYPEFACE

font
 FONT & TYPEFACE

font (digital)
 FONT & TYPEFACE
The way I relate the difference
between typeface and font to my
students is by comparing them to
songs and MP3s, respectively (or
songs and CDs, if you prefer a
physical metaphor). – Nick Sherman

You talk about how much you like a tune, you

don’t say: “That’s a great MP3”. You say: “That’s
a great song”. The MP3 is the delivery
mechanism, not the creative work; just as in
type a font is the delivery mechanism and a
typeface is the creative work – Stephen Coles
TYPE DESIGN & DESIGNER
Type design: the art & craft of
designing typefaces.
Type designer: designer of typefaces.
Don’t call them “font designers” (or
even “font family designers”. Ugh!).
 FORMATS

Web font formats

Desktop font formats
 INTRO TO TYPOGRAPHY
1.  Understanding Typography 3. Typography in Use
The Definition In Communication Design
Seeing Typography In Interactive Design
Typography Practice In Information Design
Font & Typeface In Motion Design
Formats

2.  History of Typography 4. Learning Typography

Sounds to Symbols The Importance of Typography
Evolution of Writing Systems All Principles Applied
Gutenberg & Movable Type How to Learn & Train Typography
Mechanization of Type Resources
Photocomposition
The Digital Age
HISTORY OF TYPOGRAPHY
SOUNDS TO SYMBOLS
 EVOLUTION OF
WRITING SYSTEMS
Sumerians’ Cuneiform – one of the earliest known systems of writing,
c. 31st century BC to 1st century AD
 EVOLUTION OF
WRITING SYSTEMS
Evolution of Alphabets
 EVOLUTION OF
WRITING SYSTEMS
Evolution of Alphabets
 EVOLUTION OF
WRITING SYSTEMS
One of the most important contributions to
early writing by the Romans: Trajan
Columns
113 A.D.
 EVOLUTION OF
WRITING SYSTEMS

Gothic Scripts

Uncial, France, 7th century.

 EVOLUTION OF
WRITING SYSTEMS
17th century: the alphabet has 26 characters.
 GUTENBERG &
MOVABLE TYPE
Before printing:
Scribes with breathtaking
letterings.
 GUTENBERG &
MOVABLE TYPE

Johannes Gutenberg
& the first printed bible
1450 Germany
GUTENBERG &
MOVABLE TYPE
 MECHANIZATION OF TYPE

Typesetting machines: the result of

Industrial Revolution in 19th & early
20th Century.

Linotype machine invented by

Ottman Mergenthaler.
1880s
 PHOTOTYPESETTING

Applying photographic
process to render type using
“phototypesetters”
1960s – 1980s
 THE DIGITAL AGE

Desktop publishing put

typography into the digital
world
1983 – 1984
 INTRO TO TYPOGRAPHY
1.  Understanding Typography 3. Typography in Use
The Definition In Communication Design
Seeing Typography In Interactive Design
Typography Practice In Information Design
Font & Typeface In Motion Design
Formats

2.  History of Typography 4. Learning Typography

Sounds to Symbols The Importance of Typography
Evolution of Writing Systems All Principles Applied
Gutenberg & Movable Type How to Learn & Train Typography
Mechanization of Type Resources
Photocomposition
The Digital Age
 TYPOGRAPHY IN
COMMUNICATION DESIGN
 TYPOGRAPHY IN
COMMUNICATION DESIGN
 TYPOGRAPHY IN
COMMUNICATION DESIGN
 TYPOGRAPHY IN
INTERACTIVE DESIGN
 TYPOGRAPHY IN
INTERACTIVE DESIGN
 TYPOGRAPHY IN
INFORMATION DESIGN
 TYPOGRAPHY IN
INFORMATION DESIGN
TYPOGRAPHY IN
MOTION DESIGN
TYPOGRAPHY IN
MOTION DESIGN
 INTRO TO TYPOGRAPHY
1.  Understanding Typography 3. Typography in Use
The Definition In Communication Design
Seeing Typography In Interactive Design
Typography Practice In Information Design
Font & Typeface In Motion Design
Formats

2.  History of Typography 4. Learning Typography

Sounds to Symbols The Importance of Typography
Evolution of Writing Systems All Principles Applied
Gutenberg & Movable Type How to Learn & Train Typography
Mechanization of Type Resources
Photocomposition
The Digital Age
 IMPORTANCE OF
TYPOGRAPHY
Typography conveys emotions.
 IMPORTANCE OF
TYPOGRAPHY
Typography keeps people reading
 IMPORTANCE OF
TYPOGRAPHY
Typography is an essential part of design
IMPORTANCE OF
TYPOGRAPHY
 APPLYING DESIGN
PRINCIPLES

Proportion, Emphasis & Contrast

 APPLYING DESIGN
PRINCIPLES

Balance & Unity

 APPLYING DESIGN
PRINCIPLES

Movement & Rhythm

 HOW TO LEARN
TYPOGRAPHY
•  Learn the principles
•  Practice a lot
•  Train your eyes
•  Start noticing type
•  Make friends with type
•  Explore & experiment
 HOW TO LEARN
TYPOGRAPHY

Start noticing type

 HOW TO LEARN
TYPOGRAPHY

Make friends with type

 HOW TO LEARN
TYPOGRAPHY

Explore & experiment

 RESOURCES

Books on Type
Design & Typography Inspiration books
Any kind of book, actually. Even fictions.
 RESOURCES
Resources & Inspirations
http://ilovetypography.com
http://typedia.com/
http://welovetypography.com/
http://incredibletypes.com/
http://fontsinuse.com/
http://typeverything.com/
Free Fonts
http://www.fontsquirrel.com
http://www.fontfabric.com
http://www.theleagueofmoveabletype.com/
http://www.losttype.com/
http://www.exljbris.com/
 RESOURCES

Any piece of type around you!

 RESOURCES

And again, last but not least.