typography 101.pdf

Typography
A CRASH COURSE. HELMETS NOT INCLUDED.

Stop Stealing Sheep
AND FIND OUT HOW TYPE WORKS.

A w a r d s C e r t i f i c a t e
“In 1936, Frederick Goudy was in New York City
to receive an award for excellence in type design.
Upon accepting the certificate, he took one look
at it and declared ‘Anyone who would letterspace
black-letter would steal sheep.’”
Erik Spiekermann
Stop Stealing Sheep & Find out How Type Works

Handwritten Black Letter Type
Latin Bible of AD 1407
So Stop Stealing Sheep
The term “to steal sheep” references a person who would rather
steal livestock than work hard rearing it themselves. Goudy
compares this to his particular situation in order say that the
person who scripted his award took the easy way out, rather than
scripting closely-laid blackletter forms (below).

Vocabulary
IT’S PRACTICALLY ITS OWN LANGUAGE.

A Little Context
Most typefaces are based off of the written word. Manuscripts
were written with pens or quills that generated thick and thin
strokes within letterforms. These influences are made clear in
traditional serif and some sans-serif typefaces.

Typeface vs. Font
Avenir 35-Light, 34pt
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%&?
Baskerville Italic, 34pt
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz
!@#$%&?
A typeface is the whole package.
Literally referring to the look or “face” of the type.
ie: Baskerville, Avenir, Garamond
A font is a piece of the greater whole.
ie: Baskerville Italic, 34pt, Avenir 35-Light. 34pt

Letterform
Avenir 45-Book 500pt.
Originally designed by Adrian Frutiger in 1988
Sans-Serif
Baskerville Regular 530pt
Orignally designed by John Baskerville in 1735
Transitional Serif
The graphic form of a letter of the alphabet,
either as written or in a particular font.
A A

BASELINE
X-HEIGHT
CAP HEIGHT
Anatomy of a Font
The cap height is the height of the capital letters.
The x-height is the height of the lower-case x.
The baseline is where the type sits.

Anatomy of a Font
Some letterforms extend below the baseline to give the
illusion of being aligned. If curves sat right on the baseline,
they would appear to sit above it. This is called an overshoot.

Anatomy of a Font
The lines that make up letterforms are called strokes.
The width of those strokes is called the stroke-width.
STROKE WIDTH

SERIF
STEM
Anatomy of a Font
The Stem is a vertical stroke in a letterform.
Serifs are the stroke-like protrusions on the
ends of letterforms

ASCENDER
DESCENDER
Anatomy of a Font
Descenders extend below the baseline.
Ascenders extend above the x-height and
sometimes above the cap height.

COUNTER COUNTER
BOWL
Anatomy of a Font
Counters are the open spaces within most letterforms.
Bowls are the containing strokes around counters.

BAR
CROSSBAR
Anatomy of a Font
A Bar extends from a letterform without being attached on both ends.
A Crossbar touches a stem on each end.

ff fi fl ffi ffl fj
fffifl ffi ffl �
Ligature
Ligatures represent the connecting of two or more letterforms for
the sake of legibility and to reduce un-designed overlapping. Some
ligatures are purely for aesthetic purposes.
ﬆ �
NON-LIGATURED
LIGATURES
AESTHETIC LIGATATURES

Sampling of ligatures from the
font Mrs Eaves
AA AV MB MD ME FF FI FL HE LA
MP NK NT OC OG OO THE TE TR TT
TW TY Th UB UD UL UP UR VA
ae æ cky ct ee fi fl ff ffi ffl ffb ffh
ffj ffr fft fb fh fj fr ft ffy fy gi gy ip
it ky oe py sp st tty tt ty tw

Classifying Type
MORE THAN JUST A SERIF.

Serif & Sans-Serif
Serif fonts have the stroke-like extensions
attached to the ends of the letterforms. (left)
Sans-serif fonts do not. (right)
Avenir 45-Book 500pt.
Originally designed by Adrian Frutiger in 1988
Sans-Serif
A
Baskerville Regular 530pt
Orignally designed by John Baskerville in 1735
Transitional Serif
A

