This document summarizes a presentation about typography fundamentals including kerning, leading, serifs, anatomy of type, typesetting principles like hierarchy and measurement, glyphs like dashes and ligatures, and rules for web typography. The presentation covers topics in seven sections and includes examples and diagrams to illustrate typographic concepts.

1. Kerning,
Leading,
& Serifs, OH MY!
Thursday, October 20, 11

2. Jake Przespo
DESIGNER
Thursday, October 20, 11

3. 1. History
Thursday, October 20, 11

4. 2. Anatomy
Thursday, October 20, 11

5. Serif vs.
Sans-serif
2. Anatomy
Thursday, October 20, 11

6. 2. Anatomy
Thursday, October 20, 11
S

7. 2. Anatomy
Thursday, October 20, 11
S

8. PRINT DIGITAL
Heading Heading
Sed molestie augue sit amet leo
Sed molestie augue sit amet leo consequat
consequat posuere. Vestibulum ante
posuere. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere ipsum primis in faucibus orci luctus
cubilia. et ultrices posuere cubilia.
3. Typesetting
Thursday, October 20, 11

9. Vocabulary
2. Anatomy
Thursday, October 20, 11

10. 2. Anatomy
Thursday, October 20, 11
T
STEM

11. 2. Anatomy
Thursday, October 20, 11
r SERIF

12. h
ASCENDER
2. Anatomy
Thursday, October 20, 11

13. 2. Anatomy
y
DESCENDER
Thursday, October 20, 11

14. 2. Anatomy
o COUNTER
Thursday, October 20, 11

15. 2. Anatomy
b BOWL
Thursday, October 20, 11

16. 3. Typesetting
Thursday, October 20, 11

17. Kerning
SPACING BETWEEN LETTERS
3. Typesetting
Thursday, October 20, 11

18. Word
GOOD
Word
BAD
3. Typesetting
Thursday, October 20, 11

19. Teach
GOOD
Teach
BAD
3. Typesetting
Thursday, October 20, 11

20. All caps TODAY
SKILLSHARE
usually TYPOGRAPHY
don’t need
kerning
3. Typesetting
Thursday, October 20, 11

21. Tall letters Tennis
Wanted
with an Voting
open
bottom
need more
3. Typesetting
Thursday, October 20, 11

22. Tricks & UPSIDE DOWN
droW
Tips
SQUINT TEST
Word
3. Typesetting
Thursday, October 20, 11

23. GAME TIME!
3. Typesetting
Thursday, October 20, 11

24. Leading
SPACING BETWEEN LINES
3. Typesetting
Thursday, October 20, 11

25. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed
auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis
nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
posuere. Praesent id metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue
lacinia dui, a.
BAD
3. Typesetting
Thursday, October 20, 11

26. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed
auctor neque eu tellus rhoncus ut eleifend nibh porttitor.
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis
nisl tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor
posuere. Praesent id metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue
lacinia dui, a.
GOOD
3. Typesetting
Thursday, October 20, 11

27. Measure
THE WIDTH OF A COLUMN OF TEXT
3. Typesetting
Thursday, October 20, 11

28. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend
nibh porttitor.
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl tempor. Suspendisse dictum feugiat nisl ut
dapibus. Mauris iaculis porttitor posuere. Praesent id metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia dui, a.
BAD
3. Typesetting
Thursday, October 20, 11

