typography 101 chia sẽ kinh nghiệm thiết kế miễn phí

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.

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

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

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


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
fffifl ffi ffl �
st �

NON-LIGATURED

LIGATURES

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

Orignally designed by John Baskerville in 1735
Transitional Serif

Avenir 45-Book 500pt.

Originally designed by Adrian Frutiger in 1988
Sans-Serif


Serif Faces

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


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


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
Edward Benguiat
Script

Springtime
Unknown
Script

Webdings
Multiple Designers, 1997
Symbol

Pinnocio Normal
Unknown
Ornamental

Rosewood
Carol Twombly, 1994
Ornamental

Cutouts
Gail Blumberg, 1990
Ornamental

Dead History

P. Scott Makela, 1990
Experimental


Setting Type
BE GLAD YOU HAVE A COMPUTER