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

Typography: It's Design from Print to Web

chandlervdw
April 28, 2012

Typography: It's Design from Print to Web

A workshop I did at #convergese - it covers why webfonts are integral to the web and gets into how you can make your own font using Glyphs.

chandlervdw

April 28, 2012
Tweet

Other Decks in Design

Transcript

  1. Beer & Why It’s Great

    View full-size slide

  2. Faux Chest Hair &
    Its Effects on Women

    View full-size slide

  3. Why Short People
    Are Better Than
    Everyone Else

    View full-size slide

  4. I Wore A Leotard
    This One Time

    View full-size slide

  5. Designing Naked
    & Its Effects on
    Marital Intimacy

    View full-size slide

  6. Typography
    Its Design from Print to Web

    View full-size slide

  7. Chandler Van De Water
    • Columbia Native
    • BEER
    • Virgin ConvergeSE
    • Testosterone Shots (the needle kind)
    • 3.5 Years Married
    • I’ve lost 18 pounds this year
    • Cubano

    View full-size slide

  8. Chandler Van De Water
    • Columbia Native
    • BEER
    • Virgin ConvergeSE
    • Testosterone Shots (the needle kind)
    • 3.5 Years Married
    • I’ve lost 18 pounds this year
    • Cubano

    View full-size slide

  9. CSS @font-face

    View full-size slide

  10. Make A Font!

    View full-size slide

  11. Web Typography

    View full-size slide

  12. Glyphs
    glyphsapp.com
    “Download Trial” on the right
    http://via.chandlervdw.com/GAuL

    View full-size slide

  13. Glyphs
    glyphsapp.com
    “Download Trial” on the right
    http://via.chandlervdw.com/GAuL

    View full-size slide

  14. Why Webfonts?

    View full-size slide

  15. Integral to the Web?

    View full-size slide

  16. Errrbody Use Me!!!1!

    View full-size slide

  17. Accessibility

    View full-size slide

  18. http://via.chandlervdw.com/GDPP

    View full-size slide

  19. Responsive Design

    View full-size slide

  20. Responsive

    Retina Display

    View full-size slide

  21. Future-Proof
    (not real)

    View full-size slide

  22. Pictos
    www.pictos.cc

    View full-size slide

  23. Glyphs
    glyphsapp.com
    “Download Trial” on the right

    View full-size slide

  24. CUBANO
    losttype.com
    cubano.chandlervdw.com

    View full-size slide

  25. @chandlervdw i think it’s great, but
    you only asked whether it sucked.
    So I replied truthfully.
    Erik Spiekermann
    @espiekermann

    View full-size slide

  26. MAKE YOUR OWN FONT

    View full-size slide

  27. Good Products = Hard Work

    View full-size slide

  28. “Impression Writing”
    typos = “impression” graphia = “writing”

    View full-size slide

  29. Glyphs
    glyphsapp.com
    “Download Trial” on the right

    View full-size slide

  30. Sketch First

    View full-size slide

  31. Type Creation Process

    View full-size slide

  32. I
    H T L E F
    N M W V K Y X Z

    View full-size slide

  33. WORK WHEN INSPIRED

    View full-size slide

  34. Optical Correction

    View full-size slide

  35. Pointers
    • Draw “sharp” versions first
    • Utilize different shapes, not a single, large shape
    • Interpolation
    • User Manual - via.chandlervdw.com/G8tE

    View full-size slide

  36. Typographic Features

    View full-size slide

  37. Optical Correction

    View full-size slide

  38. Bilateral Serifs

    View full-size slide

  39. TypographyDeconstructed.com

    View full-size slide

  40. Berthold Akzidenz
    Grotesk

    View full-size slide

  41. Grotesque
    Butthole Accidents

    View full-size slide

  42. Kerning Pairs
    Kerning Groups

    View full-size slide

  43. DO NOT FIX
    INCONSISTENT SPACING
    WITH KERNING

    View full-size slide

  44. Kerning Groups
    H, P, I, K, L, R

    View full-size slide

  45. http://type.method.ac

    View full-size slide

  46. FontSquirrel.com
    fontsquirrel.com/fontface/generator

    View full-size slide

  47. Font.eot
    Font.svg
    Font.ttf
    Font.woff

    View full-size slide

  48. @font-face {
    font-family: 'MyFontFamily';
    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');
    }
    .myfont {
    font-family: 'MyFontFamily';
    }
    “Fontspring @font-face syntax”

    View full-size slide

  49. via.chandlervdw.com/GBuG

    View full-size slide