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. @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; }
  3. .sign h1 .name { font: 400 normal 20em/1 cursive; }

    .sign h1 .welcome, .sign h2 { font: 400 normal 7em/1 sans-serif; }
  4. .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; }
  5. .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; }
  6. .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; }
  7. 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);
  8. .para4 .condensed { color: #5d608f; color: rgba(45, 57, 128, 0.75);

    text-shadow: 0.02em 0.02em 0 rgba(217, 20, 43, 0.75); }
  9. :before + content h1:before { content: "1"; } h1:after {

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

    content: attr(data-two); } <h1 data-one="1" data-two="2">Test</h1> 1Test2
  11. .chroma { position: relative; } .chroma:before { color: #999; display:

    block; content: attr(data-content); font-family: "delittle-chromatic-inlay"; position: absolute; width: 100%; }
  12. .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; }
  13. @font-face – variety of quirky styles rgba color – texture,

    double-printing :before + content – chromatic type Wood type poster
  14. Elegance High-contrast type Photos / color Full use of page

    PRINTED BOOK PERIODICAL STANDARD SIZE
  15. 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”
  16. 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>
  17. 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">
  18. Flexible images Scaling background image using background-size html { background:

    #00a3b0 url(images/background.jpg) no-repeat top center; background-size: cover; }
  19. Media queries Overriding CSS properties in certain situations @media screen

    and (max-width: 400px) { .heading h2 { font-size: 2em; } }
  20. .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; } }
  21. .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; } }
  22. 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