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, 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 MinneBar 14 on April 27, 2019

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

6. spotify.ooo

19. Font or Typeface?

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

22. How we read text

28. Photo Background: Randen Pederson on Flickr

29. Image: NOAA

30. Image: propublica.org

31. Image: propublica.org

32. Credit

37. crazyegg.com/blog/psychology-of-fonts-infographic/

38. amazon.com

39. arbys.com/saucy_af

40. public-sans.digital.gov

43. Image: webdesignerdepot.com

44. Image: typostrate.com

45. visme.co/blog/type-anatomy/

46. creativemarket.com/blog/whats-the-difference-between-leading-kerning-and-tracking

47. xkcd.com/1015/

50. Photo: Terminal Design, Inc.
BEFORE AFTER

51. Pairing

52. canva.com/learn/typography-mistakes/

53. +

54. blog.visme.co

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

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

57. Get inspired

58. 100daysoffonts.com

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

60. canva.com/font-combinations

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

62. 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 - Collection of font pairings from Typekit and H&FJ
typeconnection.com - Typographic dating game where you try to match fonts
tobiasahlin.com/typesource/ - Google Web Font inspiration in HTML & CSS

63. Think beyond
the font menu

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

65. fonts.adobe.com | fonts.google.com

66. fontsquirrel.com

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. Your turn

69. How?
Contrast
Size
Hierarchy
Space

70. Don’t
use too many fonts at once
center everything
add 2 spaces after a period
be afraid to experiment
stop believin’

73. Photo: @anildash on Twitter

74. Photo: Chank Fonts

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