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

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

Sean McBride
March 10, 2012
Design
13
2.6k

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

See All by Sean McBride
Bringing Good Type to a New Medium
seanami
0
94
CCA Web Fonts Talk - 2013.09.17
seanami
0
120
Realizing the Expressive Potential of Fonts on the Web
seanami
1
150
More Than Type
seanami
5
250
Typo London 2012 - A Renaissance in Web Typography
seanami
4
810
CCA Web Fonts Talk - 2012.10.01
seanami
1
150
Bridging the Client-side Server-side Divide
seanami
6
830
Get the Look
seanami
33
11k

Other Decks in Design

See All in Design
Money Forward UIの紹介 / Introducing Money Forward UI
taigakiyokawa
1
480
今日から始める グラレコ チャレンジ　DevRel/Tokyo #94 〜グラレコ チャレンジ〜
moshimoshiyuki
0
100
ゲーム開発における、Figma活用事例の紹介 / applibot-figma
cyberagentdevelopers
PRO
2
270
Test Revisionista
olgastoryboard
0
110
アフォーダンスとシグニファイア
ryokanakai
1
310
Arborea Art Book
thebogheart
1
280
想像するためのデザイン - LARPの可能性を探求してみた話
okabemy
0
520
Improve a service workshop
mastervicedesign
1
110
20241019-CUD友の会「困った！を解決するデザイン改訂版」交流会
majimasachi
0
250
Памятка-раздатка по Карте процесса-опыта, А4
ashapiro
1
390
Night Shift (beginning sequence)
cpineda57
0
910
知を活かせるチームづくりとは？-MIMIGURIで実践している「全員探究」の仕組みと文化づくり-
chiemitaki
1
690

Featured

See All Featured
Designing the Hi-DPI Web
ddemaree
280
34k
Producing Creativity
orderedlist
PRO
341
39k
Product Roadmaps are Hard
iamctodd
PRO
49
11k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
26
2.1k
A Philosophy of Restraint
colly
203
16k
Speed Design
sergeychernyshev
24
600
Fashionably flexible responsive web design (full day workshop)
malarkey
404
65k
RailsConf 2023
tenderlove
29
890
XXLCSS - How to scale CSS and keep your sanity
sugarenia
246
1.3M
Reflections from 52 weeks, 52 projects
jeffersonlam
346
20k
Code Review Best Practice
trishagee
64
17k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
250
21k

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 [email protected] – 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