Reading Typography—Writing Typography

16,699 views

Published on

What makes us read and what makes us write on screen devices?

Published in: Education, Design

Reading Typography—Writing Typography

  1. 1. Reading TypographyWriting Typography?
  2. 2. Typography:The writing of shapes?
  3. 3. Typography:The shape of writing?
  4. 4. Before the Law
  5. 5. “Before the law sits a gatekeeper. To this gatekeeper comes a man from the country who asks to gain entry into the law. But the gatekeeper says that he cannot grant him entry at the moment.” —Franz Kafka
  6. 6. As a philosophy student I thoughtthat “The Law” is the law of thetext, in other words: “Rhetoric.”
  7. 7. 15 years later...
  8. 8. I believe that“Rhetoric” is to speaking what“Typography” is to writing.
  9. 9. Inside The Law...
  10. 10. “Typography has one plain duty before it and that is to convey information in writing.” —Emil Ruder, 1969
  11. 11. The form in in-formation madeconscious (and consciously made)in order to convince.
  12. 12. ReadingTypography WritingInformation
  13. 13. Typography is visualizinginformation. Webdesign is...
  14. 14. 5 rules for 95% of Web Design
  15. 15. 1. Relative font size
  16. 16. 2. Active white space
  17. 17. 3. Screen friendly line height
  18. 18. 4. Clear color contrast
  19. 19. 5. Discern text and images
  20. 20. What about the other 5%?
  21. 21. Web design is 95% typography anda little bit of interface design
  22. 22. Eye Read Think NavigateText Hand
  23. 23. Interface DesignInformation Design TypographyInteraction Design ChessInformation Architecture Philosophy
  24. 24. “Typography has one plain duty before it and that is to convey information in writing.” —Emil Ruder, 1969
  25. 25. How much reading is in writing?
  26. 26. Eye Read Think WriteText Navigate Hand
  27. 27. Same Rules...
  28. 28. 1. Relative font size
  29. 29. 2. Active white space
  30. 30. 3. Screen friendly line height
  31. 31. 4. Clear color contrast
  32. 32. 5. Discern text and images
  33. 33. What’s different?
  34. 34. 6. Monospaced (light) font
  35. 35. Why monospaced?
  36. 36. Why light?
  37. 37. 7. Soup Nazi
  38. 38. The Soup Nazi Rules
  39. 39. Yes?
  40. 40. A. No Navigation!
  41. 41. B. No Settings!
  42. 42. C. No Noise!
  43. 43. D. No Mouse!
  44. 44. E. No Fumbling With Type!
  45. 45. F. No Bread for You!
  46. 46. Next!
  47. 47. (Thank you)

×