Get the Look

An expanded version of my Get the Look talk. The original version was given on Saturday, 10 March 2012 at SxSW. I take 3 real-life examples of iconic design styles and explore what it takes to translate the original design idea to the web. Along the way, I explore fun CSS3 properties and how they can be used for great typography online that respects our design roots. In the expanded version, I add more examples and CSS, and I also look at an example that didn't turn out so well.

Transcript

1. View Slide

2. View Slide

3. View Slide

4. Get the
   LOOK
   Use font-face & CSS3 Like the Stars
   @smcbride – sean@typekit.com – seanmcb.com/get-the-look
   

   View Slide

5. @smcbride
   sean@typekit.com
   

   View Slide

6. SEAN
   McBRIDE
   

   View Slide

7. SEAN
   McBRIDE
   Engineer & Web Developer
   

   View Slide

8. SEAN
   McBRIDE
   Engineer & Web Developer
   User Experience Web Developer
   

   View Slide

9. ?
   

   View Slide

10. View Slide

11. View Slide

12. Star’s look
    

    View Slide

13. Star’s look
    Your look
    (On a budget)
    

    View Slide

14. View Slide

15. Classic look
    

    View Slide

16. Classic look
    Your look
    (On the web)
    

    View Slide

17. HAND-PAINTED
    SIGNS
    

    View Slide

18. WOOD TYPE POSTERS
    

    View Slide

19. MAGAZINE
    SPREAD
    

    View Slide

20. CSS3
    

    View Slide

21. CSS3
    @font-face
    @media
    background-size
    :before/:after
    column-count
    rgba
    text-shadow
    transform
    

    View Slide

22. View Slide

23. Examples on GitHub
    github.com/seanami/get-the-look-examples
    

    View Slide

24. View Slide

25. “How do I translate a
    CLASSIC LOOK
    into a web page?”
    

    View Slide

26. View Slide

27. Ideas Forms
    

    View Slide

28. Jonathan
    Hoefler
    Pivot: AIGA Design Conference
    15 October 2011
    

    View Slide

29. Idea DESIGN
    SYSTEM
    Form
    

    View Slide

30. DESIGN
    SYSTEM
    

    View Slide

31. DESIGN
    SYSTEM
    

    View Slide

32. The NY
    Times
    DESIGN
    SYSTEM
    

    View Slide

33. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM
    

    View Slide

34. The NY
    Times
    DESIGN
    SYSTEM
    DESIGN
    SYSTEM
    

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. DESIGN
    SYSTEM
    

    View Slide

39. Bohemian
    Ensemble
    DESIGN
    SYSTEM
    

    View Slide

40. DESIGN
    SYSTEM
    Bohemian
    Ensemble
    DESIGN
    SYSTEM
    

    View Slide

41. View Slide

42. Original
    Form
    

    View Slide

43. Original
    Form
    New
    Form
    

    View Slide

44. Original
    Form
    New
    Form
    

    View Slide

45. DESIGN
    SYSTEM
    Original
    Form
    New
    Form
    

    View Slide

46. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    New
    Form
    

    View Slide

47. Original
    Idea
    DESIGN
    SYSTEM
    Original
    Form
    DESIGN
    SYSTEM
    New
    Form
    

    View Slide

48. View Slide

49. Hand-Painted
    SIGNS
    

    View Slide

50. View Slide

51. View Slide

52. View Slide

53. View Slide

54. blog.typekit.com/2011/07/19/shading-with-css-text-shadows
    

    View Slide

55. View Slide

56. View Slide

57. DESIGN
    SYSTEM
    

    View Slide

58. Idea DESIGN
    SYSTEM
    

    View Slide

59. Idea
    PAINTING
    WOOD/BRICK
    THE ELEMENTS
    

    View Slide

60. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    PAINTING
    WOOD/BRICK
    THE ELEMENTS
    

    View Slide

61. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    DESIGN
    SYSTEM
    

    View Slide

62. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    DESIGN
    SYSTEM
    

    View Slide

