TypographyA CRASH COURSE. HELMETS NOT INCLUDED.

Stop Stealing SheepAND FIND OUT HOW TYPE WORKS.

Awa 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 SpiekermannStop Stealing Sheep & Find out How Type Works

Handwritten Black Letter TypeLatin Bible of AD 1407

So Stop Stealing SheepThe 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).

VocabularyIT’S PRACTICALLY ITS OWN LANGUAGE.

A Little ContextMost 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. FontAvenir 35-Light, 34ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz!@#$%&?

Baskerville Italic, 34ptABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz! @ # $ % & ?

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 1988Sans-Serif

Baskerville Regular 530ptOrignally designed by John Baskerville in 1735Transitional 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 FontThe 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 FontThe lines that make up letterforms are called strokes.The width of those strokes is called the stroke-width.

STROKE WIDTH

SERIFSTEM

Anatomy of a FontThe Stem is a vertical stroke in a letterform.Serifs are the stroke-like protrusions on the

ends of letterforms

ASCENDER

DESCENDER

Anatomy of a FontDescenders extend below the baseline.

Ascenders extend above the x-height and sometimes above the cap height.

COUNTER COUNTERBOWL

Anatomy of a FontCounters are the open spaces within most letterforms.

Bowls are the containing strokes around counters.

BAR

CROSSBAR

Anatomy of a FontA Bar extends from a letterform without being attached on both ends.

A Crossbar touches a stem on each end.

ff fi fl ffi ffl fjff fi fl ffi ffl �

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

st �

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 TypeMORE THAN JUST A SERIF.

Serif & Sans-SerifSerif 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 1988Sans-Serif

ABaskerville Regular 530ptOrignally designed by John Baskerville in 1735Transitional Serif

A

Serif FacesThe three traditional categories of serif faces

are Oldstyle, Transitional, and Modern.

OldstyleAdobe Garamond Pro RegularLess stroke-width variation, rounded serifs, calligraphic qualities, “ink-bleed.”

TransitionalBaskerville RegularMore stroke-width variation, flat-edged serifs, more crisp qualities, sharp lines.

ModernDidot RegularExtreme stroke-width variation, minimal rectangular serifs, little-to-no serif transition, ultra crisp.

A A A

Slab Serif FacesThere are two major classifications of Slab Serifs:

Clarendon and Neo-Grotesk

Clarendon Slab SerifClarendon RegularVery little stroke-width variation, serifs are nearly as large as strokes, smooth serif transitions.

Neo-Grotesk Slab SerifITC Lubalin Graph DemiLittle-to-no stroke-width variation, serifs are as large as strokes, sharp angular serif transitions.

A A

Glyphic SerifGlyphic Serif faces emulate carved inscriptions

rather than pen-strokes.

Friz Quadrata MediumDesigned by Ernst Friz in 1978

Albertus MT RegularDesigned by Berthold Wolpe, 1930s

A A

Sans Serif FacesThe three traditional categories of sans serif faces are Grotesque, Geometric, and Humanist.

GrotesqueBerthold Akzidenz Grotesk BookStrokes modulate (change width) around curves. They are not the same width all the way around.

GeometricAvenir 45-BookStrokes have less modulation around curves and are nearly the same width all the way around.

HumanistMeta BookStokes have severe modulations to emulate pen-strokes while still being sans-serif.

Ag Ag Ag

MiscellaneousMost 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 ScriptEdward BenguiatScript

AgSpringtimeUnknownScript

AgPinnocio NormalUnknownOrnamental

AgRosewoodCarol Twombly, 1994Ornamental

AgCutoutsGail Blumberg, 1990Ornamental

AgDead HistoryP. Scott Makela, 1990Experimental

AgWebdingsMultiple Designers, 1997Symbol

Setting TypeBE 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.

TypesettingLeading 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

LetterspacingTracking 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 TypeType

Letterspacing

Typography

Typography

Ty p o g r a p h 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 h y

Line SpacingLeading 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.

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.

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.

TIGHT (14/14) NORMAL (14/18) LOOSE (14/30)

Line SpacingLine 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)

EXPRESSYOURSELF

EXPRESSYOURSELF

EXPRESSYOURSELF

Line SpacingWith 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)

ExpressYourself

HyperSoft

ExpressYourself

HyperSoft

ExpressYourself

HyperSoft

RaggingLeft 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

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

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.

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 candoposuere quisque. 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 in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque.

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

RaggingLeft 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

Lorem ipsum dolor sit amet, consectetur adipiscing 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.

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.

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 candoposuere quisque. 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 in volutpat. Vestib bra ipsum primis in faucibus orci luctus et ultrices candoposuere quisque.

Lorem ipsum dolor sit amet, consectetur adipiscing 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

RaggingRagging 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 SpiekermannStop Stealing Sheep & Find out How Type Works

Thank You& John Adie

Bē.net/jadie

digitalsurgeons.com