The NEW Webtypography - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

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.

Slide 40

Slide 40 text

Slide 41

Slide 41 text

Slide 42

Slide 42 text

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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.

Slide 45

Slide 45 text

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

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 “

Slide 68

Slide 68 text

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 “

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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 “

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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

Slide 84

Slide 84 text

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

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

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