Type, Responsively: Design for Readability & Meaning on Any Screen

584 views
423 views

Published on

Slides from my talk on Responsive Typography at DrupalCon Austin.

Published in: Design, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
584
On SlideShare
0
From Embeds
0
Number of Embeds
6
Actions
Shares
0
Downloads
7
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Type, Responsively: Design for Readability & Meaning on Any Screen

  1. 1. Jason Pamental | @jpamental http://hwdesignco.com DrupalCon Austin | #DrupalCon 23rd May, 2014 Type, Responsively Design for Readability & Meaning on Any Screen
  2. 2. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Who Am I? + Co-founder of + Co-founder of + Co-host of + Co-parent of
  3. 3. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon How Did I Get Here? + + =
  4. 4. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon What We’ll Cover + Lies & deceptions + An honest reconciliation + What is Responsive Typography + Making your typography responsive + Prototypes trump promises
  5. 5. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon When is our industry going stop calling it “web”typography? @sblakeborough, via twitter
  6. 6. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Not sure we can. + 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
  7. 7. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon It’s not what we don’t know that’ll kill us It’s what we willfully ignore
  8. 8. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions 960px
  9. 9. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions
  10. 10. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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)
  11. 11. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Take Away What We Can’t Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  12. 12. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  13. 13. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  14. 14. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  15. 15. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  16. 16. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  17. 17. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  18. 18. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Performance Matters
  19. 19. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Performance Matters
  20. 20. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon FOUT is OUR fault
  21. 21. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon FOUT is OUR fault
  22. 22. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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; }
  23. 23. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance Web fonts loaded
  24. 24. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance No web fonts, uncorrected
  25. 25. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance No web fonts, corrected
  26. 26. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance Web fonts loaded
  27. 27. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Proportion: one size won’t do http://bit.ly/jprwt
  28. 28. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  29. 29. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon For example… http://bit.ly/jprwt
  30. 30. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon For example… http://bit.ly/jprwt
  31. 31. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A More Modern Scale http://bit.ly/jprwt
  32. 32. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  33. 33. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  34. 34. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  35. 35. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  36. 36. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  37. 37. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  38. 38. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  39. 39. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  40. 40. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  41. 41. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  42. 42. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  43. 43. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  44. 44. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  45. 45. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography
  46. 46. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography + Yes, it’s a thing
  47. 47. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography + Yes, it’s a thing + It’s about adapting to screen size, network speed & device capabilities
  48. 48. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  49. 49. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  50. 50. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  51. 51. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon How Do I Do It in Drupal? + Type is tied to design + Belongs in the Theme + Needs layered approach + @font-your-face may or may not do enough
  52. 52. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Do It In Drupal: A Layered Approach
  53. 53. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Prototype, Don’t Promise
  54. 54. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
  55. 55. hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Just out! http://bit.ly/rwtbook
  56. 56. Jason Pamental | @jpamental http://hwdesignco.com Thank You Jason Pamental (@jpamental) ! Slides here: http://bit.ly/jpdcrwtslides ! Please review the session! http://bit.ly/jpdcrwt

×