beautiful (& responsive) web typography: designing for readability and meaning on the responsive web

Download Beautiful (& Responsive) Web Typography: Designing for Readability and Meaning on the Responsive Web

Post on 23-Aug-2014

328 views

Category:

Internet

3 download

Embed Size (px)

DESCRIPTION

Jason Pamental's talk from Future Insights Live 2014 in Las Vegas: "Responsive web design is one of the most significant advances in web design. But what about your type? We have to look at screen size, relative proportion, device norms and compatibility in order to best present our design and convey its meaning and intent across devices and screen sizes." Miss Jason's talk? Join us at a future show: www.futureofwebdesign.com. Sign up for our newsletter at futureinsights.com and get 15% off your next conference. Check out Jason's book on Responsive Typography here: http://bit.ly/rwtbook

TRANSCRIPT

  • Jason Pamental | @jpamental http://hwdesignco.com Future Insights Live | #FILIVE 18th June, 2014 Beautiful (& Responsive) Web Typography Designing for Readability & Meaning on Any Screen
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Who Am I? + Co-founder of + Tinkerer with + Author of this + Co-parent of
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE What Well Cover + Lies & deceptions + An honest reconciliation + What is Responsive Typography + Making your typography responsive + Prototypes trump promises
  • 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?
  • 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 Tims Vermeer
  • 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
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE When is our industry going stop calling it webtypography? @sblakeborough, via twitter
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE We cant. + Encompasses all of what you know about type & its use, but + Typography on the web requires additional consideration (art & science) + Our canvas is uid; constantly expanding & contracting + Reading on screens will only increase
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Its not what we dont know thatll kill us Its what we willfully ignore
  • 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
  • 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
  • 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. Je Eaton (@eaton)
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Take Away What We Cant Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Focus on Whats Left: Typography
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Four Simple Steps + Performance: select fonts with care, load what you need & dont 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
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Performance Matters + Great typography isnt 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
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Performance Matters
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Performance Matters
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE FOUT is OUR fault
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE FOUT is OUR fault
  • 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; }
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Progressively Enhance Web fonts loaded
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Progressively Enhance No web fonts, uncorrected
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Progressively Enhance No web fonts, corrected
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Progressively Enhance Web fonts loaded
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Progressively Enhance
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Proportion: one size wont do http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Desktopgeese&handheldgander + Small canvas requires subtle proportions + What works in print works in print + Robert Bringhurst matters, but scale must adapt http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE For example http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE For example http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE A More Modern Scale http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Measure & Scale http://bit.ly/jprwt
  • 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 + Dont forget: use real content! Because Lorem Ipsum is a poser
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Polish: Dont Forget Fit & Finish
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Polish: Dont Forget Fit & Finish
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE OpenType Demo
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE OpenType Demo
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE OpenType Demo
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE OpenType Demo
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Polish: Dont Forget Fit & Finish
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Polish: Dont Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Polish: Dont Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  • hwdesignco.com | @jpamental | Future Insights Live | #FILIVE Responsive Web Typography + Yes, it