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

Typography Matters

73f37978c35c14c7a59245e7687207cd?s=47 Joel G Goodman
April 26, 2014

Typography Matters

Given at WordCamp Austin 2014.

73f37978c35c14c7a59245e7687207cd?s=128

Joel G Goodman

April 26, 2014
Tweet

Transcript

  1. @joelgoodman

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

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

  4. HISTORY LESSON

  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
  6. life was so simple with 9 fonts to worry about

  7. @font-face today...

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

  9. and that’s just the free services!

  10. FEELINGS

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

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

  13. how do you choose?

  14. MAKING SENSE of it...

  15. rules... Don’t use more than 2 different fonts in any

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

    E OF THU MB
  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.
  18. font styles... Serif Font Also Serif Font

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

  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
  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
  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
  23. Using Playfair Display and Source Sans Pro served by Google

    Fonts
  24. tip... You can get a lot of mileage out of

    just one font family. G OOD TO KN OW
  25. Using Omnes Pro served by Typekit

  26. Using Open Sans @font-face CSS

  27. rules... Some fonts are better for headlines than others. Some

    are better for body text. R UL E OF THU MB
  28. None
  29. None
  30. None
  31. rules... Use hierarchy to clearly distinguish different elements in your

    design. R UL E OF THU MB
  32. headings should stand out.

  33. headings should separate sections on the page.

  34. rules... Adjust your copy line-height to give your text blocks

    room to breathe. R UL E OF THU MB
  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
  36. rules... If you have a large block of text, don’t

    make the font-size too small. R UL E OF THU MB
  37. rules... Pay attention to licenses and copyrights. R UL E

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

    E OF LE GAL ITY
  39. licensing options... FREE SERVICES • Google Webfonts • Adobe Edge

    Fonts
 PAID SERVICES • Typekit • Cloudtype (Hoefler & Co.) • MyFonts • Fontdeck • lots of others…
  40. resources... • thinkingwithtype.com • practicaltypography.com • ilovetypography.com • fontbook.com •

    typekit.com • google.com/fonts • typecast.com
  41. thanks! @braverymedia braverymedia.co @joelgoodman joelgoodman.co