Typography

A CRASH COURSE. HELMETS NOT INCLUDED.

Stop Stealing Sheep
AND FIND OUT HOW TYPE WORKS.
A wards Cer t i f icat 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
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).

Handwritten Black Letter Type

Latin Bible of AD 1407
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. A font is a piece of the greater whole.

Literally referring to the look or “face” of the type. ie: Baskerville Italic, 34pt, Avenir 35-Light. 34pt
ie: Baskerville, Avenir, Garamond
 Letterform

A A
The graphic form of a letter of the alphabet,
either as written or in a particular font.

Avenir 45-Book 500pt. Baskerville Regular 530pt

Originally designed by Adrian Frutiger in 1988 Orignally designed by John Baskerville in 1735
Sans-Serif Transitional Serif
 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.

CAP HEIGHT

X-HEIGHT

BASELINE
 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
 Anatomy of a Font
The Stem is a vertical stroke in a letterform.
Serifs are the stroke-like protrusions on the
ends of letterforms

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

ASCENDER

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

COUNTER BOWL COUNTER

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

BAR

CROSSBAR
 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.

ff fi fl ffi ffl fj
NON-LIGATURED

fffifl ffi ffl �
LIGATURES

st �
AESTHETIC LIGATATURES
 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
Sampling of ligatures from the
font Mrs Eaves
Classifying Type
MORE THAN JUST A SERIF.
 Serif & Sans-Serif

A A
Serif fonts have the stroke-like extensions
attached to the ends of the letterforms. (left)

Sans-serif fonts do not. (right)

Baskerville Regular 530pt Avenir 45-Book 500pt.

Orignally designed by John Baskerville in 1735 Originally designed by Adrian Frutiger in 1988
Transitional Serif Sans-Serif
 Serif Faces

AAA
The three traditional categories of serif faces
are Oldstyle, Transitional, and Modern.

Oldstyle Transitional Modern

Adobe Garamond Pro Regular Baskerville Regular Didot Regular
Less stroke-width variation, rounded serifs, More stroke-width variation, flat-edged serifs, Extreme stroke-width variation, minimal rectangular serifs,
calligraphic qualities, “ink-bleed.” more crisp qualities, sharp lines. little-to-no serif transition, ultra crisp.
 Slab Serif Faces
There are two major classifications of Slab Serifs:
Clarendon and Neo-Grotesk

AA
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.
 Glyphic Serif
Glyphic Serif faces emulate carved inscriptions
rather than pen-strokes.

A A
Friz Quadrata Medium
Designed by Ernst Friz in 1978
Albertus MT Regular
Designed by Berthold Wolpe, 1930s
 Sans Serif Faces
The three traditional categories of sans serif
faces are Grotesque, Geometric, and Humanist.

Ag Ag Ag
Grotesque
Berthold Akzidenz Grotesk Book
Strokes modulate (change width) around curves.
Geometric
Avenir 45-Book
Strokes have less modulation around curves and
Humanist
Meta Book
Stokes have severe modulations to emulate pen-strokes while
They are not the same width all the way around. are nearly the same width all the way around. still being sans-serif.
 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.

Ag Ag  Ag Ag Ag Ag
Edwardian Script Springtime Webdings Pinnocio Normal Rosewood Cutouts Dead History
Edward Benguiat Unknown Multiple Designers, 1997 Unknown Carol Twombly, 1994 Gail Blumberg, 1990 P. Scott Makela, 1990
Script Script Symbol Ornamental Ornamental Ornamental Experimental
Setting Type
BE GLAD YOU HAVE A COMPUTER
(Above) (Above) (Above)
Lead type in a case with a composing stick. Lead type set into a press block. Linotype machine
(Below) (Below) (Below)
Lead type and ornaments. Wood type set into a press block. 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.

RAG
ORPHAN
Lorem ipsum dolor sit amet, consectetur Aliquam mattis ac diam in volutpat. Vestibulum laorect.
LEADING
adipiscing elit. Fusce at laoreet leo. Suspendisse ante ipsum primis in faucibus orci luctus et

potenti. In sit amet rutrum odio. Sed suscipit ultrices posuere cubilia Curae; Vivamus a tellus