29. Nullam in dui mauris. Vivamus hendrerit arcu sed Nullam in dui mauris. Vivamus hendrerit arcu sed
erat molestie vehicula. Sed auctor neque eu tellus erat molestie vehicula. Sed auctor neque eu tellus
rhoncus ut eleifend nibh porttitor. rhoncus ut eleifend nibh porttitor.
Ut in nulla enim. Phasellus molestie magna non est Ut in nulla enim. Phasellus molestie magna non est
bibendum non venenatis nisl tempor. Suspendisse bibendum non venenatis nisl tempor. Suspendisse
dictum feugiat nisl ut dapibus. Mauris iaculis dictum feugiat nisl ut dapibus. Mauris iaculis
porttitor posuere. Praesent id metus massa, ut porttitor posuere. Praesent id metus massa, ut
blandit odio. blandit odio.
Proin quis tortor orci. Etiam at risus et justo Proin quis tortor orci. Etiam at risus et justo
dignissim congue. Donec congue lacinia dui, a. dignissim congue. Donec congue lacinia dui, a.
GOOD
3. Typesetting
Thursday, October 20, 11

30. Hierarchy
STRUCTURING YOUR CONTENT
3. Typesetting
Thursday, October 20, 11

31. Heading 1
Heading 2
Heading 3
Heading 4
Heading 5
Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Sed molestie augue sit amet
leo consequat posuere. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.
Nulla facilisi. Duis aliquet egestas purus in blandit. Curabitur vulputate, ligula lacinia scelerisque tempor, lacus lacus
ornare ante, ac egestas est urna sit amet arcu. Class aptent taciti sociosqu.
3. Typesetting
Thursday, October 20, 11

32. Ultra Light
Light
Regular
Medium
Bold
3. Typesetting
Thursday, October 20, 11

33. Type
Measurement
THE SCIENCE BEHIND FONT SIZES
3. Typesetting
Thursday, October 20, 11

34. Points 1 pt = 1/72 of an inch
3. Typesetting
Thursday, October 20, 11

35. Picas 1 pc = 12 points
3. Typesetting
Thursday, October 20, 11

36. Ems 1 em = the horizontal
measurement of type
in relation to point
size; always the same
for all fonts
M M
3. Typesetting
Thursday, October 20, 11

37. Pixels The measurement of
pixels is di erent per
resolution.
3. Typesetting
Thursday, October 20, 11

38. 4. Glyphs
Thursday, October 20, 11

39. Dashes
4. Glyphs
Thursday, October 20, 11

40. - HYPHEN
man-eating
two-hundred-years-old
low-budget
rst-class
son-in-law
4. Glyphs
Thursday, October 20, 11

41. –EN DASH
7:00 – 9:00
Nov 6th – Nov 8th
1955 – 2011
4. Glyphs
Thursday, October 20, 11

42. — EM DASH
Jake designed the whole
site — including email
templates — in order to
add it to his portfolio.
4. Glyphs
Thursday, October 20, 11

43. Ellipsis
4. Glyphs
Thursday, October 20, 11

44. … ELLIPSIS
The army honored the
lost souls … by
saluting.
To be continued…
4. Glyphs
Thursday, October 20, 11

45. Primes vs.
Quotes
4. Glyphs
Thursday, October 20, 11

46. '"
5' 7"
12' x 26' x 39'
PRIMES
4. Glyphs
Thursday, October 20, 11

47. ‘“
“ Stay hungry, stay
foolish.”
QUOTES
4. Glyphs
Thursday, October 20, 11

48. Math
4. Glyphs
Thursday, October 20, 11

49. ½ ½ One half
¼ One quarter
MATH
¾ Three quarters
× Multiply
÷ Divide
4. Glyphs
Thursday, October 20, 11

50. Ligatures
COMBINING TWO CHARACTERS INTO ONE
4. Glyphs
Thursday, October 20, 11

51. fi œ
LIGATURES
æ
4. Glyphs
Thursday, October 20, 11

52. 5. Web
Typography
Thursday, October 20, 11

53. Web-safe
Fonts
FONTS THAT MOST USERS HAVE
5. Web Typography
Thursday, October 20, 11

54. Arial
Courier New
Georgia
Times New Roman
Verdana
5. Web Typography
Thursday, October 20, 11

55. CSS
USING @FONT-FACE
5. Web Typography
Thursday, October 20, 11

