typography •n.
1. the art or process of printing with type.
2. the work of setting and arranging types
and of printing from them.

typesetting •n.
1. the retrieval of the stored letters and
the ordering of them for visual display.

Topics
Terminology
Classes
Setting
Technologies
Type Crimes
Questions

Topics
Terminology

g
Glyph
Refers to a
character in the
font.

g
Glyph
Refers to a
character in the
font.
3
Is a glyph

g
Glyph
Refers to a
character in the
font.
a
Is a glyph

g
Glyph
Refers to a
character in the
font.
&
Is a glyph

g
Glyph
Refers to a
character in the
font.
>
Is a glyph

g
Weight
How light or bold
the characters in a
font appear.
Light and bold are
terms to describe
the thickness of a
character.

Light
Regular
Medium
Heavy
Bold
Extra Bold
Weight
How light or bold
the characters in a
font appear.
Light and bold are
terms to describe
the thickness of a
character.

g
Variant
A version of the
typeface that changes
the letterform’s shape
and style.
Typefaces can have
dozens of different
variants.

ALL CAPS
Oblique
Condensed
Small Caps
Variant
A version of the
typeface that changes
the letterform’s shape
and style.
Typefaces can have
dozens of different
variants.

Hemopexin

Hemopexin

cap height
Hemopexin

cap height
x-height
Hemopexin

cap height
x-height
baseline
Hemopexin

cap height
x-height
baseline
ex

hpm

hpm
Ascender

hpm
Ascender
Descender

hpm
Ascender
Descender
Character
Width

Topics
Terminology
Classes

Serif

Sans
Serif

Script

monospace

abcdefghi
monospace
jklmnopqr

Ornamental

Ornamental
Ornamental
Ornamental

Aa
Humanist serif

Aa
Transitional serif

Aa
Modern serif

Aa
Slab Serif

Aa
Humanist sans

Aa
Transitional sans

Aa
Geometric sans

Topics
Terminology
Classes
Setting

Typesetting

Typesetting
Which type family?
Which typeface?
Which font?

Typesetting
the retrieval of the stored
letters and the ordering
of them for visual display.

leading •n.
1. the amount of added vertical spacing
between lines of type.

leading •n.
1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras
pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet
semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum
varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique,
felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec
urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante.
aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare
euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus
blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis
rutrum porta a a eros.

leading •n.
1.25
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras
pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet
semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum
varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique,
felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec
urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante.
aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare
euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus
blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis
rutrum porta a a eros.

leading •n.
1.5
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer sed varius felis. Cras
pellentesque mattis erat nec laoreet. Donec sodales fermentum arcu sit amet
semper. Suspendisse a commodo orci. Nullam sed lorem et dolor condimentum
varius. Praesent elit nunc, consequat id hendrerit non, porta nec est. Nulla tristique,
felis ut dictum ultricies, velit leo ultrices purus, quis feugiat enim lectus nec
urna.Pellentesque eros nisi, blandit nec scelerisque vel, consequat sit amet ante.
aPhasellus ut quam vitae nulla hendrerit tempus at eget dui. Praesent ornare
euismod orci a placerat. Duis commodo dapibus accumsan. Fusce fringilla faucibus
blandit. Donec porta fermentum dolor in aliquam. Vestibulum ut tellus id turpis
rutrum porta a a eros.

tracking •n.
1. the amount of space between a group
of letters to affect density in a line or
block of text.

tracking •n.
t h e a m o u n t o f s p a c e b e t we e n a
group
of
letters
to
affect
d e n s i t y i n a l i n e o r bl o c k o f
text.

tracking •n.
the amount of space between a group of
letters to affect density in a line or block of
text.

measure •n.
1. the length of a body of type
Lorem ipsum dolor sit amet, consectetur adipiscing
Fusce fringilla faucibus blandit. Donec porta
elit. Integer sed varius felis. Cras pellentesque
fermentum dolor in aliquam. Vestibulum ut tellus id
mattis erat nec laoreet. Donec sodales fermentum
turpis rutrum porta pulvinar eros. Cras a nulla dui.
arcu sit amet semper. Suspendisse a commodo orci.
Praesent eu elit ante, eu blandit quam. Phasellus
Nullam sed lorem et dolor condimentum varius.
rhoncus bibendum arse facili en a lorem sive
Praesent elit nunc, consequat id hendrerit non,
porta nec est. Nulla tristique, felis ut dictum
ultricies, velit leo ultrices purus, quis feugiat enim
lectus nec urna. Ut hendrerit massa sed nunc
convallis at placerat enim varius. Pellentesque id
massa et neque cursus sollicitudin. Pellentesque
eros nisi, blandit nec scelerisque.
nenatis lacus pellentesque. Vivamus et dolor vitae
nisl rhoncus interdum vel non nibh. Sed id erat vel
velit luctus auctor in et urna. Nunc at diam eget urna
feugiat feugiat. Phasellus elit lorem, ullamcorper ac
scelerisque sit amet, pulvinar in sem.

measure •n.
Lorem ipsum dolor sit amet, consectetur adipiscing
Fusce fringilla faucibus blandit. Donec porta
elit. Integer sed varius felis. Cras pellentesque
fermentum dolor in aliquam. Vestibulum ut tellus id
mattis erat nec laoreet. Donec sodales fermentum
turpis rutrum porta pulvinar eros. Cras a nulla dui.
arcu sit amet semper. Suspendisse a commodo orci.
Praesent eu elit ante, eu blandit quam. Phasellus
Nullam sed lorem et dolor condimentum varius.
rhoncus bibendum arse facili en a lorem sive
Praesent elit nunc, consequat id hendrerit non,
porta nec est. Nulla tristique, felis ut dictum
ultricies, velit leo ultrices purus, quis feugiat enim
lectus nec urna. Ut hendrerit massa sed nunc
convallis at placerat enim varius. Pellentesque id
massa et neque cursus sollicitudin. Pellentesque
eros nisi, blandit nec scelerisque.
Measure
nenatis lacus pellentesque. Vivamus et dolor vitae
nisl rhoncus interdum vel non nibh. Sed id erat vel
velit luctus auctor in et urna. Nunc at diam eget urna
feugiat feugiat. Phasellus elit lorem, ullamcorper ac
scelerisque sit amet, pulvinar in sem.

Typesetting
Leading
Tracking
Start
with
Keep the
1.5
+ for larger measures
– for smaller measures
Defaults
+ for larger leading
– for smaller leading
Measure
52–78
characters
(including spaces)

Topics
Terminology
Classes
Setting
Technologies

Typographic CSS
line-height
text-shadow
text-indent
@font-face
margin
text-transform
text-indent
column-count
letter-spacing
text-decoration
color
text-stroke
word-spacing
font (shorthand)
font-size-adjust
rgba()
text-align
text-transform
font-stretch
white-space

@Font-Face
Host the Font(s) Yourself
• The League of Moveable Type
• Fonstruct at Fontlab.com
• Fontlab.com

@Font-Face
Third Party Hosts
• Typekit.com
• Fontdeck.com
• FontSquirrel.com
• Google Font Directory

Topics
Terminology
Classes
Setting
Technologies
Type Crimes

Type Crimes
Ellipsis
… not ...
…
Double Quotes
“ ” not " "
“ ”
Single Quotes
‘ ’ not ' '
‘ ’
Em Dash
— not -
—
En Dash
– not -
–
Apostrophe
’ not '
’

Topics
Terminology
Classes
Setting
Technologies
Type Crimes
Questions

?