Font Swoon - WordCamp ATL 2012

In Font Swoon we will not only take a great look at some cool and inspiring fonts and implementations, but an in-depth look at advanced type techniques using CSS3 as well as basic implementation. A type nerd must see.

Transcript

1. @saracannon sara-cannon.com Font Swoon ...
2. Sara Cannon slideshare.net/saracannon Freelance Artist, Designer, & WordPress Developer living in Birmingham, AL @saracannon
3. #fontswoon
4. Web Design is 95% Typography informationarchitects.jp/en/the-web-is-all-about-typography-period
6. Web Examples
7. trentwalton.com/2011/05/10/fit-to-scale
8. Liquor Store FF Meta Serif
9. jaxvineyards.com
10. FF Din FF Tisa
11. browsehappy.com
12. League Gothic Le Monde Courrier
13. designmadeingermany.de/magazin/5
14. FF Din
15. Fonts! Fonts! Fonts!
16. Slab-Serif
17. Arvo @ font-face Made By: Anton Kovit files.korkork.com
19. Archer Made By: H&FJ typography.com
21. Adelle @ font-face Made By: Type Together type-together.com
23. Cambria @ font-face Made By: Ascender Fonts ascenderfonts.com
25. Clarendon @ font-face Made By: Bitstream bitstream.com
27. Chaparral Pro @ font-face Made By: Adobe adobe.com
29. Droid Serif @ font-face Made By: Google code.google.com/android
31. Museo Slab @ font-face Made By: exljbris exljbris.com
33. Vitesse Made By: H&FJ typography.com
35. Sans-Serif
36. Avenir Made By: Adrian Frutiger Linotype.com
38. Droid Sans @ font-face Made By: Google code.google.com/android
40. Brandon Grotesque @ font-face Made By: HVD hvdfonts.com
42. DIN @ font-face Made By: Linotype linotype.com
44. Futura @ font-face Made By: BitStream Adobe.com
46. Gotham Made By: H&FJ typography.com
48. Proxima Nova @ font-face Made By: Mark Simonson ms-studio.com
50. Omnes Made By: Joshua Darden dardenstudio.com @ font-face
52. Display Type
53. Mensch @ font-face Made By: Morgan Kuntson los ype.com
54. LEAGUE GOTHIC @ font-face Made By: The League of Moveable Type theleagueofmoveabletype.com
56. Bello Script @ font-face Made By: Underware underware.nl
57. Franchise Made By: Derek Weathersbee los ype.com
58. Homestead @ font-face Made By: Luke Lisi los ype.com
59. Ranger Made By: Evan Huwa los ype.com
60. Type Foundries
61. Lost Type los ype.com
63. exljbris exljbris.com
65. font font font-font.com
67. H&FJ typography.com
69. League of Moveable Type theleagueofmoveabletype.com
71. Open Source! Ofl (open Font License) theleagueofmoveabletype.com/manifesto
72. House Industries houseind.com
74. ARS Type arstype.angusrshamal.com
76. Craft You CSS
91. Beyond the System Font!
94. @font-face
95. Hand Code Typekit Or Other Paid Hosts Google Api
96. Paulirish.com/2009/ bulletproof-font-face- implementation-syntax/
97. Fontsquirrel.com
98. sprungmarker.de/wp-content/uploads/webfont-services
99. typekit.com
101. Test & Tweak
102. check all browsers
103. TYPE CRUNCH!!!
105. Disable for IE
106. Disable for Windows
107. Disable for Firefox
108. Firefox on all of Windows
109. Chrome on Windows XP getting around cache style.css custom.js
110. Neat Type Scripts
111. Lettering.js le eringjs.com
115. kern.js kernjs.com
117. FitText fi extjs.com
119. Neat Type Scripts
120. WP Typography wordpress.org/extend/plugins/wp-typography
122. Drop Caps wordpress.org/extend/plugins/drop-caps/
124. Other Must Havesies
125. What Font chengyinliu.com/whatfont.html
127. valiocon.com live example:
128. Google Font Previewer github.com/pamelafox/font-previewer-extension
130. MIN min.artequalswork.com
133. Follow the Industry
134. Follow The Industry @JasonSantaMaria @veen @brucel @ilovetypography @jessicahische @fontsquirrel @typekit @h_ @clagnut @fchimero
135. blog.typekit.com
137. Find Inspiration
138. ilovetypography.com
140. webtypography.net
142. typographica.org
144. fontsinuse.com
146. friendsoftype.com
148. typography-daily.com
150. siteinspire.net
152. typographyserved.com
154. ministryoftype.co.uk
156. dribbble.com
158. wordpress.org/showcase
160. life is short, art is long Typography is Everything. code is poetry.
161. @saracannon sara-cannon.com #fontswoon