63. Eye-catching
    Hand lettering
    Shades/shapes
    Weathered
    FONT-FACE
    TEXT-SHADOW
    MASK (WEBKIT)
    

    View Slide

64. View Slide

65. View Slide

66. @font-face
    

    View Slide

67. @font-face Web fonts – Working Draft Global Support – 89%
    

    View Slide

68. @font-face Web fonts – Working Draft Global Support – 89%
    caniuse.com
    

    View Slide

69. View Slide

70. @font-face
    @font-face {
    font-family: 'my-family';
    src: url('/url/of/font.woff');
    style: normal;
    weight: 400;
    }
    

    View Slide

71. @font-face
    @font-face {
    font-family: 'my-family';
    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');
    style: normal;
    weight: 400;
    }
    

    View Slide

72. @font-face
    
    try{Typekit.load();}catch(e){}
    

    View Slide

73. View Slide

74. from Veer
    from Underware
    

    View Slide

75. View Slide

76. View Slide

77. View Slide

78. .sign h1 .name {
    transform: rotate(-12deg);
    }
    CSS3 Transform
    

    View Slide

79. View Slide

80. View Slide

81. 
    ...
    
    try{Typekit.load();}catch(e){}
    ...
    
    

    View Slide

82. View Slide

83. View Slide

84. .sign h1 .name {
    font: 400 normal 20em/1 cursive;
    }
    .sign h1 .welcome, .sign h2 {
    font: 400 normal 7em/1 sans-serif;
    }
    

    View Slide

85. .sign h1 .name {
    font: 400 normal 20em/1 “corner-store”, cursive;
    }
    .sign h1 .welcome, .sign h2 {
    font: 400 normal 7em/1 “bello-caps”, sans-serif;
    }
    

    View Slide

86. View Slide

87. View Slide

88. .sign h1 .name:first-letter {
    font-size: 1.2em;
    }
    

    View Slide

89. View Slide

90. View Slide

91. text-shadow
    

    View Slide

92. text-shadow
    text-shadow: 2px 4px 6px #000;
    

    View Slide

93. text-shadow
    text-shadow: 2px 4px 6px #000;
    text-shadow: 2px 4px 0 #000, 4px 8px 0 #fff, ...;
    

    View Slide

94. CSS3 Text-shadow – Working Draft Global Support – 61%
    

    View Slide

95. View Slide

96. View Slide

97. View Slide

98. PROGRESSIVE
    ENHANCEMENT
    

    View Slide

99. .sign h1 .name {
    text-shadow: -8px 8px 0 #b06955;
    }
    

    View Slide

100. .sign h1 .name {
     text-shadow: -8px 8px 0 #b06955;
     }
     Horizontal
     

     View Slide

101. .sign h1 .name {
     text-shadow: -8px 8px 0 #b06955;
     }
     Vertical
     

     View Slide

102. .sign h1 .name {
     text-shadow: -8px 8px 0 #b06955;
     }
     Blur
     

     View Slide

103. .sign h1 .name {
     text-shadow: -8px 8px 0 #b06955;
     }
     Color
     

     View Slide

104. View Slide

105. View Slide

106. .sign h1 .name {
     text-shadow: -3px 3px 0 #393431,
     -8px 8px 0 #b06955;
     }
     

     View Slide

107. View Slide

108. View Slide

109. .sign h1 .name {
     text-shadow: -3px 3px 0 #393431,
     0 3px 0 #393431,
     -3px 0 0 #393431,
     -4px 4px 0 #b06955,
     -6px 6px 0 #b06955,
     -8px 8px 0 #b06955;
     }
     

     View Slide

110. View Slide

111. View Slide

112. View Slide

113. View Slide

114. View Slide

115. View Slide

116. View Slide

117. mask
     

     View Slide

118. mask
     mask: url(mask.png) no-repeat center top;
     

     View Slide

119. CSS3 Masks – Uno cial Global Support – 36%
     

     View Slide

120. mask
     mask: url(mask.png) no-repeat center top;
     

     View Slide

