Embed Size (px)
Citation preview
GROUP
THECRANFORDTEAGUEwww.cranfordteague.com
THE NEW WEB TYPOGRAPHYwhere the sexy is
Jason Cranford Teague @jasonspeaking | #sexynewtype
20 YEARS AGO…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
15 YEARS AGO…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
10 YEARS AGO…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
NOW…
www.cranfordteague.com
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
THE FUTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Stephen Boss & Jason Cranford Teague
WHAT IS SEXY?
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
folha de s. paulo newspaper
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Grabs your attention…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Keeps your attention…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Gives you something to remember…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
HTML + CSS = SEXY?
Web Typography
BORING
SEXY TYPOGRAPHY…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Grabs your attention Keeps your attention Gives you something to remember
TYPOGRAPHIC STYLE GRABS YOUR ATTENTION
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
.1 Seconds
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
High Color Contrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Low Color Contrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Mixed Color Contrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Stylecontrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
weightContrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
widthContrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
TypefaceContrast
CONTRAST…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
multiContrast
SPACE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
SPACE…
GROUP
THECRANFORDTEAGUE
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.
SPACE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Looking-Glass house One thing was certain, that the white k i t ten had had nothing to do wi th i t : - - i t was the black k i t ten's faul t ent i re ly. For the whi te k i t ten had been having i ts face washed by the old cat for the last quarter of an hour (and bear ing i t pret ty wel l , consider ing); so you see that i t couldn't have had any hand in the mischief .
SPACE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Looking-Glass house
One thing was certain, that the white k i t ten had had nothing to do wi th i t : - - i t was the black k i t ten's faul t ent i re ly. For the whi te k i t ten had been having i ts face washed by the old cat for the last quarter of an hour (and bear ing i t pret ty wel l , consider ing); so you see that i t couldn't have had any hand in the mischief .
SPACE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Looking-Glass house
One thing was certain, that the white k i t ten had had nothing to do wi th i t : - - i t was the black k i t ten's faul t ent i re ly. For the whi te k i t ten had been having i ts face washed by the old cat for the last quarter of an hour (and bear ing i t pret ty wel l , consider ing); so you see that i t couldn't have had any hand in the mischief .
SCALE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
SCALE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Looking-Glass house
One thing was certain, that the white k i t ten had had nothing to do with i t : - - i t was the black k i t ten's faul t ent i re ly. For the white k i t ten had been having i ts face washed by the old cat for the last quarter of an hour (and bear ing i t pret ty wel l , consider ing); so you see that i t couldn't have had any hand in the mischief .
SCALE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Looking-Glass house One thing was certain, that the white k i t ten had
had nothing to do wi th i t : - - i t was the black k i t ten's faul t ent i re ly. For the white k i t ten had been having i ts face washed by the old cat for the last quarter of an hour (and bear ing i t pret ty wel l , consider ing); so you see that i t couldn't have had any hand in the mischief .
TEXTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
TEXTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Drop Shadow
TEXTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Emboss or Bevel
TEXTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Read Me
TEXTURE…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Read Me
TYPOGRAPHIC VOICE KEEPS YOUR ATTENTION
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
font :: type
voice :: speech
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
AA A A AAA A A A A
AA A A AA
IF I SAY…
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
“I’m going to kill you”
GROUP
THECRANFORDTEAGUE
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
FIND YOUR VOICE
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Brand D
Brand IBrand H
Brand EBrand F Brand NBrand C
Brand GBrand KBrand J Brand Q
Brand X
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
TYPOGRAPHIC DESIGN GIVES YOU SOMETHING TO REMEMBER
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
WHEN LEGIBILITY AND READABILITY ARE A PROBLEM
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
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
“
GROUP
THECRANFORDTEAGUE
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
“
DISFLUENCY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
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
“
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
CONTRAST…
WHAT DESIGNERS ALREADY KNOW
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
DOES THIS MEAN THAT READABILITY DOESN'T MATTER?
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
https://trends2015.hautehorlogerie.org
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
SEIA.org
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
http://www.annasafroncik.it
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
http://inspacewetrust.org/en/
FREE COPY
GROUP
THECRANFORDTEAGUE
Jason Cranford Teague @jasonspeaking | #sexynewtype
THE NEW WEB TYPOGRAPHY
Stephen Boss & Jason Cranford Teague
GROUP
THECRANFORDTEAGUEwww.cranfordteague.com
THE NEW WEB TYPOGRAPHYwhere the sexy is
Jason Cranford Teague @jasonspeaking | #sexynewtype