Serif Faces
The three traditional categories of serif faces
are Oldstyle, Transitional, and Modern.
Oldstyle
Adobe Garamond Pro Regular
Less stroke-width variation, rounded serifs,
calligraphic qualities, “ink-bleed.”
Transitional
Baskerville Regular
More stroke-width variation, flat-edged serifs,
more crisp qualities, sharp lines.
Modern
Didot Regular
Extreme stroke-width variation, minimal rectangular serifs,
little-to-no serif transition, ultra crisp.
A A A

Slab Serif Faces
There are two major classifications of Slab Serifs:
Clarendon and Neo-Grotesk
Clarendon Slab Serif
Clarendon Regular
Very little stroke-width variation, serifs are nearly
as large as strokes, smooth serif transitions.
Neo-Grotesk Slab Serif
ITC Lubalin Graph Demi
Little-to-no stroke-width variation, serifs are as
large as strokes, sharp angular serif transitions.
A A

Glyphic Serif
Glyphic Serif faces emulate carved inscriptions
rather than pen-strokes.
Friz Quadrata Medium
Designed by Ernst Friz in 1978
Albertus MT Regular
Designed by Berthold Wolpe, 1930s
A A

Sans Serif Faces
The three traditional categories of sans serif
faces are Grotesque, Geometric, and Humanist.
Grotesque
Berthold Akzidenz Grotesk Book
Strokes modulate (change width) around curves.
They are not the same width all the way around.
Geometric
Avenir 45-Book
Strokes have less modulation around curves and
are nearly the same width all the way around.
Humanist
Meta Book
Stokes have severe modulations to emulate pen-strokes while
still being sans-serif.
Ag Ag Ag

Miscellaneous
Most typefaces can’t be defined by either serif or sans-serif.
Some may be Script, Symbol, or Ornamental. There are also
experimental typefaces and ones that can’t be categorized at all.
Edwardian Script
Edward Benguiat
Script
Ag Springtime
Unknown
Script
Ag
Pinnocio Normal
Unknown
Ornamental
Ag Rosewood
Carol Twombly, 1994
Ornamental
Ag
Cutouts
Gail Blumberg, 1990
Ornamental
Ag
Dead History
P. Scott Makela, 1990
Experimental
Ag
Webdings
Multiple Designers, 1997
Symbol



Setting Type
BE GLAD YOU HAVE A COMPUTER

(Above)
Lead type in a case with a composing stick.
(Below)
Lead type and ornaments.
(Above)
Lead type set into a press block.
(Below)
Wood type set into a press block.
(Above)
Linotype machine
(Below)
Linotype slugs.

Typesetting
Leading is the space between lines of type.
The rag is the jagged edge at the side of a paragraph.
A widow is when you have 12 characters or less at the end of a column.
An orphan is when you have 12 characters or less at the beginning of a column.
Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Fusce at laoreet leo. Suspendisse
potenti. In sit amet rutrum odio. Sed suscipit
dui sit amet posuere cursus. Integer ornare
quam quis ligula porttitor, sed lacinia est mattis.
Mauris semper mi quam. Phasellus fringilla urna
sit amet elit auctor maximus ac id justo. Quisque
ex purus, rhoncus eget fermentum eu, varius
eget enim. Integer rhoncus magna et metus
vehia.
Aliquam mattis ac diam in volutpat. Vestibulum
ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Vivamus a tellus
at est viverra condimentum a et enim. Curabitur
ante orci, pretium vel lobortis ut, ultricies vel
velit. Fusce semper dignissim scelerisque. Cras
mauris vivamus tellus.
Curabitur ut accumsan purus, vitae interdum
orci. Quisque vitae fringilla velit. Maecenas sed
dolor vel dui vulputate imperdiet euismod fusce
laorect.
LEADING
RAG
ORPHAN
WIDOW

Letterspacing
Tracking is the measure of the overall spacing between letters.
Kerning is the measure of the spacing between individual letters
KERNING
TRACKING

