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

Get the Look: Use @font-face and CSS3 Like the Stars

Sean McBride
March 10, 2012

Get the Look: Use @font-face and CSS3 Like the Stars

My talk for SxSW 2012. Originally given on Saturday, 10 March 2012. 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.

You can find audio from this session here: http://seanmcb.com/get-the-look/get-the-look.mp3

Sean McBride

March 10, 2012
Tweet

More Decks by Sean McBride

Other Decks in Design

Transcript

  1. Get the LOOK Use font-face & CSS3 Like the Stars

    #SexyType – @smcbride – seanmcb.com/sxsw2012
  2. #SexyType @smcbride

  3. SEAN McBRIDE

  4. SEAN McBRIDE Engineer & Web Developer

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

  6. None
  7. None
  8. Star’s look

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

  10. None
  11. Classic look

  12. Classic look Your look (On the web)

  13. HAND-PAINTED SIGNS

  14. WOOD TYPE POSTERS

  15. MAGAZINE SPREAD

  16. CSS3

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

  18. None
  19. Examples on GitHub github.com/seanami/get-the-look-examples

  20. None
  21. “How do I translate a CLASSIC LOOK into a web

    page?”
  22. None
  23. Ideas Forms

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

  25. Idea DESIGN SYSTEM Form

  26. DESIGN SYSTEM

  27. DESIGN SYSTEM

  28. The NY Times DESIGN SYSTEM

  29. The NY Times DESIGN SYSTEM DESIGN SYSTEM

  30. The NY Times DESIGN SYSTEM DESIGN SYSTEM

  31. DESIGN SYSTEM

  32. Bohemian Ensemble DESIGN SYSTEM

  33. DESIGN SYSTEM Bohemian Ensemble DESIGN SYSTEM

  34. None
  35. Original Form

  36. Original Form New Form

  37. Original Form New Form

  38. DESIGN SYSTEM Original Form New Form

  39. Original Idea DESIGN SYSTEM Original Form New Form

  40. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

  41. None
  42. Hand-Painted SIGNS

  43. None
  44. None
  45. None
  46. None
  47. None
  48. blog.typekit.com/2011/07/19/shading-with-css-text-shadows

  49. None
  50. None
  51. DESIGN SYSTEM

  52. Idea DESIGN SYSTEM

  53. Idea PAINTING WOOD/BRICK THE ELEMENTS

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

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

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

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

  58. None
  59. None
  60. @font-face

  61. @font-face Web fonts – Working Draft Global Support – 92.11%

  62. @font-face Web fonts – Working Draft Global Support – 92.11%

    caniuse.com
  63. @font-face Web fonts – Working Draft Global Support – 92.11%

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

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

  67. None
  68. from Veer from Underware

  69. None
  70. None
  71. .sign h1 .name { transform: rotate(-12deg); } CSS3 Transform

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

  75. None
  76. None
  77. .sign h1 .name { font: 400 normal 20em/1 cursive; }

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

  82. None
  83. None
  84. text-shadow

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

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

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

  88. None
  89. None
  90. None
  91. PROGRESSIVE ENHANCEMENT

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

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

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

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

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

    Color
  97. None
  98. None
  99. .sign h1 .name { text-shadow: -3px 3px 0 #393431, -8px

    8px 0 #b06955; }
  100. None
  101. None
  102. .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; }
  103. None
  104. None
  105. None
  106. None
  107. None
  108. None
  109. None
  110. mask

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

  112. CSS3 Masks – Uno cial Global Support – 35.49%

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

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

    top;
  115. None
  116. Transparent Image

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

  119. None
  120. PROGRESSIVE ENHANCEMENT

  121. None
  122. None
  123. .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; }
  124. None
  125. None
  126. None
  127. Hand-painted sign

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

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

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

    – weathered, wooden texture Hand-painted sign
  131. None
  132. Wood Type Poster

  133. None
  134. None
  135. None
  136. None
  137. None
  138. None
  139. None
  140. www.leodis.net/playbills

  141. DESIGN SYSTEM

  142. Idea DESIGN SYSTEM

  143. Idea PRINTING PAPER/INK MOVEABLE TYPE

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

  145. DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

  146. DESIGN SYSTEM Overwhelming Typeface variety Hierarchy Full-width

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

  148. None
  149. None
  150. None
  151. @font-face

  152. @font-face Many fonts File size

  153. @font-face 144 Kb 6 fonts

  154. from Barry Schwartz

  155. from Veer from Wood Type Revival from Adobe

  156. from Wood Type Revival

  157. from Wood Type Revival

  158. from Wood Type Revival

  159. from Wood Type Revival

  160. None
  161. rgba color

  162. rgba color background: #000;

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

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

  165. 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);
  166. CSS3 Colors – Recommendation Global Support – 72.95%

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

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

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

  170. None
  171. .para4 .condensed { color: #5d608f; }

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

    20, 43, 0.75); }
  173. None
  174. None
  175. .para4 .condensed { color: #5d608f; color: rgba(45, 57, 128, 0.75);

    text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75); }
  176. None
  177. None
  178. None
  179. None
  180. :before + content

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

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

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

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

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

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

  187. None
  188. <strong class="chroma" data-content="Greater Number"> Greater Number </strong>

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

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

  193. None
  194. None
  195. .chroma { position: relative; } .chroma:before { color: #999; display:

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

    position: absolute; top: 0.065em; width: 100%; }
  199. None
  200. None
  201. .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; }
  202. None
  203. None
  204. None
  205. None
  206. PROGRESSIVE ENHANCEMENT

  207. None
  208. Wood type poster

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

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

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

    double-printing :before + content – chromatic type Wood type poster
  212. None
  213. MAGAZINE Spread

  214. None
  215. None
  216. None
  217. None
  218. None
  219. DESIGN SYSTEM

  220. Idea DESIGN SYSTEM

  221. Idea PRINTED BOOK PERIODICAL STANDARD SIZE

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

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

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

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

    Full use of page
  226. None
  227. None
  228. @font-face

  229. from TypeTogether

  230. from Phil’s Fonts / Darden

  231. None
  232. responsive design

  233. 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”
  234. None
  235. None
  236. Fluid layout Flexible images Media queries

  237. Fluid layout

  238. Fluid layout Horizontal measurements in %

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

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

    <script src="../shared/js/jquery.fittext.js"></script> <script> $(function() { $('.heading h1').fitText(5.7) }); </script>
  241. Fluid layout Horizontal measurements in % FitText.js for full-width heading

    Viewport meta tag for mobile devices
  242. 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">
  243. Flexible images

  244. Flexible images Scaling background image using background-size

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

    #00a3b0 url(images/background.jpg) no-repeat top center; background-size: cover; }
  246. Media queries

  247. Media queries Overriding CSS properties in certain situations

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

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

  250. 1024px breakpoint Before After

  251. 640px breakpoint Before / After

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

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

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

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

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

  259. @font-face – elegant, high-contrast responsive design – adapt to canvas

    Magazine spread
  260. None
  261. “How do I translate a CLASSIC LOOK into a web

    page?”
  262. None
  263. Original Form New Form

  264. Original Idea DESIGN SYSTEM Original Form DESIGN SYSTEM New Form

  265. CSS3

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

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

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

  269. None
  270. Imitate a form

  271. Imitate a form Translate an idea

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

  273. None
  274. is hiring!

  275. is hiring! bit.ly/typekit-api-engineer

  276. Get the LOOK sean@typekit.com – seanmcb.com/sxsw2012 #SexyType @smcbride

  277. Fashion 1 by Stephen Drake 1 Hey there by Petra

    Cross 2 Flickr Image Credits Soda Crackers by Lane Pearman 18 Hand-Made Signs in Baltimore by Colin Dunn 17 Brooklyn Circus SF by Damon Styer 19 The Phoenix Pub by Damon Styer 19 Quiet by Damon Styer 19 Far West Harvest by Damon Styer 20 Hand-Made Signs in Baltimore by Colin Dunn 24 Glyphs hunter by Camil Tulcan 59 The a Mano / Dean... by Nick Sherman 60 On the press by Nick Sherman 57 ????? by Nick Sherman 61 Moldy kiss by Nick Sherman 62 Hamilton's Wood Type... by Nick Sherman 63 Modern Honors Bound by Nick Sherman 63 1987 Vogue layout spread by Nate Bolt 95 Responsive Web Design by Jason Santa Maria 108 Moldy kiss by Nick Sherman 62