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.

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
9. What does Type have to do with User Experience?
10. BAD TYPOGRAPHY = BAD USER EXPERIENCE
11. Body copy is too small or unreadable
14. Not enough white space
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”
21. Poor typeface choices
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
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