Typography

by Joby Provido
And Penny Tan
 Typography
• Etymology: typos (type) and
graphos (written)
• Performed by typesetters,
compositors, typographers,
graphic designers, comic book
artists, grafitti artists, and
clerical workers
 Typography
• The art and technique of:
• Arranging type – involves the
selection of:
• Typefaces
• Point size
• Leading – line spacing
• Tracking – adjusting the space
between a group of letters
• Kerning – adjusting the space
between a pair of letters
• Type design
• Modifying type glyphs
 typefaces
• A set of one or more fonts, in one
or more sizes, designed with
stylistic unity
• Usually comprised of an alphabet
of letters, numbers, punctuation
 Typefaces vs. fonts
 Typefaces  Fonts
Families of fonts Variations of a
• Times New typeface
Roman • Arial
• Arial • Arial bold
• Arial italics
• Arial underline
Typeface terms
Typeface terms
 Typeface terms
ascender x-height

descender baseline

• Horizontal guideline indicating where the bottom

of characters without descenders appear to
align
• Height of lower case letters with no ascender or
descender
• Part of the lower case letter that extends above
the x-height
• Part of the lower case letter that extends below
 Typeface terms

roman italic
 Point size

size in points
 Point size discrepancy
• Point sizes are not exactly the
same height
• The following are all 50 points
 stress
• The direction
and degree of
incline in the
axis of the
font
• Could be
diagonal
(oblique or
stress
biased),
vertical, or
 serifs
• Serif
• A short line or finishing stroke that
crosses or projects from stems or
strokes in a character
• Bracket
• Also called a fillet
• Shape that appears at the junction of
a serif and a main stroke
• Hairline
• Thinnest stroke of a letter
 serifs
• Slab
• Bold rectangular appearance and
sometimes has fixed widths
• All characters occupy the same
amount of horizontal space
• Wedge
• Where the junction of the serif and
the stem are diagonal, rather
than a bracket
Serifs and brackets

bracketed

Serifs (feet)
Palatino
weight
Condensed and extended
TYPEFACE CATEGORIES
 Old style
• Formed the
way scribes
held their
pens in the
1400s
• Warm and
graceful
• Most readable
because they
were meant
 Old style
lowercase serifs are slanted diagonal stress

serifs bracketed gentle transition from thick to thin

Old style
Old style samples
 modern
• Industrial revolution = mechanical
point of view
• Old style typefaces were becoming
obsolete
• Elegant but severe and cold
• Not very readable
 modern

vertical stress lowercase serifs are horizontal

radical thick to thin

serifs subtle or no bracketing

modern
Modern samples
 Slab serif
• Also known as square serif
• All characters occupy the same amount of
horizontal space, as printed by a
typewriter
• Industrial revolution = advertising
• Advertising needed thicker typefaces
• Thickening the modern typefaces made it
impossible to read
• Thickened the serifs instead
• Often called CLARENDONS as it epitomizes
the letterform
 Slab serif

horizontal lowercase serifs vertical stress

thick, fat serifs subtle thick to thin

Slab serif samples
 Sans serif
• Sans means “without” in French
• Created by William Caslon in 1816
because he hated serifs
• The Bauhaus motto “form follows
function” stripped typefaces to
their bare essentials
• Large x-height creates a presence
• Futura is the epitome of this
letterform
 Sans serif

large x-height

no serifs subtle or no transition from thick to thin

Sans serif samples
 script
• Emulates
handwriting
• Classy and
formal
• In the 1400s
books were
made by
scribes who
wrote in script
Script samples
 decorative
• Enhances a theme
• Not meant for anything but
decoration
• Not to be used as text
• Adds punch to a publication
• Creates a look or emphasizes
content
• If overused it can destroy a design
Decorative sample
 distressed
• Rules of original typography were
demolished
• Also called fringe, grunge, garage,
deconstructed, or lawless
distorted, deliberately trashed beauty in their ugliness
Distressed sample
Combining
typefaces
conflicting
• 2 or more
typefaces
that are
similar in
style, size,
weight, etc.
• Visually
disturbing
 concordant
• One family
• Safe but dull
contrasting
• Typefaces are
clear and
distinct from
each other
 Ways to achieve contrast
• Color
• Direction
• Form
• Size
• Structure
• Weight
Contrast by color
Contrast by color
• Typists refer to
density of
text as color
 Contrast by color
You can change the


color of a typeface
by modifying any of
the following:
• Leading
• Tracking
• Kerning
• Italicizing
• Weight
• Etc.
Contrast by color
Contrast by color
 Contrast by direction

Vertically downward
Direction by which text is read


Vertically upward
D Horizontal
ia
go
na

p
U
lly

l ly
D
na
ow go
n
ia
D

Verdana
Contrast by direction
Contrast by direction

A ta llth in co lu m n o f text
h a s a ve rtica ld ire ctio n
Contrast by direction
Contrast by form
Refers to the


shape of the
blocks of letters
Contrast by form

Templar
Contrast by form

Oxford
Contrast by form

Oxford
Contrast by form
Contrast by form
 z e
s i
y i th
b e
w
s t y
t
p
a g
r t b pe t r a
i s t

n t s ty o n
a
o n t r a ll e c
C C o sm th u s
 ke io
a bv
M o

Contrast by size

Arial

Lithe | Classic Typewriter

Rockwell | Century Gothic

Old English | Edwardian Script

 Contrast by structure
• Use typefaces from families with
different structures
• Never put typefaces from the same
family structure on the same
page
• Ensure that the contrast is
emphasized
• Limit to only three families
Contrast by structure
Trebuchet |


Garamond Bodoni | Clarendon


Contrast by structure
 Contrast by weight
• Refers to the thickness of the
strokes
• Strokes can be bold, semi-bold,
extra-bold, regular, light, etc.
• Great for organizing information
• Again, emphasize the contrast
Contrast by weight
Contrast by weight
Contrast by weight
Contrast by weight
samples
samples
samples
samples
samples
samples
samples