56. @FONT-FACE
index.html @font-face {
font-family: Skillshare;
css/ }
src: url('../fonts/Skillshare.otf');
images/ h1 {
fonts/ }
font-family: Skillshare;
5. Web Typography
Thursday, October 20, 11

57. FONT STACKS
font-family: “Helvetica Neue”,
Helvetica, Arial, sans-serif;
5. Web Typography
Thursday, October 20, 11

58. 6. Rules to
Remember
Thursday, October 20, 11

59. Typeface Song vs.
vs. Font MP3
6. Rules to Remember
Thursday, October 20, 11

60. 16px body Nullam in dui mauris. Vivamus hendrerit arcu sed erat
molestie vehicula. Sed auctor neque eu tellus rhoncus ut
eleifend nibh porttitor.
text Ut in nulla enim. Phasellus molestie magna non est
bibendum non venenatis nisl tempor. Suspendisse dictum
feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
Praesent id metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo dignissim
congue. Donec congue lacinia dui, a.
6. Rules to Remember
Thursday, October 20, 11

61. 52 – 78 Sed molestie augue sit amet leo consequat posuere.
Vestibulum ante ipsum primis in faucibus orci luctus et
ultrices posuere cubilia Curae; Proin vel ante a orci tempus
eleifend ut et magna. Lorem ipsum dolor sit amet,
characters consectetur adipiscing elit.
Vivamus luctus urna sed urna ultricies ac tempor dui
sagittis. In condimentum facilisis porta.
Sed nec diam eu diam mattis viverra. Nulla fringilla, orci ac
euismod semper, magna diam porttitor mauris, quis
sollicitudin sapien justo in libero. Vestibulum mollis mauris
enim. Morbi euismod magna ac lorem rutrum elementum.
Donec viverra auctor lobortis.
Pellentesque eu est a nulla placerat dignissim. Morbi a enim
in magna semper bibendum. Etiam scelerisque.
6. Rules to Remember
Thursday, October 20, 11

62. Single space Sed molestie augue sit
amet leo consequat
after period posuere. Vestibulum ante
ipsum primis in faucibus
orci luctus et ultrices.
6. Rules to Remember
Thursday, October 20, 11

63. Hanging Nullam in dui mauris. Vivamus hendrerit arcu sed
erat molestie vehicula. Sed auctor neque eu tellus
rhoncus ut eleifend nibh porttitor.
puncuation • Vivamus luctus
• Urna sed urna
• Altricies ac tempor
“ Nunc eu ullamcorper orci. Quisque eget odio ac
lectus vestibulum faucibus eget in metus. In
pellentesque faucibus vestibulum. Nulla at.”
i. Vivamus luctus
ii. Urna sed urna
iii. Altricies ac tempor
6. Rules to Remember
Thursday, October 20, 11

64. Measure
Nullam in dui mauris. Vivamus hendrerit arcu
sed erat molestie vehicula. Sed auctor neque
eu tellus rhoncus ut eleifend nibh porttitor.
Ut in nulla enim. Phasellus molestie magna
& Leading
non est bibendum non venenatis nisl tempor.
Suspendisse dictum feugiat nisl ut dapibus.
Mauris iaculis porttitor posuere. Praesent id
metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo
dignissim congue. Donec congue lacinia dui, a.
Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor
neque eu tellus rhoncus ut eleifend nibh porttitor.
Ut in nulla enim. Phasellus molestie magna non est bibendum non venenatis nisl
tempor. Suspendisse dictum feugiat nisl ut dapibus. Mauris iaculis porttitor posuere.
Praesent id metus massa, ut blandit odio.
Proin quis tortor orci. Etiam at risus et justo dignissim congue. Donec congue lacinia
dui, a.
3. Typesetting
Thursday, October 20, 11

65. 7. Recap
Thursday, October 20, 11

66. VIDEO TIME!
Thursday, October 20, 11

67. Thursday, October 20, 11

68. Thanks!
@jakeprzespo
jake@skillshare.com
Thursday, October 20, 11