SARA CANNON HTTP://RAN.GE

Sara Cannon Partner & Creative
Director at Range http://ran.ge @saracannon slideshare.net/saracannon

“Design is the method of
putting form and content together” - PAUL RAND

WEB DESIGN IS 95% TYPOGRAPHY
- OLIVER REICHENSTEIN

Craigslist

Craigslist Redesign Concept by Lance
Culbreth

NYTimes

What does Type have to
do with User Experience?

BAD TYPOGRAPHY = BAD USER
EXPERIENCE

Body copy is too small
or unreadable

Not enough white space

too much letterspacing on
body

“Don’t letterspace the lowercase without
a reason… A man who would letterspace lowercase would steal sheep … If this wisdom needs updating, it is chiefly to add that a woman who would letterspace lowercase would steal sheep as well” - ROBERT BRINGHURST - “THE ELEMENTS OF TYPOGRAPHICAL STYLE”

Poor typeface choices

Drudge Report

Drudge Report

Drudge Report

What does Type have to
do with User Experience?

GOOD TYPOGRAPHY = GOOD USER
EXPERIENCE

“Typography exists to honor content”
- ROBERT BRINGHURST- “THE ELEMENTS OF TYPOGRAPHICAL STYLE”

gather.ly Adobe Garamond Pro &
Freight Sans Pro

Medium

“Contrast is, in my humble
opinion, the most crucial tenet of graphic design. It forges connections and distinctions between elements.” - JASON SANTAMARIA - “ON WEB TYPOGRAPHY”

Medium

Medium

AdAge

nautil.us

type
IN COMMUNICATION

“All design work seems to
have three common traits: there is the message to the work, the tone of that message, and the format the work takes” - FRANK CHIMERO

rsq.com

Moon Camp

WhoaNellyCatering.com

Digital
Storytelling

nytimes.com/projects/2012/snow-fall

theguardian.com/world/interactive/2013/nov/01/snowden-nsa-
files-surveillance-revelations-decoded

pitchfork.com/features/articles/9467-wax-and-wane-the-tough-
realities-behind-vinyls-comeback

http://aquatilis.tv

type IN NAVIGATION & PREFORMING
TASKS

Hyperlink
Button
hyperlink

Design, Develop,
Measure

“Design and product process must
change to accommodate experimentation” - DAN MCKINLEY, ETSY -

Get type into the browser
early as possible

OPEN
type
& CSS

Ligatures
font-feature-settings:"liga" 1;

Ligatures -moz-font-feature-settings:"liga" 1; -moz-font-feature-settings:"liga=1"; -ms-font-feature-settings:"liga"
1; -o-font-feature-settings:"liga" 1; -webkit-font-feature-settings:"liga" 1; font-feature-settings:"liga" 1; .h1 { }

Number Case: Lining (lnumb) font-feature-settings:"lnum"
1;

Tabular Figures (monospace) font-feature-settings: "tnum"
1;

Fractions
font-feature-settings:"frac" 1;

Alternative Style Sets font-feature-settings: "ss01"
1;

Small Caps
font-feature-settings: "smcp" 1;

clagnut.com/sandbox/css3

COMBINING
type

femmebot.github.io/google-type

femmebot.github.io/google-type

abookapart.com/products/on-web-typography

The Elements of Typographical Style
Robert Bringhurst

The Shape of Design -
Frank Chimero

LEGIBILITY

Thank You @saracannon slideshare.net/saracannon SARA
CANNON HTTP://RAN.GE