121. mask
     -webkit-mask: url(mask.png) no-repeat center top;
     mask: url(mask.png) no-repeat center top;
     

     View Slide

122. View Slide

123. Transparent Image
     

     View Slide

124. View Slide

125. .sign {
     background: #000 url(images/wood.png) 4.5em 0;
     }
     

     View Slide

126. View Slide

127. PROGRESSIVE
     ENHANCEMENT
     

     View Slide

128. View Slide

129. View Slide

130. .sign h1 {
     -webkit-mask: url(images/wood.png) 4.5em 0;
     mask: url(images/wood.png) 4.5em 0;
     }
     .sign h2 {
     -webkit-mask: url(images/wood.png) -9.32em -6em;
     mask: url(images/wood.png) -9.32em -6em;
     }
     

     View Slide

131. View Slide

132. View Slide

133. View Slide

134. Hand-painted sign
     

     View Slide

135. @font-face – hand-lettered look
     Hand-painted sign
     

     View Slide

136. @font-face – hand-lettered look
     text-shadow – sign painter’s shade
     Hand-painted sign
     

     View Slide

137. @font-face – hand-lettered look
     text-shadow – sign painter’s shade
     mask – weathered, wooden texture
     Hand-painted sign
     

     View Slide

138. Get the
     LOOK
     Use font-face & CSS3 Like the Stars
     @smcbride – sean@typekit.com – seanmcb.com/get-the-look
     

     View Slide

139. View Slide

140. Wood
     Type
     Poster
     

     View Slide

141. View Slide

142. View Slide

143. View Slide

144. View Slide

145. View Slide

146. View Slide

147. View Slide

148. www.leodis.net/playbills
     

     View Slide

149. DESIGN
     SYSTEM
     

     View Slide

150. Idea DESIGN
     SYSTEM
     

     View Slide

151. Idea
     PRINTING
     PAPER/INK
     MOVEABLE TYPE
     

     View Slide

152. Overwhelming
     Typeface variety
     Hierarchy
     Full-width
     PRINTING
     PAPER/INK
     MOVEABLE TYPE
     

     View Slide

153. DESIGN
     SYSTEM
     Overwhelming
     Typeface variety
     Hierarchy
     Full-width
     

     View Slide

154. DESIGN
     SYSTEM
     Overwhelming
     Typeface variety
     Hierarchy
     Full-width
     

     View Slide

155. FONT-FACE
     TEXT-SHADOW
     RGBA COLOR
     PSEUDO-ELEMENTS
     Overwhelming
     Typeface variety
     Hierarchy
     Full-width
     

     View Slide

156. View Slide

157. View Slide

158. View Slide

159. @font-face
     

     View Slide

160. @font-face
     Many fonts File size
     

     View Slide

161. @font-face
     144 Kb
     6 fonts
     

     View Slide

162. from Barry Schwartz
     

     View Slide

163. from Veer
     from Wood Type Revival
     from Adobe
     

     View Slide

164. from Wood Type Revival
     

     View Slide

165. from Wood Type Revival
     

     View Slide

166. from Wood Type Revival
     

     View Slide

167. from Wood Type Revival
     

     View Slide

168. View Slide

169. rgba color
     

     View Slide

170. rgba color
     background: #000;
     

     View Slide

171. rgba color
     background: rgba(0, 0, 0, 1);
     

     View Slide

172. rgba color
     background: rgba(0, 0, 0, 0.5);
     

     View Slide

173. rgba color
     background: rgba(0, 0, 0, 0.5);
     color: rgba(0, 0, 0, 0.5);
     border: 1px solid rgba(0, 0, 0, 0.5);
     text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
     box-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
     

     View Slide

174. CSS3 Colors – Recommendation Global Support – 75%
     

     View Slide

175. rgba color
     color: #999;
     color: rgba(0, 0, 0, 0.5);
     

     View Slide

176. rgba color
     color: #999;
     color: rgba(0, 0, 0, 0.5); PROGRESSIVE
     ENHANCEMENT
     

     View Slide

177. rgba color
     color: #999;
     color: rgba(0, 0, 0, 0.5);
     

     View Slide

