Typography and User Experience - WCSF
-
Upload
sara-cannon -
Category
Design
-
view
10.759 -
download
1
description
Transcript of 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