More Than Type

The typographic landscape on the web today would have been unrecognizable to a designer in 2009. “Web-safe fonts” were the rule of the land, and web fonts were a technical eccentricity, hobbled by problems with licensing, availability, and technology. From that environment, Typekit set out to build a business bringing commercial type to the web, and in the four years since then, the industry has tackled those problems. But in the process, Typekit discovered that their customers needed more than just access to good type. Sean will tell the story of how Typekit has approached those broader customer needs, and the successes and mistakes made along the way. The impact touches every aspect of Typekit’s business, from the way they sell the product to how they do editorial and support. Type has finally arrived on the web; now we must give customers the confidence to use type well.

Presented at TYPO SF on April 12, 2013.

Transcript

1. Type MORE THAN #typo13 #more @smcbride
2. Sean McBride Engineer & Product Developer User Experience Web Developer
3. ?
4. #typo13 #more @smcbride
5. Before The Web Untitled by neil conway on Flicker
6. 600 Y E A R S O F T Y P O G R A P H Y
7. Thousands of Fonts
8. 1993 No fonts
9. 2008 18 fonts
13. @font-face
14. May 2009 Typekit
18. Browser compatibility Licensing concerns Building the font library Designer workflow Web font formats and protection Font rendering quality Basic functionality
19. May 2010 Gallery
21. Amazement “Wow, I can actually use real fonts on my website!” Anticipation “Just think of all the great things I can do with these fonts!” Paralysis “Wait, I’ve only ever used Verdana and Georgia in my work!” More Than Type Inspiration Paralysis “Wait, I’ve only ever used Verdana and Georgia in my work!”
22. Physiological Safety Love + belonging Esteem Self-actualization Food, water, shelter, clothing, sleep, comfort Personal and financial security, health, order, law Friendship, love, intimacy, family, community Achievement, status, confidence Peace, growth, knowledge
23. Functionality Reliability Usability Proficiency Creativity Design works and meets basic functional needs Stable and consistent performance Forgiving and easy to use Empower users to do more + better Beauty, innovation http://www.smashingmagazine.com/2010/04/26/designing-for-a-hierarchy-of-needs/
24. Functionality Reliability Usability Proficiency Creativity Design works and meets basic functional needs Stable and consistent performance Forgiving and easy to use Empower users to do more + better Beauty, innovation More Than Type
25. Choosing fonts Browsing
26. May 2009
28. June 2010
29. Sorting options Different view options Change sample text Functionality Reliability Usability Proficiency Creativity Usability
30. October 2011
31. Understand categories and aspects of fonts How are fonts different from one another? Recommended uses Quickly narrow and expand set, encourage play Functionality Reliability Usability Proficiency Creativity Proficiency
33. Categories and properties are useful, but what about the fun and whimsy of tags?
34. January 2012
37. Explore related groups of typefaces Browse curated lists with editorial content Learn about when to use certain styles Understand how typefaces relate to each other Functionality Reliability Usability Proficiency Creativity Creativity Proficiency
38. March 2012
40. Find a particular typeface Find similar typefaces through lists and posts Find inspiration for using a typeface from the blog Find typefaces that fit a theme Functionality Reliability Usability Proficiency Creativity Creativity Proficiency
41. Surface content in multiple ways Structured metadata can teach Curated collections can teach and inspire Font Browsing
42. Education and inspiration The Blog
44. February 2010 Tim Brown
45. July 2010
46. August 2010 Mandy Brown
47. Blog Series Type Rendering
48. October 2010
49. October 2010
50. November 2010
51. December 2010
52. December 2010
53. December 2010
54. Blog Series Type Studies
55. January 2011
58. March 2011
60. March 2011
63. Blog Series About Face
64. August 2011
67. July 2012
70. May 2012
75. Eventually Hybrid Formats
76. March 2012
78. May 2012
81. July 2012 Functionality Reliability Usability Proficiency Creativity Creativity Proficiency Get inspired by typefaces in use Learn about techniques for using type better Find related typefaces that pair well together Learn how to analyze a typeface’s design
82. Good content requires planning Get experts to write what they know Content can teach, inspire, and inform The Blog Give people ideas and the tools to try them
83. Back to the Beginning
84. At first, delivering fonts seemed like the challenge
85. Once the fonts were available, other challenges presented themselves
86. Web designers come from many backgrounds and they don’t all know how to use type
87. Typography has never been so accessible
88. Typography has never been so valuable
89. In order to unlock the value of type, we had to provide more than type
90. Knowledge about why type is important Frameworks for choosing and using type Inspiration for using type well Confidence to step outside the comfort zone
91. These lessons are applicable to more than type
92. Knowledge How does history relate? Frameworks What are the ways it can be used? Inspiration Who’s using it, and how? Confidence How can we lower barriers to entry?
93. Functionality Reliability Usability Proficiency Creativity Design works and meets basic functional needs Stable and consistent performance Forgiving and easy to use Empower users to do more + better Beauty, innovation “More Than” UX More Than Type
94. Thank you!
95. Type MORE THAN #typo13 #more @smcbride