Typography and User Experience

32b34f5d4fdde3f24996bc8c5ec38f10?s=47 Sara Cannon
October 25, 2014

Typography and User Experience

WordCamp San Francisco

Type on the web has many roles: it is an interface, a brand, sets tone, and directs the user. Typography has many roles and can either add or take away from User Experience. In this beautiful and exciting talk we’re going to look at various ways type is used, implemented, and dissect the role that it plays in user experience on the web.

32b34f5d4fdde3f24996bc8c5ec38f10?s=128

Sara Cannon

October 25, 2014
Tweet

Transcript

  1. SARA CANNON HTTP://RAN.GE

  2. Sara Cannon Partner & Creative Director at Range http://ran.ge @saracannon

    slideshare.net/saracannon
  3. “Design is the method of putting form and content together”

    - PAUL RAND
  4. WEB DESIGN IS 95% TYPOGRAPHY - OLIVER REICHENSTEIN

  5. Craigslist

  6. Craigslist Redesign Concept by Lance Culbreth

  7. NYTimes

  8. None
  9. What does Type have to do with User Experience?

  10. BAD TYPOGRAPHY = BAD USER EXPERIENCE

  11. Body copy is too small or unreadable

  12. None
  13. None
  14. Not enough white space

  15. None
  16. None
  17. too much letterspacing on body

  18. “Don’t letterspace the lowercase without a reason… A man who

    would letterspace lowercase would steal sheep … If this wisdom needs updating, it is chiefly to add that a woman who would letterspace lowercase would steal sheep as well” - ROBERT BRINGHURST - “THE ELEMENTS OF TYPOGRAPHICAL STYLE”
  19. None
  20. None
  21. Poor typeface choices

  22. None
  23. None
  24. None
  25. Drudge Report

  26. Drudge Report

  27. Drudge Report

  28. What does Type have to do with User Experience?

  29. GOOD TYPOGRAPHY = GOOD USER EXPERIENCE

  30. “Typography exists to honor content” - ROBERT BRINGHURST- “THE ELEMENTS

    OF TYPOGRAPHICAL STYLE”
  31. gather.ly Adobe Garamond Pro & Freight Sans Pro

  32. Medium

  33. “Contrast is, in my humble opinion, the most crucial tenet

    of graphic design. It forges connections and distinctions between elements.” - JASON SANTAMARIA - “ON WEB TYPOGRAPHY”
  34. Medium

  35. Medium

  36. AdAge

  37. nautil.us

  38. IN COMMUNICATION type

  39. “All design work seems to have three common traits: there

    is the message to the work, the tone of that message, and the format the work takes” - FRANK CHIMERO
  40. rsq.com

  41. Moon Camp

  42. WhoaNellyCatering.com

  43. Digital Storytelling

  44. nytimes.com/projects/2012/snow-fall

  45. theguardian.com/world/interactive/2013/nov/01/snowden- nsa-files-surveillance-revelations-decoded

  46. pitchfork.com/features/articles/9467-wax-and-wane-the- tough-realities-behind-vinyls-comeback

  47. http://aquatilis.tv

  48. IN NAVIGATION & PREFORMING TASKS type

  49. Hyperlink Button hyperlink

  50. None
  51. None
  52. None
  53. None
  54. None
  55. None
  56. None
  57. None
  58. None
  59. None
  60. None
  61. Design, Develop, Measure

  62. “Design and product process must change to accommodate experimentation” -

    DAN MCKINLEY, ETSY -
  63. Get type into the browser early as possible

  64. OPEN type & CSS

  65. Ligatures font-feature-settings:"liga" 1;

  66. Ligatures -moz-font-feature-settings:"liga" 1; -moz-font-feature-settings:"liga=1"; -ms-font-feature-settings:"liga" 1; -o-font-feature-settings:"liga" 1; -webkit-font-feature-settings:"liga" 1;

    font-feature-settings:"liga" 1; .h1 { }
  67. Number Case: Lining (lnumb) font-feature-settings:"lnum" 1;

  68. Tabular Figures (monospace) font-feature-settings: "tnum" 1;

  69. Fractions font-feature-settings:"frac" 1;

  70. Alternative Style Sets font-feature-settings: "ss01" 1;

  71. Small Caps font-feature-settings: "smcp" 1;

  72. clagnut.com/sandbox/css3

  73. COMBINING type

  74. femmebot.github.io/google-type

  75. femmebot.github.io/google-type

  76. abookapart.com/products/on-web-typography

  77. The Elements of Typographical Style Robert Bringhurst

  78. The Shape of Design - Frank Chimero

  79. LEGIBILITY

  80. Thank You @saracannon slideshare.net/saracannon SARA CANNON HTTP://RAN.GE