Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Get the Look

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.

B3604665479456ed6fc1d7c5d932e03b?s=128

Sean McBride

May 19, 2012
Tweet

Transcript

  1. None
  2. None
  3. None
  4. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – sean@typekit.com – seanmcb.com/get-the-look
  5. @smcbride sean@typekit.com

  6. SEAN McBRIDE

  7. SEAN McBRIDE Engineer & Web Developer

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

  9. ?

  10. None
  11. None
  12. Star’s look

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

  14. None
  15. Classic look

  16. Classic look Your look (On the web)

  17. HAND-PAINTED SIGNS

  18. WOOD TYPE POSTERS

  19. MAGAZINE SPREAD

  20. CSS3

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

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

  24. None
  25. “How do I translate a CLASSIC LOOK into a web

    page?”
  26. None
  27. Ideas Forms

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

  29. Idea DESIGN SYSTEM Form

  30. DESIGN SYSTEM

  31. DESIGN SYSTEM

  32. The NY Times DESIGN SYSTEM

  33. The NY Times DESIGN SYSTEM DESIGN SYSTEM

  34. The NY Times DESIGN SYSTEM DESIGN SYSTEM

  35. None
  36. None
  37. None
  38. DESIGN SYSTEM

  39. Bohemian Ensemble DESIGN SYSTEM

  40. DESIGN SYSTEM Bohemian Ensemble DESIGN SYSTEM

  41. None
  42. Original Form

  43. Original Form New Form

  44. Original Form New Form

  45. DESIGN SYSTEM Original Form New Form

  46. Original Idea DESIGN SYSTEM Original Form New Form

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

  48. None
  49. Hand-Painted SIGNS

  50. None
  51. None
  52. None
  53. None
  54. blog.typekit.com/2011/07/19/shading-with-css-text-shadows

  55. None
  56. None
  57. DESIGN SYSTEM

  58. Idea DESIGN SYSTEM

  59. Idea PAINTING WOOD/BRICK THE ELEMENTS

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

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

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

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

  64. None
  65. None
  66. @font-face

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

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

    caniuse.com
  69. None
  70. @font-face @font-face { font-family: 'my-family'; src: url('/url/of/font.woff'); style: normal; weight:

    400; }
  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; }
  72. @font-face <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script>

  73. None
  74. from Veer from Underware

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

  79. None
  80. None
  81. <head> ... <script src="http://use.typekit.com/rck3htg.js"></script> <script>try{Typekit.load();}catch(e){}</script> ... </head>

  82. None
  83. None
  84. .sign h1 .name { font: 400 normal 20em/1 cursive; }

    .sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 sans-serif; }
  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; }
  86. None
  87. None
  88. .sign h1 .name:first-letter { font-size: 1.2em; }

  89. None
  90. None
  91. text-shadow

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

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

    #000, 4px 8px 0 #fff, ...;
  94. CSS3 Text-shadow – Working Draft Global Support – 61%

  95. None
  96. None
  97. None
  98. PROGRESSIVE ENHANCEMENT

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

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

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

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

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

    Color
  104. None
  105. None
  106. .sign h1 .name { text-shadow: -3px 3px 0 #393431, -8px

    8px 0 #b06955; }
  107. None
  108. None
  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; }
  110. None
  111. None
  112. None
  113. None
  114. None
  115. None
  116. None
  117. mask

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

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

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

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

    top;
  122. None
  123. Transparent Image

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

  126. None
  127. PROGRESSIVE ENHANCEMENT

  128. None
  129. None
  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; }
  131. None
  132. None
  133. None
  134. Hand-painted sign

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

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

    sign
  137. @font-face – hand-lettered look text-shadow – sign painter’s shade mask

    – weathered, wooden texture Hand-painted sign
  138. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – sean@typekit.com – seanmcb.com/get-the-look
  139. None
  140. Wood Type Poster

  141. None
  142. None
  143. None
  144. None
  145. None
  146. None
  147. None
  148. www.leodis.net/playbills

  149. DESIGN SYSTEM

  150. Idea DESIGN SYSTEM

  151. Idea PRINTING PAPER/INK MOVEABLE TYPE

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

  153. DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

  154. DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

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

  156. None
  157. None
  158. None
  159. @font-face

  160. @font-face Many fonts File size

  161. @font-face 144 Kb 6 fonts

  162. from Barry Schwartz

  163. from Veer from Wood Type Revival from Adobe

  164. from Wood Type Revival

  165. from Wood Type Revival

  166. from Wood Type Revival

  167. from Wood Type Revival

  168. None
  169. rgba color

  170. rgba color background: #000;

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

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

  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);
  174. CSS3 Colors – Recommendation Global Support – 75%

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

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

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

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

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

    20, 43, 0.75); }
  181. None
  182. None
  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); }
  184. None
  185. None
  186. None
  187. None
  188. :before + content

  189. :before + content h1:before { } h1:after { } <h1>Test</h1>

  190. :before + content h1:before { } h1:after { } <h1>Test</h1>

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

    content: "2"; } <h1>Test</h1> Test
  192. :before + content h1:before { content: "1"; } h1:after {

    content: "2"; } <h1>Test</h1> 1Test2
  193. :before + content h1:before { content: attr(data-one); } h1:after {

    content: attr(data-two); } <h1 data-one="1" data-two="2">Test</h1> 1Test2
  194. CSS Generated content – Recommendation Global Support – 88%

  195. None
  196. <strong class="chroma" data-content="Greater Number"> Greater Number </strong>

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

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

  201. None
  202. None
  203. .chroma { position: relative; } .chroma:before { color: #999; display:

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

    position: absolute; top: 0.065em; width: 100%; }
  207. None
  208. None
  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; }
  210. None
  211. None
  212. None
  213. None
  214. PROGRESSIVE ENHANCEMENT

  215. None
  216. Wood type poster

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

  218. @font-face – variety of quirky styles rgba color – texture,

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

    double-printing :before + content – chromatic type Wood type poster
  220. Get the LOOK Use font-face & CSS3 Like the Stars

    @smcbride – sean@typekit.com – seanmcb.com/get-the-look
  221. None
  222. MAGAZINE Spread

  223. None
  224. None
  225. None
  226. None
  227. None
  228. DESIGN SYSTEM

  229. Idea DESIGN SYSTEM

  230. Idea PRINTED BOOK PERIODICAL STANDARD SIZE

  231. Elegance High-contrast type Photos / color Full use of page

    PRINTED BOOK PERIODICAL STANDARD SIZE
  232. DESIGN SYSTEM Elegance High-contrast type Photos / color Full use

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

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

    Full use of page
  235. None
  236. None
  237. @font-face

  238. from TypeTogether

  239. from Phil’s Fonts / Darden

  240. None
  241. columns

  242. columns column-count: 3;

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

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

    #ccc; column-span: all;
  245. CSS3 Multiple column layout – Candidate Recommendation Global Support –

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

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

    -webkit-column-gap: 1em; column-gap: 1em; }
  249. None
  250. None
  251. None
  252. fittext.js

  253. None
  254. None
  255. None
  256. ttextjs.com

  257. None
  258. None
  259. <script> $(function() { $('.heading h1').fitText(5.7) }); </script>

  260. None
  261. None
  262. None
  263. responsive design

  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”
  265. None
  266. None
  267. None
  268. abookapart.com

  269. None
  270. Responsive design

  271. Fluid layout Flexible images Media queries

  272. Fluid layout

  273. Fluid layout Horizontal measurements in %

  274. Fluid layout Horizontal measurements in % FitText.js for full-width heading

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

    Viewport meta tag for mobile devices <meta name="viewport" content="width=device-width, initial-scale=1.0">
  276. Flexible images

  277. Flexible images Scaling background image using background-size

  278. Flexible images Scaling background image using background-size html { background:

    #00a3b0 url(images/background.jpg) no-repeat top center; background-size: cover; }
  279. CSS3 Background-image options – Candidate Rec Global Support – 74%

  280. Media queries

  281. Media queries Overriding CSS properties in certain situations

  282. Media queries Overriding CSS properties in certain situations @media screen

    and (max-width: 400px) { .heading h2 { font-size: 2em; } }
  283. Media queries Overriding CSS properties in certain situations Choosing breakpoints

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

  285. 1024px breakpoint Before After

  286. 640px breakpoint Before / After

  287. .text { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; margin: 0

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

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

    40% 2em 5%; }
  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; } }
  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; } }
  292. Magazine spread

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

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

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

    widths Magazine spread ttext.js – t headline to available space
  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
  297. None
  298. BOOK EARLY PRINTED

  299. None
  300. None
  301. None
  302. None
  303. None
  304. Not every design translates well

  305. None
  306. Form imitates another form

  307. What part of the idea is still unique?

  308. None
  309. “How do I translate a CLASSIC LOOK into a web

    page?”
  310. None
  311. Original Form New Form

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

  313. CSS3

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

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

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

  317. None
  318. Imitate a form

  319. Imitate a form Translate an idea

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

  321. None
  322. is hiring!

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

  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