$30 off During Our Annual Pro Sale. View Details »

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

    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