Good vs. Bad Kerning
GOOD BAD WORSE
Letterforms have the appearance
of being evenly spaced.
Letterforms have a measured and even
distance between them (monospaced).
This leaves them poorly spaced visually.
Letterforms do not have even
visual spacing and are touching.
Type Type
Type

Letterspacing
Typography
Typography
Ty p o g r a ph y
Tracking can be modified to extremes. These extremes
are referred on a scale of loose to tight.
TIGHT
NORMAL
LOOSE
TYPOGRAPHY
TYPOGRAPHY
T Y P O G R A P H Y

Letterspacing
TYPOGRAPHY
TYPOGRAPHY
T Y P O G R A P H Y
Different letterforms, fonts, and typefaces respond
to tracking in different ways.
TIGHT
NORMAL
LOOSE
Typography
Typography
Ty p o g r a p hy

Line Spacing
Leading can also be modified to the loose and tight extremes.
Typesetting is expressed in font size/leading size (14pt/18pt)
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Fusce at laoreet leo. Suspendisse potent. Indina
sit amet rutrum odio. Sed suscipit dui sit amet pon
cursus. Integer ornare quam quis ligula porttitor,
sed lacinia est mattis. Mauris semper mi quam. Ad
phasellus fringilla urna sit amet elit auctor mus ac
id justo. Quisque ex purus, rhoncus eget fermentum
eu, varius eget enim. Integer rhoncus magna metus.
Aliquam mattis ac diam in volutpat. Vestibul abra
ipsum primis in faucibus orci luctus et ultrices cando
posuere quisque.
posuere quisque.
posuere quisque.
TIGHT (14/14) NORMAL (14/18) LOOSE (14/30)

Line Spacing
Line spacing can differ based on typeface,
capitalization, and font weight. Note the use of
negative leading for the first headline
NORMAL (72/72) LOOSE (72/90)
TIGHT (72/55)
EXPRESS
YOURSELF
EXPRESS
YOURSELF
EXPRESS
YOURSELF

Line Spacing
With lower case letters, it’s important to pay attention to your
ascenders and descenders. This particular example works with
negative leading, but others may have crashed together.
NORMAL (72/72) LOOSE (72/90)
TIGHT (72/55)
Express
Yourself
Hyper
Soft
Express
Yourself
Hyper
Soft
Express
Yourself
Hyper
Soft

Ragging
Left or right-aligned type should have a “saw-tooth” rag.
Meaning, an even and regular pattern of protrusions.
GOOD
LEFT ALIGNED JUSTIFIED
BAD GOOD BAD
elit. Fusce at laoreet leo. Suspendisse potent.
ametiam rutrum odio. Sed suscipit dui sit amet
ponsc cursus. Integer ornare quam quis ligula
portti, sed lacinia est mattis. Mauris semper mi
quam. phasellus fringilla urna sit amet elit auctor
mus ac id justo. Quisque ex purus, rhoncus eget
fer eu, varius eget enim. Integer rhoncus magna
metus. Aliquam mattis ac diam in volutpat. Vestibul
abra ipsum primis in faucibus orci luctus et ultrices
candoposuere quisque.
posuere quisque.
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Fusce
a reet leo. Suspendisse
potent. ametiam rutrum
odio. Edsuscipitdui
sitamet ponsccursus.
Integer ornar am quis
ligula portti, ed lacinia est
mattis. Mauri semper mi
quam. phasellus fringilla
urna sit amet auctor
mus ac id justo. Quisque
ex purus, rhoncu fer eu,
varius eget enim. Integer
rhoncus magn metus.
Aliquam mattis ac diam
in volutpat. Vestib bra
ipsum primis in faucibus
orci luctus et ultrices
Mauri semper mi quam.
phasellus fringilla urna
sit amet auctor mus
ac idjusto. Quisqueex
purus, rhon fer eu,
variusegeteni. Integer
rhoncus magn metus.
Aliquam maisac diam
elit. Fusce at laoreet leo. Suspendisse potent. ametiam
rutrum odio. Sed suscipit dui sit amet ponsc cursus.
Integer ornare quam quis ligula portti, sed lacinia est
mattis. Mauris semper mi quam. phasellus fringilla
urna sit amet elit auctor mus ac id justo. Quisque ex
purus, rhoncus eget fer eu, varius eget enim. Integer
rhoncus magna metus. Aliquam mattis ac diam in
volutpat. Vestibul abra ipsum primis in faucibus orci
luctus et ultrices candoposuere quisque.

