The NEW Webtypography

Transcript

1. GROUP
   THE
   CRANFORDTEAGUE
   www.cranfordteague.com
   where the sexy is
   Jason Cranford Teague
   @jasonspeaking | #sexynewtype
   THE NEW WEB TYPOGRAPHY
   

   View Slide

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

   YEARS AGO…
   

   View Slide

3. 15 

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

   View Slide

4. 10 

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

   View Slide

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

   View Slide

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

   View Slide

7. THE FUTURE…
   GROUP
   THE
   CRANFORDTEAGUE
   Jason Cranford Teague
   @jasonspeaking | #sexynewtype
   THE NEW WEB TYPOGRAPHY
   Stephen Boss & Jason Cranford Teague
   

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

25. GROUP
    THE
    CRANFORDTEAGUE
    www.cranfordteague.com
    where the sexy is
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

26. TYPOGRAPHIC STYLE 

    GRABS YOUR ATTENTION
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

51. TYPOGRAPHIC VOICE 

    KEEPS YOUR ATTENTION
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

57. FIND YOUR VOICE
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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
    

    View Slide

59. TYPOGRAPHIC DESIGN 

    GIVES YOU 

    SOMETHING TO REMEMBER
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

66. WHEN LEGIBILITY AND
    READABILITY ARE A PROBLEM
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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
    “
    

    View Slide

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
    “
    

    View Slide

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

    View Slide

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
    “
    

    View Slide

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

    View Slide

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

    View Slide

73. WHAT DESIGNERS ALREADY
    KNOW
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. DOES THIS MEAN THAT
    READABILITY DOESN'T MATTER?
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

85. GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    http://inspacewetrust.org/en/
    

    View Slide

86. FREE COPY
    GROUP
    THE
    CRANFORDTEAGUE
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    THE NEW WEB TYPOGRAPHY
    Stephen Boss & Jason Cranford Teague
    

    View Slide

87. GROUP
    THE
    CRANFORDTEAGUE
    www.cranfordteague.com
    THE NEW WEB TYPOGRAPHY
    where the sexy is
    Jason Cranford Teague
    @jasonspeaking | #sexynewtype
    

    View Slide