TYPOGRAPHY

ESSENTIALS
GRAP2587 | Design for Digital Media 1
TYPOGRAPHY ESSENTIALS
In this lecture, we’ll investigate some of the more common terminologies
and definitions in typography.

It’s crucial that students would learn and memorize MOST if not ALL of these
terms to have the vocabulary to follow up in the next lectures.
 TYPOGRAPHY ESSENTIALS
1.  Terminologies 3.  Variants
Characters Weights
Glyphs Width
Anatomy Italic / Oblique
Stylistic

2.  Categorizations 4. Formatting

Serif Size
Sans Serif Alignment
Monospace Line Length
Script Leading
Handwriting Tracking
Blackletter Kerning
Display Others
 WITHIN A TYPEFACE
Firstly, let’s look at the smallest element of typography.

What elements does a typeface contain?

 CHARACTERS
A typographic symbol that represents a letter.
 CHARACTERS
Characters of a Typeface may include
Latin Uppercase: A – Z
Latin Lowercase: a – z
Numerals: 0 – 9
Punctuation Marks: , . : ; ? ! etc.
Symbols: * % + = etc.
Extended Latin: Á À É È etc.
Non-Latin: Japanese, Hebrew, Chinese, etc.
 GLYPHS
Glyph – although commonly (and incorrectly) used interchangeably with
Character – is the actual shape of the design of a letterform.

When you open a typeface, using a font editor software or checking the
glyphs using Illustrator, you’ll see…
GLYPHS
 GLYPHS
•  One character can be represented by more than multiple glyph.
•  OpenType fonts can accommodate many glyphs for a single character
•  Some glyphs are not representation of characters but created to solely
for typographic design purposes.
GLYPHS
ANATOMY OF TYPE
ANATOMY OF TYPE
 ANATOMY OF TYPE
[Link]
[Link]
[Link]
 TYPOGRAPHY ESSENTIALS
1.  Terminologies 3.  Variants
Characters Weights
Glyphs Width
Anatomy Italic / Oblique
Style

2.  Categorizations 4. Formatting

Serif Size
Sans Serif Alignment
Monospace Line Length
Script Leading
Handwriting Tracking
Blackletter Kerning
Display Others
CATEGORIZING TYPEFACES
Why there are so many typefaces?
Why do we need new ones?
With 160,000+ typefaces in existence, both the novice and the pro can easily
become lost.
Many typefaces will look similar to untrained eyes at first glance.
But hopefully, you’ll develop your way to see how different they are.
SERIF
SERIF
 SERIF
Very simple, no-brainer definition – typefaces which have serifs.
 SERIF
Trajan Column 113 AD
 OLDSTYLE SERIF
Origin: Late 15th – Mid 18th Century
 OLDSTYLE SERIF
•  a.k.a. Humanist
•  Little contrast
between thick & thin
•  Curved strokes with
axis inclined to the
left
•  Bracket serif
•  Examples: Caslon,
Jenson, Gaudy Old
Style, Palatino, etc.
 TRANSITIONAL SERIF
Origin: 18th Century
 TRANSITIONAL SERIF
•  Little contrast
between thick & thin
•  Curved strokes with
axis more vertical
than diagonal
•  Thinner, flat bracket
serif
•  Examples: Baskerville,
Times, Times New
Roman, Bookman,
Century, Georgia, etc.
 MODERN SERIF
Origin: Late 18th Century
 MODERN SERIF
•  a.k.a. Didone
•  Dramatic contrast
between thick & thin
•  Curved strokes on a
vertical axis
•  Little or no bracket
serif
•  Examples: Bodoni,
Didot, Walbaum, etc.
 SLAB SERIF
Origin: Late 18th – Early 19th Century
 SLAB SERIF
•  a.k.a. Egyptian
•  Hardly any stroke
contrast, appearing to
be monostroke.
•  Often geometric
•  Little or no bracket,
heavy serif
•  Examples: Clarendon,
Rockwell, etc.
SERIF
SANS SERIF
 SANS SERIF
