Diese Präsentation wurde erfolgreich gemeldet.
Die SlideShare-Präsentation wird heruntergeladen. ×

An Introduction to Sensible Typography

Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Anzeige
Nächste SlideShare
10 tips for ppt
10 tips for ppt
Wird geladen in …3
×

Hier ansehen

1 von 77 Anzeige

An Introduction to Sensible Typography

Herunterladen, um offline zu lesen

A talk that covers typography topics from font choice to proper quotation mark usage. Learn how to become a better typographer and improve your web presentation.

Satisfaction 100% guaranteed by James Wu.

A talk that covers typography topics from font choice to proper quotation mark usage. Learn how to become a better typographer and improve your web presentation.

Satisfaction 100% guaranteed by James Wu.

Anzeige
Anzeige

Weitere Verwandte Inhalte

Ähnlich wie An Introduction to Sensible Typography (20)

Anzeige

Weitere von UCLA Association of Computing Machinery (17)

Aktuellste (20)

Anzeige

An Introduction to Sensible Typography

  1. 1. TYPOGRAPHY AN INTRODUCTION TO SENSIBLE A UCLA ACM PRODUCTION
  2. 2. YOUR HOST
  3. 3. WHY SHOULD I CARE?
  4. 4. WHAT IS TYPOGRAPHY? • Text is words
  5. 5. WHAT IS TYPOGRAPHY? • Text is words • Visual text involves typography
  6. 6. WHAT IS TYPOGRAPHY?
  7. 7. WHAT IS TYPOGRAPHY? • Text is words • Visual text involves typography • Typography is NOT just fonts!
  8. 8. WHY DOES IT MATTER? • Reader attention
  9. 9. WHY DOES IT MATTER? • Reader attention • Readers do not want to read
  10. 10. TYPOGRAPHY DOES NOT MAKE YOUR WRITING BETTER
  11. 11. –You, presumably “But James, I don’t know design!”
  12. 12. WHY DOES IT MATTER?
  13. 13. WHY DOES IT MATTER? • Reader attention • Readers do not want to read • Typography already matters to you
  14. 14. TYPOGRAPHY ISN’T REQUIRED, BUT NEITHER IS SHOWERING
  15. 15. WHAT IS GOOD? • Typography is utilitarian
  16. 16. WHAT IS GOOD? • Typography is utilitarian • There is more than one correct answer
  17. 17. WHAT IS GOOD? • Typography is utilitarian • There is more than one correct answer • Good typography can be ugly
  18. 18. –Some famous designer dude “Good design is invisible.”
  19. 19. HOW TO GET GOOD
  20. 20. BAD TYPOGRAPHY HABITS
  21. 21. FIVE RULES
  22. 22. 1 BODY TEXT
  23. 23. 2 POINT SIZE
  24. 24. 3LINE SPACING
  25. 25. 4 LINE LENGTH
  26. 26. 5FONT CHOICE
  27. 27. COMPOSITION
  28. 28. QUOTATION MARKS • Straight quotation marks are what you get from the apostrophe key • Curly quotation marks are what you get from being good
  29. 29. QUOTATION MARKS '' "" ‘’ “”
  30. 30. QUOTATION MARKS ‘ “ ’ ”
  31. 31. QUOTATION MARKS • Straight quotation marks are what you get from the apostrophe key • Curly quotation marks are what you get from good typography
  32. 32. ONE SPACE • Always put one space between sentences
  33. 33. PARENTHESES, ETC. • Parentheses, brackets, and braces should not take formatting of surrounded material
  34. 34. 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)]
  35. 35. HYPHENS/DASHES • Not interchangeable
  36. 36. HYPHENS/DASHES - hyphen – en-dash – — em-dash —
  37. 37. HYPHENS/DASHES — em-dash -- NOT an em-dash
  38. 38. HYPHENS/DASHES — em-dash -- NOT an em-dash BAD NO STOP
  39. 39. SPACES • Nonbreaking spaces exist. Please don’t abuse them.
  40. 40. FORMATTING
  41. 41. UNDERLINING • Never underline in a printed document
  42. 42. UNDERLINING • Never underline in a printed document • It’s okay to underline links
  43. 43. SILLY FONTS James Wu JamesWu James Wu JamesWu James Wu
  44. 44. MONOSPACED • Only use in code
  45. 45. SYSTEM FONTS • are bad
  46. 46. SYSTEM FONTS • are bad • are overexposed
  47. 47. WAIT, WHAT
  48. 48. BOLD OR ITALIC • Mutually exclusive
  49. 49. BOLD OR ITALIC • Mutually exclusive • Use for emphasis
  50. 50. –Syndrome “Everyone can be super! And when everyone’s super, no one will be.”
  51. 51. BOLD OR ITALIC • Mutually exclusive • Use for emphasis • Italic for soft emphasis, bold for heavy
  52. 52. BOLD OR ITALIC • Mutually exclusive • Use for emphasis • Italic for soft emphasis, bold for heavy • With sans-serif fonts, use bold for both
  53. 53. ALL CAPS • Use sparingly
  54. 54. 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?
  55. 55. 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
  56. 56. KERNING
  57. 57. LETTERSPACING • CSS letter-spacing • If you can fit another character in the space, it’s too wide
  58. 58. FONT MIXING • Never required
  59. 59. FONT MIXING • Never required • Diminishing returns
  60. 60. FONT MIXING • Never required • Diminishing returns • Any two different fonts are valid
  61. 61. FONT MIXING • Never required • Diminishing returns • Any two different fonts are valid • Different fonts for different roles
  62. 62. OKAY, BUT WHAT FONT SHOULD I USE?
  63. 63. NOTHING BEATS PROFESSIONAL
  64. 64. FONTS 101 • Anyone can appreciate a professional font
  65. 65. FONTS 101 • Anyone can appreciate a professional font • Fonts cost money
  66. 66. FONTS 101 • Anyone can appreciate a professional font • Fonts cost money • Respect the license
  67. 67. SANS-SERIF Proxima Nova DIN Pro Futura Metro Nova Pro Avenir
  68. 68. SERIF Grandesign Neue Serif Roboto Slab Quattrocento
  69. 69. MONOSPACED CamingoCode Fantasque Sans Mono Monaco Inconsolata
  70. 70. BAD FONTS
  71. 71. GOOD FREE FONTS The Lost Type Co-op The League of Moveable Type
  72. 72. ADDENDUM: LINE WIDTH
  73. 73. DO NOT FEAR WHITESPACE
  74. 74. THANK YOU TWEET ME @ZEKANOSHI

×