$30 off During Our Annual Pro Sale. View Details »

Typography Matters

Typography Matters

Given at WordCamp Austin 2014.

Joel G Goodman

April 26, 2014
Tweet

More Decks by Joel G Goodman

Other Decks in Design

Transcript

  1. @joelgoodman

    View Slide

  2. hi, i’m
    JOEL G GOODMAN
    @joelgoodman
    joelgoodman.co

    View Slide

  3. I own a boutique web firm
    @braverymedia
    braverymedia.co
    BRAVERY
    TRANSMEDIA

    View Slide

  4. HISTORY LESSON

    View Slide

  5. remember when...

    Arial
    Comic Sans MS
    Courier New
    Georgia
    Tahoma
    Times New Roman
    Trebuchet MS
    Verdana
    Symbol
    &
    http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

    View Slide

  6. life was so simple with
    9 fonts to worry about

    View Slide

  7. @font-face
    today...

    View Slide

  8. today...
    Google: 632 families
    Adobe Edge Fonts: 502 families

    View Slide

  9. and that’s just the
    free services!

    View Slide

  10. FEELINGS

    View Slide

  11. design for emotion...
    SHAPE WEIGHT STYLE
    CLASSIFICATION

    View Slide

  12. classifications...
    SERIF SANS-SERIF SCRIPT
    SLAB SERIF DISPLAY

    View Slide

  13. how do you choose?

    View Slide

  14. MAKING SENSE
    of it...

    View Slide

  15. rules...
    Don’t use more than 2 different fonts in
    any given design.
    R UL E OF THU MB

    View Slide

  16. rules...
    Don’t combine the same font-styles.
    SE COND R UL E OF THU MB

    View Slide

  17. rules guidelines
    B U TT E RI CK’S PR ACTI CAL TY POGR A PHY
    Mixing fonts is like mixing patterned
    shirts and ties—there aren’t immutable
    rules. Some people have a knack for it;
    some don’t.

    View Slide

  18. font styles...
    Serif Font
    Also Serif Font

    View Slide

  19. font styles...
    Sans-serif Font
    Also Sans-serif Font

    View Slide

  20. Mixed Serif Fonts
    Messenger bag fingerstache dolor vinyl , you probably haven't heard of them banjo
    odio jean shorts proident tempor artisan. Kale chips salvia high life brooklyn vero
    pour-over. Food truck accusamus laboris, non +1 mustache polaroid craft beer elit.
    Master cleanse id lomo meggings, nihil viral mixtape qui forage et beard actually
    consectetur. Pariatur veniam trust fund, keytar commodo whatever iphone. Pork
    belly ad artisan literally, whatever wes anderson in etsy banksy non. Nulla ullamco
    portland duis.
    Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral truffaut,
    brunch banh mi swag dreamcatcher accusamus YOLO banjo irure godard. Proident
    pariatur terry richardson actually dolor helvetica. Anim messenger bag YOLO,
    retro proident +1 organic neutra tempor odio american apparel vero occaecat.
    Vegan bicycle rights seitan brooklyn, synth chillwave veniam wolf typewriter
    cillum. Est occaecat semiotics, chambray do reprehenderit quinoa tonx officia

    View Slide

  21. Mixed Sans-serif Fonts
    Messenger bag fingerstache dolor vinyl , you probably haven't heard of
    them banjo odio jean shorts proident tempor artisan. Kale chips salvia high
    life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache
    polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape
    qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar
    commodo whatever iphone. Pork belly ad artisan literally, whatever wes
    anderson in etsy banksy non. Nulla ullamco portland duis.
    Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral
    truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure
    godard. Proident pariatur terry richardson actually dolor helvetica. Anim
    messenger bag YOLO, retro proident +1 organic neutra tempor odio
    american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth

    View Slide

  22. This works, though!
    Messenger bag fingerstache dolor vinyl , you probably haven't heard of
    them banjo odio jean shorts proident tempor artisan. Kale chips salvia high
    life brooklyn vero pour-over. Food truck accusamus laboris, non +1 mustache
    polaroid craft beer elit. Master cleanse id lomo meggings, nihil viral mixtape
    qui forage et beard actually consectetur. Pariatur veniam trust fund, keytar
    commodo whatever iphone. Pork belly ad artisan literally, whatever wes
    anderson in etsy banksy non. Nulla ullamco portland duis.
    Pug flannel pickled, whatever master cleanse non keffiyeh. Umami viral
    truffaut, brunch banh mi swag dreamcatcher accusamus YOLO banjo irure
    godard. Proident pariatur terry richardson actually dolor helvetica. Anim
    messenger bag YOLO, retro proident +1 organic neutra tempor odio
    american apparel vero occaecat. Vegan bicycle rights seitan brooklyn, synth

    View Slide

  23. Using Playfair Display
    and Source Sans Pro
    served by Google Fonts

    View Slide

  24. tip...
    You can get a lot of mileage out of just
    one font family.
    G OOD TO KN OW

    View Slide

  25. Using Omnes Pro
    served by Typekit

    View Slide

  26. Using Open Sans
    @font-face CSS

    View Slide

  27. rules...
    Some fonts are better for headlines than
    others. Some are better for body text.
    R UL E OF THU MB

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. rules...
    Use hierarchy to clearly distinguish
    different elements in your design.
    R UL E OF THU MB

    View Slide

  32. headings should
    stand out.

    View Slide

  33. headings should
    separate sections
    on the page.

    View Slide

  34. rules...
    Adjust your copy line-height to give your
    text blocks room to breathe.
    R UL E OF THU MB

    View Slide

  35. rules...
    Consider your users. Is your text too small
    for weak eyes? Is it too big and hard to
    move your eyes across the page?
    R UL E OF THU MB

    View Slide

  36. rules...
    If you have a large block of text, don’t
    make the font-size too small.
    R UL E OF THU MB

    View Slide

  37. rules...
    Pay attention to licenses and copyrights.
    R UL E OF LE GAL ITY

    View Slide

  38. No, REALLY.
    Pay attention to licenses and copyrights!!!
    R UL E OF LE GAL ITY

    View Slide

  39. licensing options...
    FREE SERVICES
    • Google Webfonts
    • Adobe Edge Fonts

    PAID SERVICES
    • Typekit
    • Cloudtype (Hoefler & Co.)
    • MyFonts
    • Fontdeck
    • lots of others…

    View Slide

  40. resources...
    • thinkingwithtype.com
    • practicaltypography.com
    • ilovetypography.com
    • fontbook.com
    • typekit.com
    • google.com/fonts
    • typecast.com

    View Slide

  41. thanks!
    @braverymedia
    braverymedia.co
    @joelgoodman
    joelgoodman.co

    View Slide