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.

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. type
IN COMMUNICATION

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. type
IN NAVIGATION &
PREFORMING TASKS

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