dui sit amet posuere cursus. Integer ornare at est viverra condimentum a et enim. Curabitur

quam quis ligula porttitor, sed lacinia est mattis. ante orci, pretium vel lobortis ut, ultricies vel

Mauris semper mi quam. Phasellus fringilla urna velit. Fusce semper dignissim scelerisque. Cras

sit amet elit auctor maximus ac id justo. Quisque mauris vivamus tellus.

ex purus, rhoncus eget fermentum eu, varius Curabitur ut accumsan purus, vitae interdum

eget enim. Integer rhoncus magna et metus orci. Quisque vitae fringilla velit. Maecenas sed

WIDOW vehia. dolor vel dui vulputate imperdiet euismod fusce

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

TRACKING

KERNING
 Good vs. Bad Kerning

Type Type Type

GOOD BAD WORSE
Letterforms have the appearance Letterforms have a measured and even Letterforms do not have even
of being evenly spaced. distance between them (monospaced). visual spacing and are touching.
This leaves them poorly spaced visually.
 Letterspacing
Tracking can be modified to extremes. These extremes
are referred on a scale of loose to tight.

TIGHT Typography TYPOGRAPHY

NORMAL Typography TYPOGRAPHY

LOOSE Ty p o g r a p h y T Y POGR A PH Y
 Letterspacing
Different letterforms, fonts, and typefaces respond
to tracking in different ways.

TIGHT
Typography TYPOGRAPHY

NORMAL
Typography TYPOGRAPHY
LOOSE Ty p o g r a p h y T YPOGR APHY
 Line Spacing
Leading can also be modified to the loose and tight extremes.
Typesetting is expressed in font size/leading size (14pt/18pt)
TIGHT (14/14)
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.
NORMAL (14/18)
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.
LOOSE (14/30)
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.
 Line Spacing
Line spacing can differ based on typeface,
capitalization, and font weight. Note the use of
negative leading for the first headline

TIGHT (72/55) NORMAL (72/72) LOOSE (72/90)

EXPRESS EXPRESS EXPRESS

YOURSELF YOURSELF 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.

TIGHT (72/55) NORMAL (72/72) LOOSE (72/90)

Express Express Express

Yourself Yourself Yourself

Hyper Hyper Hyper

Soft Soft Soft
 Ragging
Left or right-aligned type should have a “saw-tooth” rag.
Meaning, an even and regular pattern of protrusions.

LEFT ALIGNED JUSTIFIED

GOOD BAD GOOD BAD

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor in volutpat. Vestib bra
elit. Fusce at laoreet leo. Suspendisse potent. Indina elit. Fusce at laoreet leo. Suspendisse potent. elit. Fusce at laoreet leo. Suspendisse potent. ametiam sit amet, consectetur ipsum primis in faucibus
sit amet rutrum odio. Sed suscipit dui sit amet pon ametiam rutrum odio. Sed suscipit dui sit amet rutrum odio. Sed suscipit dui sit amet ponsc cursus. adipiscing elit. Fusce orci luctus et ultrices
cursus. Integer ornare quam quis ligula porttitor, ponsc cursus. Integer ornare quam quis ligula Integer ornare quam quis ligula portti, sed lacinia est a reet leo. Suspendisse candoposuere quisque.
sed lacinia est mattis. Mauris semper mi quam. Ad portti, sed lacinia est mattis. Mauris semper mi mattis. Mauris semper mi quam. phasellus fringilla potent. ametiam rutrum Mauri semper mi quam.
phasellus fringilla urna sit amet elit auctor mus ac quam. phasellus fringilla urna sit amet elit auctor urna sit amet elit auctor mus ac id justo. Quisque ex odio. Edsuscipitdui phasellus fringilla urna
id justo. Quisque ex purus, rhoncus eget fermentum mus ac id justo. Quisque ex purus, rhoncus eget purus, rhoncus eget fer eu, varius eget enim. Integer sitamet ponsccursus. sit amet auctor mus
eu, varius eget enim. Integer rhoncus magna metus. fer eu, varius eget enim. Integer rhoncus magna rhoncus magna metus. Aliquam mattis ac diam in Integer ornar am quis ac idjusto. Quisqueex
Aliquam mattis ac diam in volutpat. Vestibul abra metus. Aliquam mattis ac diam in volutpat. Vestibul volutpat. Vestibul abra ipsum primis in faucibus orci ligula portti, ed lacinia est purus, rhon fer eu,
ipsum primis in faucibus orci luctus et ultrices cando abra ipsum primis in faucibus orci luctus et ultrices luctus et ultrices candoposuere quisque. mattis. Mauri semper mi variusegeteni. Integer
posuere quisque. candoposuere quisque. quam. phasellus fringilla rhoncus magn metus.
urna sit amet auctor Aliquam maisac diam
mus ac id justo. Quisque in volutpat. Vestib bra
ex purus, rhoncu fer eu, ipsum primis in faucibus
varius eget enim. Integer orci luctus et ultrices
rhoncus magn metus. candoposuere quisque.
Aliquam mattis ac diam
 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.