Ragging
Left or right-aligned type should have a “saw-tooth” rag.
Meaning, an even and regular pattern of protrusions.
Justified type should look evenly spaced within the
text block. Watch out for ponds and rivers.
GOOD BAD GOOD BAD
elit. Fusce at laoreet leo. Suspendisse potent.
ametiam rutrum odio. Sed suscipit dui sit amet
ponsc cursus. Integer ornare quam quis ligula
portti, sed lacinia est mattis. Mauris semper mi
quam. phasellus fringilla urna sit amet elit auctor
mus ac id justo. Quisque ex purus, rhoncus eget
fer eu, varius eget enim. Integer rhoncus magna
metus. Aliquam mattis ac diam in volutpat. Vestibul
abra ipsum primis in faucibus orci luctus et ultrices
posuere quisque.
Lorem ipsum dolor
sit amet, consectetur
adipiscing elit. Fusce
a reet leo. Suspendisse
potent. ametiam rutrum
odio. Edsuscipitdui
sitamet ponsccursus.
Integer ornar am quis
ligula portti, ed lacinia est
mattis. Mauri semper mi
quam. phasellus fringilla
urna sit amet auctor
mus ac id justo. Quisque
ex purus, rhoncu fer eu,
varius eget enim. Integer
rhoncus magn metus.
Aliquam mattis ac diam
Mauri semper mi quam.
phasellus fringilla urna
sit amet auctor mus
ac idjusto. Quisqueex
purus, rhon fer eu,
variusegeteni. Integer
rhoncus magn metus.
Aliquam maisac diam
elit. Fusce at laoreet leo. Suspendisse potent. ametiam
rutrum odio. Sed suscipit dui sit amet ponsc cursus.
Integer ornare quam quis ligula portti, sed lacinia est
mattis. Mauris semper mi quam. phasellus fringilla
urna sit amet elit auctor mus ac id justo. Quisque ex
purus, rhoncus eget fer eu, varius eget enim. Integer
rhoncus magna metus. Aliquam mattis ac diam in
volutpat. Vestibul abra ipsum primis in faucibus orci
luctus et ultrices candoposuere quisque.
POND RIVER
LEFT ALIGNED JUSTIFIED

Ragging
Ragging also has an influence on tone and voice. In large
headlines, line breaks can be used as pauses.
And as always, avoid widows!
OKAY BAD
BETTER GOOD
CALL ME CRAZY BUT
I’M A TYPOPHILE
AND I WOULD HAVE GOTTEN
AWAY WITH IT TOO IF IT
WEREN’T FOR YOU MEDDLING
KIDS
AND I WOULD HAVE GOTTEN
AWAY WITH IT TOO IF IT WEREN’T
FOR YOU MEDDLING KIDS
CALL ME CRAZY
BUT I’M A TYPOPHILE

“There is no bad type.”
“Apart from the typefaces that work well because we are familiar
with them, there are those that defy the simplistic classifications
of usefulness or purpose. They may exist only because the type
designer’s first thought one morning was a new letter shape. These
private artistic expressions may not appeal to a wide audience,
but every now and again the right singer effortlessly transforms a
simple song into a great hit. In the right hands, technical constraints
turn into celebrations of simplicity and awkward alphabets are
typographic heroes for the day.”
Erik Spiekermann
Stop Stealing Sheep & Find out How Type Works

Thank You
& John Adie
Bē.net/jadie
digitalsurgeons.com

typography 101.pdf

More Related Content

Similar to typography 101.pdf

More from jb00007

Recently uploaded

typography 101.pdf