178. View Slide

179. .para4 .condensed {
     color: #5d608f;
     }
     

     View Slide

180. .para4 .condensed {
     color: #5d608f;
     text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
     }
     

     View Slide

181. View Slide

182. View Slide

183. .para4 .condensed {
     color: #5d608f;
     color: rgba(45, 57, 128, 0.75);
     text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75);
     }
     

     View Slide

184. View Slide

185. View Slide

186. View Slide

187. View Slide

188. :before + content
     

     View Slide

189. :before + content
     h1:before {
     }
     h1:after {
     }
     Test
     

     View Slide

190. :before + content
     h1:before {
     }
     h1:after {
     }
     Test
     Test
     

     View Slide

191. :before + content
     h1:before {
     content: "1";
     }
     h1:after {
     content: "2";
     }
     Test
     Test
     

     View Slide

192. :before + content
     h1:before {
     content: "1";
     }
     h1:after {
     content: "2";
     }
     Test
     1Test2
     

     View Slide

193. :before + content
     h1:before {
     content: attr(data-one);
     }
     h1:after {
     content: attr(data-two);
     }
     Test
     1Test2
     

     View Slide

194. CSS Generated content – Recommendation Global Support – 88%
     

     View Slide

195. View Slide

196. data-content="Greater Number">
     Greater Number
     
     

     View Slide

197. <br/>$(function() {<br/>$('.chroma').each(function() {<br/>$(this).attr('data-content', $(this).text());<br/>});<br/>});<br/>
     

     View Slide

198. View Slide

199. View Slide

200. .chroma:before {
     color: #999;
     content: attr(data-content);
     font-family: "delittle-chromatic-inlay";
     }
     

     View Slide

201. View Slide

202. View Slide

203. .chroma {
     position: relative;
     }
     .chroma:before {
     color: #999;
     display: block;
     content: attr(data-content);
     font-family: "delittle-chromatic-inlay";
     position: absolute;
     width: 100%;
     }
     

     View Slide

204. View Slide

205. View Slide

206. .chroma:before {
     color: #999;
     display: block;
     content: attr(data-content);
     font-family: "delittle-chromatic-inlay";
     position: absolute;
     top: 0.065em;
     width: 100%;
     }
     

     View Slide

207. View Slide

208. View Slide

209. .para3 .chroma {
     color: #5d608f;
     color: rgba(45, 57, 128, 0.75);
     text-shadow: 0.04em 0.03em 0 rgba(199, 162, 12, 0.5);
     }
     .para3 .chroma:before {
     color: #dd434d;
     }
     

     View Slide

210. View Slide

211. View Slide

212. View Slide

213. View Slide

214. PROGRESSIVE
     ENHANCEMENT
     

     View Slide

215. View Slide

216. Wood type poster
     

     View Slide

217. @font-face – variety of quirky styles
     Wood type poster
     

     View Slide

218. @font-face – variety of quirky styles
     rgba color – texture, double-printing
     Wood type poster
     

     View Slide

219. @font-face – variety of quirky styles
     rgba color – texture, double-printing
     :before + content – chromatic type
     Wood type poster
     

     View Slide

220. Get the
     LOOK
     Use font-face & CSS3 Like the Stars
     @smcbride – sean@typekit.com – seanmcb.com/get-the-look
     

     View Slide

221. View Slide

222. MAGAZINE
     Spread
     

     View Slide

223. View Slide

224. View Slide

225. View Slide

226. View Slide

227. View Slide

228. DESIGN
     SYSTEM
     

     View Slide

229. Idea DESIGN
     SYSTEM
     

     View Slide

230. Idea PRINTED BOOK
     PERIODICAL
     STANDARD SIZE
     

     View Slide

231. Elegance
     High-contrast type
     Photos / color
     Full use of page
     PRINTED BOOK
     PERIODICAL
     STANDARD SIZE
     

     View Slide

232. DESIGN
     SYSTEM
     Elegance
     High-contrast type
     Photos / color
     Full use of page
     

     View Slide

