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 MinneWebCon 2017

2. zeldman.com/2015/12/24/the-year-in-design/

4. getzeroapp.com

5. spotify.ooo

6. paul-rand.com

7. creaturesandfeatures.me

8. bolden.nl

9. bolden.nl

10. bolden.nl

11. plated.com

12. chriswilhitedesign.com

13. gnosh.co.uk

14. trumpcushion.com

15. Powerful?

16. How?
Contrast
Size
Hierarchy
Space

19. hugeinc.com

20. nurturedigital.com

21. Font or Typeface?

22. Font = what you use
Typeface = what you see

23. How we read text

29. Photo Background: Randen Pederson on Flickr

30. Image: NOAA

31. Image: propublica.org

32. Image: propublica.org

33. Credit

34. Emotions

38. Too touchy feely?

39. amazon.com

40. storage.googleapis.com/g-design/static/product-sans-specimen.pdf

41. Images: Wikimedia Commons

43. Image: webdesignerdepot.com

44. Image: typostrate.com

46. Photo: Terminal Design, Inc.
BEFORE AFTER

47. Pairing

48. +

49. blog.visme.co

50. 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.

51. 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.

52. Get inspired

53. 100daysoffonts.com

54. femmebot.github.io/google-type/

55. femmebot.github.io/google-type/

56. femmebot.github.io/google-type/

57. fontflame.com

58. canva.com/font-combinations

59. fonts.google.com/specimen/Playfair+Display

60. 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

61. chrome.google.com/webstore/detail/whatfont/

62. typekit.com/fonts | fonts.google.com

65. Photo: @anildash on Twitter

66. Photo: Chank Fonts

67. 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

68. @myklroventine
mykl@orangejackalope.com
Primary Fonts Used:
Liquorstore
Proxima Nova
Roboto
Humblle
Neutraface