Typography: It's Design from Print to Web

A workshop I did at #convergese - it covers why webfonts are integral to the web and gets into how you can make your own font using Glyphs.

Transcript

2. Beer & Why It’s Great
3. Faux Chest Hair & Its Effects on Women
4. Why Short People Are Better Than Everyone Else
5. I Wore A Leotard This One Time
6. Designing Naked & Its Effects on Marital Intimacy
7. Typography Its Design from Print to Web
8. Chandler Van De Water • Columbia Native • BEER • Virgin ConvergeSE • Testosterone Shots (the needle kind) • 3.5 Years Married • I’ve lost 18 pounds this year • Cubano
9. Chandler Van De Water • Columbia Native • BEER • Virgin ConvergeSE • Testosterone Shots (the needle kind) • 3.5 Years Married • I’ve lost 18 pounds this year • Cubano
10. Type
11. Typography
12. CSS @font-face
13. Make A Font!
14. Workshop
17. Web Typography
18. @font-face
19. Glyphs glyphsapp.com “Download Trial” on the right http://via.chandlervdw.com/GAuL
20. Glyphs glyphsapp.com “Download Trial” on the right http://via.chandlervdw.com/GAuL
21. Why Webfonts?
22. Print
23. Integral to the Web?
25. Errrbody Use Me!!!1!
29. Accessibility
30. SEO
31. Mobile
33. http://via.chandlervdw.com/GDPP
36. Images
37. <img src=“bozo.png” />
38. <h1>
39. <img> <h1>
40. <img> <h1> WEBFONTS
45. Powerful
46. Responsive Design
48. Math
49. Boz Bozo
50. Responsive ✓ Retina Display ✓
51. Future-Proof (not real)
53. Icons
55. Pictos www.pictos.cc
56. Smaller
58. DIY
59. Glyphs glyphsapp.com “Download Trial” on the right
60. CUBANO losttype.com cubano.chandlervdw.com
61. @chandlervdw i think it’s great, but you only asked whether it sucked. So I replied truthfully. Erik Spiekermann @espiekermann
62. CUBANO
63. MAKE YOUR OWN FONT
64. Good Products = Hard Work
65. Unique
66. “Impression Writing” typos = “impression” graphia = “writing”
67. Nuance
68. CUBANO
69. Glyphs glyphsapp.com “Download Trial” on the right
70. Sketch First
71. Type Creation Process
74. I H T L E F N M W V K Y X Z
75. WORK WHEN INSPIRED
76. O Q C G D
77. Optical Correction
78. P B R
80. Pointers • Draw “sharp” versions first • Utilize different shapes, not a single, large shape • Interpolation • User Manual - via.chandlervdw.com/G8tE
81. Typographic Features
82. Optical Correction
83. Flag
84. Aperture
85. Tilted Axis
86. Bilateral Serifs
87. TypographyDeconstructed.com
88. Kerning
89. Berthold Akzidenz Grotesk
90. Grotesque Butthole Accidents
91. Kerning Pairs Kerning Groups
92. DO NOT FIX INCONSISTENT SPACING WITH KERNING
93. Kerning Groups H, P, I, K, L, R
95. http://type.method.ac
96. OMG
97. Perfection
98. Font.otf
99. FontSquirrel.com fontsquirrel.com/fontface/generator
100. Font.eot Font.svg Font.ttf Font.woff
101. @font-face
102. @font-face { font-family: 'MyFontFamily'; src: url('myfont-webfont.eot?#iefix') format('embedded-opentype'), url('myfont-webfont.woff') format('woff'), url('myfont-webfont.ttf') format('truetype'), url('myfont-webfont.svg#svgFontName') format('svg'); } .myfont { font-family: 'MyFontFamily'; } “Fontspring @font-face syntax”
103. <h1 class=“myfont”>
104. via.chandlervdw.com/GBuG