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

The NEW Webtypography

The NEW Webtypography

Jason CranfordTeague

August 17, 2016
Tweet

More Decks by Jason CranfordTeague

Other Decks in Design

Transcript

  1. GROUP THE CRANFORDTEAGUE www.cranfordteague.com where the sexy is Jason Cranford

    Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  2. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY 20 
 YEARS AGO…
  3. 15 
 YEARS AGO… GROUP THE CRANFORDTEAGUE Jason Cranford Teague

    @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  4. 10 
 YEARS AGO… GROUP THE CRANFORDTEAGUE Jason Cranford Teague

    @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  5. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY NOW… www.cranfordteague.com
  6. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  7. THE FUTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking |

    #sexynewtype THE NEW WEB TYPOGRAPHY Stephen Boss & Jason Cranford Teague
  8. WHAT IS SEXY? GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking

    | #sexynewtype THE NEW WEB TYPOGRAPHY
  9. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  10. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  11. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  12. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  13. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  14. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  15. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  16. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  17. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  18. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY folha de s. paulo newspaper
  19. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  20. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY Grabs your attention…
  21. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY Keeps your attention…
  22. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY Gives you something to remember…
  23. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY HTML + CSS = SEXY? Web Typography BORING
  24. SEXY TYPOGRAPHY… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking |

    #sexynewtype THE NEW WEB TYPOGRAPHY Grabs your attention Keeps your attention Gives you something to remember
  25. GROUP THE CRANFORDTEAGUE www.cranfordteague.com where the sexy is Jason Cranford

    Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  26. TYPOGRAPHIC STYLE 
 GRABS YOUR ATTENTION GROUP THE CRANFORDTEAGUE Jason

    Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  27. .1 Seconds GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking |

    #sexynewtype THE NEW WEB TYPOGRAPHY
  28. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  29. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY
  30. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY High Color Contrast
  31. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Low Color Contrast
  32. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Mixed Color Contrast
  33. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Stylecontrast
  34. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY weightContrast
  35. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY widthContrast
  36. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY TypefaceContrast
  37. CONTRAST… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY multiContrast
  38. SPACE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY
  39. SPACE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  40. SPACE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  41. SPACE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  42. SPACE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  43. SCALE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY
  44. SCALE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  45. SCALE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Looking-Glass house One thing was certain, that the white kitten had had nothing to do with it:--it was the black kitten's fault entirely. For the white kitten had been having its face washed by the old cat for the last quarter of an hour (and bearing it pretty well, considering); so you see that it couldn't have had any hand in the mischief.
  46. TEXTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY
  47. TEXTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Drop Shadow
  48. TEXTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Emboss or Bevel
  49. TEXTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Read Me
  50. TEXTURE… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY Read Me
  51. TYPOGRAPHIC VOICE 
 KEEPS YOUR ATTENTION GROUP THE CRANFORDTEAGUE Jason

    Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  52. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY font :: type voice :: speech
  53. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  54. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY A A A A A A A A A A A A A A A A A
  55. IF I SAY… GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking

    | #sexynewtype THE NEW WEB TYPOGRAPHY “I’m going to kill you”
  56. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY “I’m going to kill you” “I’m going to kill you” “I’m going to kill you” “I’m going to kill you” Pirate = UglyQua Insane = Sybil Green Robotic = Synchro LET Suave = Cooper Std
  57. FIND YOUR VOICE GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking

    | #sexynewtype THE NEW WEB TYPOGRAPHY
  58. Brand D Brand I Brand H Brand E Brand F

    Brand N Brand C Brand G Brand K Brand J Brand Q Brand X GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  59. TYPOGRAPHIC DESIGN 
 GIVES YOU 
 SOMETHING TO REMEMBER GROUP

    THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  60. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  61. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  62. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  63. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  64. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  65. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  66. WHEN LEGIBILITY AND READABILITY ARE A PROBLEM GROUP THE CRANFORDTEAGUE

    Jason Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  67. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY A long-standing typographic maxim is that the most legible typefaces are “transparent” to the reader–that is, they don’t call undue attention to themselves. Additionally, the most legible typefaces contain big features and have restrained design characteristics. — Allan Haley “
  68. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY When people find something easy to read, they take that as a sign that they've mastered it. Conversely, the researchers believe harder-to-read fonts provoke a feeling of lack of mastery and encourage deeper processing. — Daniel Oppenheimer “
  69. DISFLUENCY GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype

    THE NEW WEB TYPOGRAPHY
  70. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY A number of so called "desirable difficulties" show that when people process information deeply they learn more effectively, and depth of processing is not necessarily easy. — Daniel Oppenheimer “
  71. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  72. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY CONTRAST…
  73. WHAT DESIGNERS ALREADY KNOW GROUP THE CRANFORDTEAGUE Jason Cranford Teague

    @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  74. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  75. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  76. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  77. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  78. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  79. DOES THIS MEAN THAT READABILITY DOESN'T MATTER? GROUP THE CRANFORDTEAGUE

    Jason Cranford Teague @jasonspeaking | #sexynewtype THE NEW WEB TYPOGRAPHY
  80. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  81. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY
  82. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY https://trends2015.hautehorlogerie.org
  83. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY SEIA.org
  84. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY http://www.annasafroncik.it
  85. GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking | #sexynewtype THE

    NEW WEB TYPOGRAPHY http://inspacewetrust.org/en/
  86. FREE COPY GROUP THE CRANFORDTEAGUE Jason Cranford Teague @jasonspeaking |

    #sexynewtype THE NEW WEB TYPOGRAPHY Stephen Boss & Jason Cranford Teague
  87. GROUP THE CRANFORDTEAGUE www.cranfordteague.com THE NEW WEB TYPOGRAPHY where the

    sexy is Jason Cranford Teague @jasonspeaking | #sexynewtype