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.
