Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

More Than Words: The Power of Type

958 views

Published on

Before the mind reads your message, it has already gathered information based on the visual clues from your type alone. Type is an extremely powerful design element that can literally transform the way people perceive your content. Type influences perceptions, emotions, and feelings of trust in the messages you are sending.

Harnessing this power goes beyond simply selecting a typeface. It requires an understanding of typographic elements, theory, history, pairing, and application. Websites are just a jumping off point for applying these lessons. By the end of this session, you will be able to use type thoughtfully to communicate more clearly, visually differentiate yourself, and even control the way your message is received.

Presented at WordCamp Minneapolis 2016

Published in: Design
  • Login to see the comments

  • Be the first to like this

More Than Words: The Power of Type

  1. 1. zeldman.com/2015/12/24/the-year-in-design/
  2. 2. getzeroapp.com
  3. 3. hugeinc.com
  4. 4. creaturesandfeatures.me
  5. 5. plated.com
  6. 6. gnosh.co.uk
  7. 7. Powerful?
  8. 8. How? Contrast Size Hierarchy Space
  9. 9. hugeinc.com
  10. 10. Font or Typeface?
  11. 11. Font = what you use Typeface = what you see
  12. 12. How we read text
  13. 13. Photo Background: Randen Pederson on Flickr
  14. 14. Image: NOAA
  15. 15. Image: propublica.org
  16. 16. Image: propublica.org
  17. 17. Credit
  18. 18. Emotions
  19. 19. Too touchy feely?
  20. 20. amazon.com
  21. 21. storage.googleapis.com/g-design/static/product-sans-specimen.pdf
  22. 22. Images: Wikimedia Commons
  23. 23. Image: webdesignerdepot.com
  24. 24. Image: typostrate.com
  25. 25. Photo: Terminal Design, Inc. BEFORE AFTER
  26. 26. Pairing
  27. 27. +
  28. 28. blog.visme.co
  29. 29. Liquorstore is my headline Proxima Nova is my body copy. Bacon ipsum dolor amet meatloaf cupim spare ribs landjaeger. Strip steak turkey leberkas sausage rump, swine beef. Swine andouille cow filet mignon doner. Bacon ball tip bresaola cupim cow kevin pancetta landjaeger, filet mignon strip steak pastrami. Chicken flank beef sausage, hamburger picanha biltong ham hock frankfurter salami. Pork picanha porchetta pork loin. Venison cow pork belly turducken hamburger, corned beef chicken.
  30. 30. Liquorstore is my headline Proxima Nova is my body copy. Bacon ipsum dolor amet meatloaf cupim spare ribs landjaeger. Strip steak turkey leberkas sausage rump, swine beef. Swine andouille cow filet mignon doner. Bacon ball tip bresaola cupim cow kevin pancetta landjaeger, filet mignon strip steak pastrami. Chicken flank beef sausage, hamburger picanha biltong ham hock frankfurter salami. Pork picanha porchetta pork loin. Venison cow pork belly turducken hamburger, corned beef chicken.
  31. 31. Get inspired
  32. 32. 100daysoffonts.com
  33. 33. femmebot.github.io/google-type/
  34. 34. femmebot.github.io/google-type/
  35. 35. femmebot.github.io/google-type/
  36. 36. typegenius.com
  37. 37. typegenius.com
  38. 38. fontflame.com
  39. 39. Other Pairing Resources http://typ.io - Search for a font & get a visual list of other websites using it & CSS http://fontpair.co - Helps designers pair Google Fonts together http://justmytype.co - A collection of font pairings from Typekit and H&FJ typeconnection.com - Game where you try to match fonts tobiasahlin.com/typesource/ - Google Web Font inspiration in HTML & CSS
  40. 40. chrome.google.com/webstore/detail/whatfont/jabopobgcpjmedljpbcaablpmlmfcogm?hl=en
  41. 41. typekit.com/fonts | google.com/fonts
  42. 42. Photo: @anildash on Twitter
  43. 43. Photo: Chank Fonts
  44. 44. Support Indie Foundries Playtype Process Type Foundry Swiss Typefaces TypeTrust Village Type & Design Chank Fonts Colophon Commercial Type Frere-Jones Type Grilli Type Klim Milieu Grotesque Okay Type Optimo P22 Type Foundry

×