233. DESIGN
     SYSTEM
     Elegance
     High-contrast type
     Photos / color
     Full use of page
     

     View Slide

234. FONT-FACE
     COLUMN-COUNT
     BACKGROUND-SIZE
     RESPONSIVE
     Elegance
     High-contrast type
     Photos / color
     Full use of page
     

     View Slide

235. View Slide

236. View Slide

237. @font-face
     

     View Slide

238. from TypeTogether
     

     View Slide

239. from Phil’s Fonts / Darden
     

     View Slide

240. View Slide

241. columns
     

     View Slide

242. columns
     column-count: 3;
     

     View Slide

243. columns
     column-count: 3;
     column-width: 30em;
     

     View Slide

244. columns
     column-count: 3;
     column-width: 30em;
     column-gap: 2em;
     column-rule: 1px solid #ccc;
     column-span: all;
     

     View Slide

245. CSS3 Multiple column layout – Candidate Recommendation Global Support – 58.91%
     

     View Slide

246. columns
     -moz-column-count: 3;
     -webkit-column-count: 3;
     column-count: 3;
     

     View Slide

247. View Slide

248. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     -moz-column-gap: 1em;
     -webkit-column-gap: 1em;
     column-gap: 1em;
     }
     

     View Slide

249. View Slide

250. View Slide

251. View Slide

252. fittext.js
     

     View Slide

253. View Slide

254. View Slide

255. View Slide

256. ttextjs.com
     

     View Slide

257. View Slide

258. View Slide

259. <br/>$(function() { $('.heading h1').fitText(5.7) });<br/>
     

     View Slide

260. View Slide

261. View Slide

262. View Slide

263. responsive design
     

     View Slide

264. responsive design
     “The control which designers know in the print
     medium, and often desire in the web medium, is
     simply a function of the limitation of the printed page.
     We should embrace the fact that the web doesn’t have
     the same constraints, and design for this exibility.”
     John Allsopp, “A Dao of Web Design”
     

     View Slide

265. View Slide

266. View Slide

267. View Slide

268. abookapart.com
     

     View Slide

269. View Slide

270. Responsive design
     

     View Slide

271. Fluid layout
     Flexible images
     Media queries
     

     View Slide

272. Fluid layout
     

     View Slide

273. Fluid layout
     Horizontal measurements in %
     

     View Slide

274. Fluid layout
     Horizontal measurements in %
     FitText.js for full-width heading
     Viewport meta tag for mobile devices
     

     View Slide

275. Fluid layout
     Horizontal measurements in %
     FitText.js for full-width heading
     Viewport meta tag for mobile devices
     content="width=device-width, initial-scale=1.0">
     

     View Slide

276. Flexible images
     

     View Slide

277. Flexible images
     Scaling background image using background-size
     

     View Slide

278. Flexible images
     Scaling background image using background-size
     html {
     background: #00a3b0 url(images/background.jpg)
     no-repeat top center;
     background-size: cover;
     }
     

     View Slide

279. CSS3 Background-image options – Candidate Rec Global Support – 74%
     

     View Slide

280. Media queries
     

     View Slide

281. Media queries
     Overriding CSS properties in certain situations
     

     View Slide

282. Media queries
     Overriding CSS properties in certain situations
     @media screen and (max-width: 400px) {
     .heading h2 {
     font-size: 2em;
     }
     }
     

     View Slide

283. Media queries
     Overriding CSS properties in certain situations
     Choosing breakpoints
     

     View Slide

284. CSS3 Media queries – Proposed Recommendation Global Support – 75%
     

     View Slide

285. 1024px breakpoint
     Before After
     

     View Slide

286. 640px breakpoint
     Before / After
     

     View Slide

287. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     margin: 0 40% 2em 5%;
     }
     

     View Slide

288. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     margin: 0 40% 2em 5%;
     }
     

     View Slide

289. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     margin: 0 40% 2em 5%;
     }
     

     View Slide

290. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     margin: 0 40% 2em 5%;
     }
     @media screen and (max-width: 1024px) {
     .text {
     margin: 1em 5% 2em;
     }
     }
     

     View Slide

291. .text {
     -moz-column-count: 2;
     -webkit-column-count: 2;
     column-count: 2;
     margin: 0 40% 2em 5%;
     }
     @media screen and (max-width: 640px) {
     .text {
     -moz-column-count: 1;
     -webkit-column-count: 1;
     column-count: 1;
     }
     }
     @media screen and (max-width: 1024px) {
     .text {
     margin: 1em 5% 2em;
     }
     }
     

     View Slide

292. Magazine spread
     

     View Slide

293. @font-face – elegant, high-contrast
     Magazine spread
     

     View Slide

294. @font-face – elegant, high-contrast
     columns – shorten lines at wide widths
     Magazine spread
     

     View Slide

295. @font-face – elegant, high-contrast
     columns – shorten lines at wide widths
     Magazine spread
     ttext.js – t headline to available space
     

     View Slide

296. @font-face – elegant, high-contrast
     columns – shorten lines at wide widths
     Magazine spread
     ttext.js – t headline to available space
     responsive design – adapt to canvas
     

     View Slide

297. View Slide

298. BOOK
     EARLY PRINTED
     

     View Slide

299. View Slide

300. View Slide

301. View Slide

302. View Slide

303. View Slide

304. Not every design
     translates well
     

     View Slide

305. View Slide

306. Form imitates
     another form
     

     View Slide

307. What part of the idea
     is still unique?
     

     View Slide

308. View Slide

309. “How do I translate a
     CLASSIC LOOK
     into a web page?”
     

     View Slide

310. View Slide

311. Original
     Form
     New
     Form
     

     View Slide

312. Original
     Idea
     DESIGN
     SYSTEM
     Original
     Form
     DESIGN
     SYSTEM
     New
     Form
     

     View Slide

313. CSS3
     

     View Slide

314. CSS3
     @font-face
     @media
     background-size
     :before/:after
     column-count
     rgba
     text-shadow
     transform
     

     View Slide

315. CSS3
     @font-face
     @media
     background-size
     :before/:after
     column-count
     rgba
     text-shadow
     transform
     PROGRESSIVE
     ENHANCEMENT
     

     View Slide

316. CSS3
     @font-face
     @media
     background-size
     :before/:after
     column-count
     rgba
     text-shadow
     transform
     

     View Slide

317. View Slide

318. Imitate a form
     

     View Slide

319. Imitate a form
     Translate an idea
     

     View Slide

320. Imitate a form
     Translate an idea
     Full use of medium
     

     View Slide

321. View Slide

322. is hiring!
     

     View Slide

323. Get the
     LOOK
     seanmcb.com/get-the-look
     sean@typekit.com
     @smcbride
     

     View Slide

324. Fashion 1 by Stephen Drake
     4/5
     Hey there by Petra Cross
     6
     Flickr
     Image
     Credits
     Soda Crackers by Lane Pearman
     26
     Hand-Made Signs in Baltimore by Colin Dunn
     25
     Brooklyn Circus SF by Damon Styer
     27
     The Phoenix Pub by Damon Styer
     27
     Quiet by Damon Styer
     27
     Far West Harvest by Damon Styer
     28
     Hand-Made Signs in Baltimore by Colin Dunn
     31
     Glyphs hunter by Camil Tulcan
     69
     The a Mano / Dean... by Nick Sherman
     70
     On the press by Nick Sherman
     71
     Moldy kiss by Nick Sherman
     72
     Hamilton's Wood Type... by Nick Sherman
     73
     Modern Honors Bound by Nick Sherman
     73
     1987 Vogue layout spread by Nate Bolt
     106
     Responsive Web Design by Jason Santa Maria
     131
     Moldy kiss by Nick Sherman
     72
     Gutenberg Bible by NYC Wanderer
     144
     Gutenburg Press by Kill le
     145
     Gutenberg Bible, rubrication by vlasta2
     146
     Portion of an early parchment... by kladcat
     149
     

     View Slide