This document provides an introduction to typography. It defines typography as involving more than just fonts and discusses why typography is important for maintaining reader attention. The document then provides guidelines for good typography, including using appropriate font sizes, line spacing, and line lengths. It also discusses font choices, formatting styles like quotation marks and hyphens/dashes, and techniques like font mixing and using bold or italic for emphasis. Specific free and paid font recommendations are also provided.

1. TYPOGRAPHY
AN INTRODUCTION TO SENSIBLE
A UCLA ACM PRODUCTION

2. YOUR HOST

3. WHY SHOULD I
CARE?

4. WHAT IS TYPOGRAPHY?
• Text is words

5. WHAT IS TYPOGRAPHY?
• Text is words
• Visual text involves typography

6. WHAT IS TYPOGRAPHY?

7. WHAT IS TYPOGRAPHY?
• Text is words
• Visual text involves typography
• Typography is NOT just fonts!

8. WHY DOES IT MATTER?
• Reader attention

9. WHY DOES IT MATTER?
• Reader attention
• Readers do not want to read

10. TYPOGRAPHY DOES
NOT MAKE YOUR
WRITING BETTER

11. –You, presumably
“But James, I don’t know design!”

12. WHY DOES IT MATTER?

13. WHY DOES IT MATTER?
• Reader attention
• Readers do not want to read
• Typography already matters to you

14. TYPOGRAPHY ISN’T
REQUIRED, BUT
NEITHER IS SHOWERING

16. WHAT IS GOOD?
• Typography is utilitarian

17. WHAT IS GOOD?
• Typography is utilitarian
• There is more than one correct answer

18. WHAT IS GOOD?
• Typography is utilitarian
• There is more than one correct answer
• Good typography can be ugly

19. –Some famous designer dude
“Good design is invisible.”

20. HOW TO GET
GOOD

21. BAD TYPOGRAPHY
HABITS

22. FIVE RULES

23. 1 BODY TEXT

24. 2 POINT SIZE

25. 3LINE SPACING

26. 4 LINE LENGTH

27. 5FONT CHOICE

28. COMPOSITION

29. QUOTATION MARKS
• Straight quotation marks are what you get from the
apostrophe key
• Curly quotation marks are what you get from being
good

30. QUOTATION MARKS
''
""
‘’
“”

31. QUOTATION MARKS
‘
“
’
”

32. QUOTATION MARKS
• Straight quotation marks are what you get from the
apostrophe key
• Curly quotation marks are what you get from good
typography

33. ONE SPACE
• Always put one space between sentences

34. PARENTHESES, ETC.
• Parentheses, brackets, and braces should not take
formatting of surrounded material

35. PARENTHESES, ETC.
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]
[LA Hacks OST (feat. LA Hacks)]

36. HYPHENS/DASHES
• Not interchangeable

37. HYPHENS/DASHES
-
hyphen
–
en-dash
–
—
em-dash
—

38. HYPHENS/DASHES
—
em-dash
--
NOT an em-dash

39. HYPHENS/DASHES
—
em-dash
--
NOT an em-dash
BAD
NO
STOP

40. SPACES
• Nonbreaking spaces exist. Please don’t abuse them.

41. FORMATTING

42. UNDERLINING
• Never underline in a printed document

43. UNDERLINING
• Never underline in a printed document
• It’s okay to underline links

44. SILLY FONTS
James Wu
JamesWu
James Wu
JamesWu
James Wu

45. MONOSPACED
• Only use in code

46. SYSTEM FONTS
• are bad

47. SYSTEM FONTS
• are bad
• are overexposed

48. WAIT, WHAT

49. BOLD OR ITALIC
• Mutually exclusive

50. BOLD OR ITALIC
• Mutually exclusive
• Use for emphasis

51. –Syndrome
“Everyone can be super! And when
everyone’s super, no one will be.”

52. BOLD OR ITALIC
• Mutually exclusive
• Use for emphasis
• Italic for soft emphasis, bold for heavy

53. BOLD OR ITALIC
• Mutually exclusive
• Use for emphasis
• Italic for soft emphasis, bold for heavy
• With sans-serif fonts, use bold for both

54. ALL CAPS
• Use sparingly

55. ALL CAPS
CAPITALIZING FULL PARAGRAPHS IS BAD. WHY DO
YOU STILL HAVE CAPS LOCK ENABLED ANYWAY.
REMAP THAT TO CONTROL OR SOMETHING. IT’S
BETTER FOR CODING. THIS IS EVEN HARDER TO
READ WHEN IT’S BOLDED. ARE YOU HAVING FUN
READING THIS? ARE YOU HAVING FUN YET?

56. HEADERS
• ALL CAPS is okay for short ones
• Don’t Use Title Case
• Don’t underline
• Emphasize by adding margins
• Use bold over italic
• Don’t make too much larger than body

57. KERNING

58. LETTERSPACING
• CSS letter-spacing
• If you can fit another character in the space, it’s too
wide

59. FONT MIXING
• Never required

60. FONT MIXING
• Never required
• Diminishing returns

61. FONT MIXING
• Never required
• Diminishing returns
• Any two different fonts are valid

62. FONT MIXING
• Never required
• Diminishing returns
• Any two different fonts are valid
• Different fonts for different roles

63. OKAY, BUT WHAT
FONT SHOULD I USE?

64. NOTHING BEATS
PROFESSIONAL

65. FONTS 101
• Anyone can appreciate a professional font

66. FONTS 101
• Anyone can appreciate a professional font
• Fonts cost money

67. FONTS 101
• Anyone can appreciate a professional font
• Fonts cost money
• Respect the license

68. SANS-SERIF
Proxima Nova
DIN Pro
Futura
Metro Nova Pro
Avenir

69. SERIF
Grandesign Neue Serif
Roboto Slab
Quattrocento

70. MONOSPACED
CamingoCode
Fantasque Sans Mono
Monaco
Inconsolata

71. BAD FONTS

72. GOOD FREE FONTS
The Lost Type Co-op The League of Moveable Type

73. ADDENDUM:
LINE WIDTH

75. DO NOT FEAR
WHITESPACE

77. THANK YOU
TWEET ME @ZEKANOSHI