Basics of typography. Typeface families, anatomy of a glyph, and some typesetting principles like measure and leading. (From a few talks I did in 2011. v1.2)

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

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

4. Topics
Terminology
Classes
Setting
Technologies
Type Crimes
Questions

5. Topics
Terminology

6. g
Glyph
Refers to a
character in the
font.

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

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

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

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

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

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

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

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

15. Hemopexin

16. Hemopexin

17. cap height
Hemopexin

18. cap height
x-height
Hemopexin

19. cap height
x-height
baseline
Hemopexin

20. cap height
x-height
baseline
ex

21. hpm

22. hpm
Ascender

23. hpm
Ascender
Descender

24. hpm
Ascender
Descender
Character
Width

25. Topics
Terminology
Classes

26. Serif

27. Sans
Serif

28. Script

29. monospace

30. abcdefghi
monospace
jklmnopqr

31. Ornamental

32. Ornamental
Ornamental
Ornamental

33. Aa
Humanist serif

34. Aa
Transitional serif

35. Aa
Modern serif

36. Aa
Slab Serif

37. Aa
Humanist sans

38. Aa
Transitional sans

39. Aa
Geometric sans

40. Topics
Terminology
Classes
Setting

41. Typesetting

42. Typesetting
Which type family?
Which typeface?
Which font?

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

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

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

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

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

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

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

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

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

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

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

54. Topics
Terminology
Classes
Setting
Technologies

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

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

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

58. Topics
Terminology
Classes
Setting
Technologies
Type Crimes

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

60. Topics
Terminology
Classes
Setting
Technologies
Type Crimes
Questions

61. ?