Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web
-
Upload
future-insights -
Category
Internet
-
view
349 -
download
3
description
Transcript of Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web
![Page 1: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/1.jpg)
Jason Pamental | @jpamental http://hwdesignco.com
Future Insights Live | #FILIVE18th June, 2014
Beautiful (& Responsive) Web Typography
Designing for Readability & Meaning on Any Screen
![Page 2: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/2.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Who Am I?
+ Co-founder of
+ Tinkerer with
+ Author of this
+ Co-parent of
![Page 3: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/3.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
What We’ll Cover
+ Lies & deceptions+ An honest reconciliation+ What is Responsive Typography+ Making your typography responsive+ Prototypes trump promises
![Page 4: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/4.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Art & Technology: A Historical Romance
DaVinci? That guy would code
Vermeer: Master or Technician?
Tim Jenison Artist or Inventor?
![Page 5: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/5.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Is Tim an artist or is Tim an inventor? I think the problem is not trying to pick one of these things for Tim to be – the problem is that we have that distinction
-Penn Jillette in ‘Tim’s Vermeer’
![Page 6: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/6.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Art is inherently tied to the technology we use to create it
No matter how much we try to ignore it
![Page 7: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/7.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
When is our industry going stop calling it “web” typography?
@sblakeborough, via twitter
![Page 8: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/8.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
We can’t.
+ Encompasses all of what you know about type & its use, but+ Typography on the web requires additional consideration
(art & science)+ Our canvas is fluid; constantly expanding & contracting+ Reading on screens will only increase
![Page 9: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/9.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
It’s not what we don’t know that’ll kill us
It’s what we willfully ignore
![Page 10: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/10.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions
960px
![Page 11: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/11.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions
![Page 12: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/12.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions
“A page is not a valuable concept even for someone who wants to read a book.”
Jeff Eaton (@eaton)
![Page 13: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/13.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Take Away What We Can’t Know
+ Screen size+ Device capabilities+ Concurrent activities+ Depth of focus+ Purpose of visit
![Page 14: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/14.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Focus on What’s Left: Typography
![Page 15: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/15.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Focus on What’s Left: Typography
![Page 16: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/16.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Focus on What’s Left: Typography
![Page 17: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/17.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Focus on What’s Left: Typography
![Page 18: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/18.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Four Simple Steps
+ Performance: select fonts with care, load what you need & don’t block the page draw
+ Progressive: plan for failure, tune up the loading process & fallback fonts to minimize FOUT
+ Proportion: small screens demand subtle scale+ Polish: Design IS the details: OpenType & then some
![Page 19: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/19.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Performance Matters
+ Great typography isn’t ‘I used all of them’+ Load only what you need
Trade Gothic Next LT Pro Bold
this is a typeface this is a font
+ Each font has a performance cost, so budget wisely
![Page 20: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/20.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Performance Matters
![Page 21: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/21.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Performance Matters
![Page 22: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/22.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
FOUT is OUR fault
![Page 23: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/23.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
FOUT is OUR fault
![Page 24: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/24.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active+ This CSS results in a blank screen during load:
+ Add this & give them content, then fonts:
+ Adjust font-size, line-height, letter-spacing to avoid jumpiness + Making it easy since 2010
body { font-family: “Trade Gothic”, helvetica, arial; }
.wf-inactive body { font-family: helvetica, arial; }
![Page 25: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/25.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Progressively Enhance
Web fonts loaded
![Page 26: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/26.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Progressively Enhance
No web fonts, uncorrected
![Page 27: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/27.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Progressively Enhance
No web fonts, corrected
![Page 28: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/28.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Progressively Enhance
Web fonts loaded
![Page 29: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/29.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Progressively Enhance
![Page 30: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/30.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Proportion: one size won’t do
http://bit.ly/jprwt
![Page 31: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/31.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Desktop geese & handheld gander
+ Small canvas requires subtle proportions
+ What works in print… works in print
+ Robert Bringhurst matters, but scale must adapt
http://bit.ly/jprwt
![Page 32: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/32.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
For example…
http://bit.ly/jprwt
![Page 33: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/33.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
For example…
http://bit.ly/jprwt
![Page 34: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/34.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
A More Modern Scale
http://bit.ly/jprwt
![Page 35: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/35.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Measure & Scale
http://bit.ly/jprwt
![Page 36: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/36.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Measure & Scale
+ Use max-width on elements to keep text readable @media (min-width: 58em) { p { max-width: 38em; } }
+ CSS3 brings character counts, but not universal (ch & cx)+ EMs or REMs, but no PX+ Don’t forget: use real content!
Because Lorem Ipsum is a poser
![Page 37: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/37.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Polish: Don’t Forget Fit & Finish
![Page 38: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/38.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Polish: Don’t Forget Fit & Finish
![Page 39: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/39.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
OpenType Demo
![Page 40: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/40.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
OpenType Demo
![Page 41: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/41.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
OpenType Demo
![Page 42: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/42.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
OpenType Demo
![Page 43: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/43.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Polish: Don’t Forget Fit & Finish
![Page 44: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/44.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Polish: Don’t Leave Orphans Behind
Typogrify Module FTW: http://drupal.org/project/typogrify
![Page 45: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/45.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Polish: Don’t Leave Orphans Behind
Typogrify Module FTW: http://drupal.org/project/typogrify
![Page 46: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/46.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Responsive Web Typography
+ Yes, it’s a thing+ It’s about adapting to screen size, network speed & device
capabilities+ It’s about designing for what’s next
• Last Winter Olympics: there was no iPad
• The one before? No iPhone either
![Page 47: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/47.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Responsive Web Typography
+ Performance • Stats, Platforms & Screen Tests
+ Progression (It’s the web. Stuff breaks) • If the font fails, does your design hold up?
+ Proportion • It’s about composition (think: small paintings)
+ Polish
![Page 48: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/48.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Prototype, Don’t Promise
![Page 49: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/49.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
“Designers Should Code As Much As Artists Should Mix Paint”
~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
![Page 50: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/50.jpg)
hwdesignco.com | @jpamental | Future Insights Live | #FILIVE
Just out!
http://bit.ly/rwtbook
Use Discount Code WKEARRL
by June 20th for 50% off!
![Page 51: Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web](https://reader034.fdocuments.net/reader034/viewer/2022042510/53f8c6148d7f72b82e8b4823/html5/thumbnails/51.jpg)
Jason Pamental | @jpamental http://hwdesignco.com
Thank YouJason Pamental (@jpamental)
!Slides here: http://bit.ly/jpfiltype