The NEW Web Typography: Where the Sexy is 2016

THECRANFORDTEAGUEwww.cranfordteague.com

THE NEW WEB TYPOGRAPHYwhere the sexy is

Jason Cranford Teague @jasonspeaking | #sexynewtype

20 YEARS AGO…

THECRANFORDTEAGUE

THE NEW WEB TYPOGRAPHY

15 YEARS AGO…

THECRANFORDTEAGUE

10 YEARS AGO…

THECRANFORDTEAGUE

NOW…

www.cranfordteague.com

THECRANFORDTEAGUE

THE FUTURE…

THECRANFORDTEAGUE

Stephen Boss & Jason Cranford Teague

WHAT IS SEXY?

THECRANFORDTEAGUE

folha de s. paulo newspaper

THECRANFORDTEAGUE

Grabs your attention…

THECRANFORDTEAGUE

Keeps your attention…

THECRANFORDTEAGUE

Gives you something to remember…

THECRANFORDTEAGUE

HTML + CSS = SEXY?

Web Typography

BORING

SEXY TYPOGRAPHY…

THECRANFORDTEAGUE

Grabs your attention Keeps your attention Gives you something to remember

TYPOGRAPHIC STYLE GRABS YOUR ATTENTION

THECRANFORDTEAGUE

.1 Seconds

THECRANFORDTEAGUE

CONTRAST…

THECRANFORDTEAGUE

CONTRAST…

THECRANFORDTEAGUE

High Color Contrast

CONTRAST…

THECRANFORDTEAGUE

Low Color Contrast

CONTRAST…

THECRANFORDTEAGUE

Mixed Color Contrast

CONTRAST…

THECRANFORDTEAGUE

Stylecontrast

CONTRAST…

THECRANFORDTEAGUE

weightContrast

CONTRAST…

THECRANFORDTEAGUE

widthContrast

CONTRAST…

THECRANFORDTEAGUE

TypefaceContrast

CONTRAST…

THECRANFORDTEAGUE

multiContrast

SPACE…

THECRANFORDTEAGUE

SPACE…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

SCALE…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

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…

THECRANFORDTEAGUE

TEXTURE…

THECRANFORDTEAGUE

Drop Shadow

TEXTURE…

THECRANFORDTEAGUE

Emboss or Bevel

TEXTURE…

THECRANFORDTEAGUE

Read Me

TEXTURE…

THECRANFORDTEAGUE

Read Me

TYPOGRAPHIC VOICE KEEPS YOUR ATTENTION

THECRANFORDTEAGUE

font :: type

voice :: speech

THECRANFORDTEAGUE

AA A A AAA A A A A

AA A A AA

IF I SAY…

THECRANFORDTEAGUE

“I’m going to kill you”

THECRANFORDTEAGUE

“I’m going to kill you”

Pirate = UglyQua

Insane = Sybil Green

Robotic = Synchro LET

Suave = Cooper Std

FIND YOUR VOICE

THECRANFORDTEAGUE

Brand D

Brand IBrand H

Brand EBrand F Brand NBrand C

Brand GBrand KBrand J Brand Q

Brand X

THECRANFORDTEAGUE

TYPOGRAPHIC DESIGN GIVES YOU SOMETHING TO REMEMBER

THECRANFORDTEAGUE

WHEN LEGIBILITY AND READABILITY ARE A PROBLEM

THECRANFORDTEAGUE

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

THECRANFORDTEAGUE

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

THECRANFORDTEAGUE

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

THECRANFORDTEAGUE

CONTRAST…

WHAT DESIGNERS ALREADY KNOW

THECRANFORDTEAGUE

DOES THIS MEAN THAT READABILITY DOESN'T MATTER?

THECRANFORDTEAGUE

https://trends2015.hautehorlogerie.org

THECRANFORDTEAGUE

SEIA.org

THECRANFORDTEAGUE

http://www.annasafroncik.it

THECRANFORDTEAGUE

http://inspacewetrust.org/en/

FREE COPY

THECRANFORDTEAGUE

Stephen Boss & Jason Cranford Teague

THECRANFORDTEAGUEwww.cranfordteague.com

THE NEW WEB TYPOGRAPHYwhere the sexy is

The NEW Web Typography: Where the Sexy is 2016

Design

Lenceria Sexy

Sexy Slovakia

Design ~ Typography Typography 101 Using Typography to Enhance Content

The Elements of Typography. The Anatomy of Type Baseline: The invisible line where letters sit

Graphic Design · Expressive Typography 1 Graphic Design: Typography Expressive Typography exists to honor content. — Robert Bringhurst, The Elements of Typographic Style Typography

Typography Selecting appropriate typefaces for a document. Typography

Typography Timeline (Typography II)

Sexy Conic Sections Project.. Sexy

Sexy Orchids

Sexy infrastruktura

Statui Sexy

A touch of typography responsive typography

Malizioso… · Giovane e Sexy … Young and sexy … Chic … Rock …

Mediate.com€¦ · adler ideas are sexy too. adler ideas are sexy too. adler ideas are sexy too

Typography. Typography exists to honor content. —Robert Bringhurst

TYPOGRAPHY What is type? Where and how is it used? Video “A Lesson on Typography”

Nature Sexy

Album Sexy

SEXY PEOPLE

Typography and Type Design · 1/12 Updated February 2020 Typography and Type Design // Laura Meseguer is a freelance designer, typographer and type designer based in Barcelona, where