Typography and User Experience - WCSF

SARA CANNON HTTP://RAN.GE

Sara CannonPartner & 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

IN COMMUNICATION

type

“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

IN NAVIGATION & PREFORMING TASKS

type

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

OPENtype

& 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