Embed Size (px)
DESCRIPTION
Type on the web has many roles: it is an interface, a brand, sets tone, and directs the user. Typography has many roles and can either add or take away from User Experience. In this beautiful and exciting talk we’re going to look at various ways type is used, implemented, and dissect the role that it plays in user experience on the web.
Citation preview
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