LEFT ALIGNED JUSTIFIED

GOOD BAD GOOD BAD

Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor sit amet, consectetur adipiscing Lorem ipsum dolor in volutpat. Vestib bra
elit. Fusce at laoreet leo. Suspendisse potent. Indina elit. Fusce at laoreet leo. Suspendisse potent. elit. Fusce at laoreet leo. Suspendisse potent. ametiam sit amet, consectetur ipsum primis in faucibus
sit amet rutrum odio. Sed suscipit dui sit amet pon ametiam rutrum odio. Sed suscipit dui sit amet rutrum odio. Sed suscipit dui sit amet ponsc cursus. adipiscing elit. Fusce orci luctus et ultrices
cursus. Integer ornare quam quis ligula porttitor, ponsc cursus. Integer ornare quam quis ligula Integer ornare quam quis ligula portti, sed lacinia est a reet leo. Suspendisse candoposuere quisque.
sed lacinia est mattis. Mauris semper mi quam. Ad portti, sed lacinia est mattis. Mauris semper mi mattis. Mauris semper mi quam. phasellus fringilla potent. ametiam rutrum Mauri semper mi quam.
phasellus fringilla urna sit amet elit auctor mus ac quam. phasellus fringilla urna sit amet elit auctor urna sit amet elit auctor mus ac id justo. Quisque ex odio. Edsuscipitdui phasellus fringilla urna
id justo. Quisque ex purus, rhoncus eget fermentum mus ac id justo. Quisque ex purus, rhoncus eget purus, rhoncus eget fer eu, varius eget enim. Integer sitamet ponsccursus. sit amet auctor mus
eu, varius eget enim. Integer rhoncus magna metus. fer eu, varius eget enim. Integer rhoncus magna rhoncus magna metus. Aliquam mattis ac diam in Integer ornar am quis ac idjusto. Quisqueex
Aliquam mattis ac diam in volutpat. Vestibul abra metus. Aliquam mattis ac diam in volutpat. Vestibul volutpat. Vestibul abra ipsum primis in faucibus orci ligula portti, ed lacinia est purus, rhon fer eu,
ipsum primis in faucibus orci luctus et ultrices cando abra ipsum primis in faucibus orci luctus et ultrices luctus et ultrices candoposuere quisque. mattis. Mauri semper mi variusegeteni. Integer
posuere quisque. candoposuere quisque. quam. phasellus fringilla rhoncus magn metus.
urna sit amet auctor Aliquam maisac diam
mus ac id justo. Quisque in volutpat. Vestib bra
ex purus, rhoncu fer eu, ipsum primis in faucibus
varius eget enim. Integer orci luctus et ultrices
rhoncus magn metus. candoposuere quisque.
Aliquam mattis ac diam

POND RIVER
 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

CALL ME CRAZY BUT AND I WOULD HAVE GOTTEN

AWAY WITH IT TOO IF IT
I’M A TYPOPHILE WEREN’T FOR YOU MEDDLING
KIDS
BETTER GOOD

CALL ME CRAZY AND I WOULD HAVE GOTTEN

AWAY WITH IT TOO IF IT WEREN’T
BUT I’M A TYPOPHILE FOR YOU MEDDLING KIDS
“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
digitalsurgeons.com

& John Adie

Bē.net/jadie