Again, very simple – typefaces which don’t have serifs.
SANS SERIF

Stoichedon Greek Inscription (5th & 4th century BC)

SANS SERIF
John Soane used sans-serif on his drawing & Neo-classicism
Architecture (while trying to incorporate Greek & Roman
design into contemporary structures) (late 18th century)
 GROTESQUE SANS SERIF
Origin: 19th Century

•  Some contrast in stroke weight

•  Spurred G & double-bowl (two-storey) g
•  Examples: Franklin Gothic, Akzidenz Grotesque, etc.
NEO-GROTESQUE SANS SERIF
Origin: 20th Century

•  Less contrast in stroke weight

•  More round curve with a single-bowl (one-storey) g
•  Examples: Helvetica, Arial, Univers, Bell Centennial, etc.
 GEOMETRIC SANS SERIF
Most geometric, mechanical of sans serif typefaces. Almost perfect circle Os, os.
Minimal difference between letters.
Examples: Futura, Gotham, Century Gothic, Avant Garde, etc.
 HUMANIST SANS SERIF
Most calligraphic of sans serif typefaces. Instead of deriving from the 19th
century grotesque faces, relate to the earlier, classical Roman form.
Examples: Gill Sans, Optima, Frutiger, Calibri, Verdana, Tahoma, etc.
 SCRIPTS
a.k.a. Cursive
Typefaces with fluid & rhythm, derived from or imitative of handwriting or calligraphy.
 MONOSPACE
a.k.a. Monospaced
A typeface that has letters and characters each occupy the same amount of
horizontal space
Examples: Courier, Inconsolata, Helvetica Monospaced, etc
MONOSPACE
MONOSPACE
MONOSPACE
 FORMAL SCRIPTS
Elegant typestyle, flowing loops & flourishes, rhythmic strokes.
Most often connecting.
Examples: Zapfino, Bickham Script, Commercial Script, etc.
 CASUAL & BRUSH SCRIPTS
Designed to look informal, as though quickly drawn with brush or pen.
Examples: Mistral, Brush Script, etc.
 HANDWRITING
Typographic interpretations of actual handwriting.
 BLACKLETTER
English black letter developed from the form of Caroline minuscule used there
after the Norman Conquest, sometimes called "Romanesque minuscule."
 DISPLAY
a.k.a. Decorative
Very broad category that contains typefaces that don’t belong to previous
categories. They are usually designed to be distinctive and engaging with very
few or no rules apply.
DISPLAY
 TYPOGRAPHY ESSENTIALS
1.  Terminologies 3.  Variants
Characters Weights
Glyphs Width
Anatomy Italic / Oblique
Style

2.  Categorizations 4. Formatting

Serif Size
Sans Serif Alignment
Monospace Line Length
Script Leading
Handwriting Tracking
Blackletter Kerning
Display Others
VARIANTS
VARIANTS
WEIGHTS
WIDTH (CONDENSATION)
TYPE CRIME!
ITALIC / OBLIQUE
STYLISTIC
STYLISTIC
 TYPOGRAPHY ESSENTIALS
1.  Terminologies 3.  Variants
Characters Weights
Glyphs Width
Anatomy Italic / Oblique
Stylistic

2.  Categorizations 4. Formatting

Serif Size
Sans Serif Alignment
Monospace Line Length
Script Leading
Handwriting Tracking
Blackletter Kerning
Display Others
SIZE
ALIGNMENT
LINE LENGTH
LEADING
In typography, leading
refers to the distance
between the baselines of
successive lines of type.
TRACKING
Also called “letterspacing”
Refers to a consistent
degree of increase /
decrease of space between
letters.
KERNING
is the process of
adjusting the spacing
between characters in a
proportional font
 CAPITALIZATION
All caps

Capitalized
SMALL CAPS
INDENTATION