Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Jason Pamental | @jpamental
http://hwdesignco.com
DrupalCon Austin | #DrupalCon
23rd May, 2014
Type, Responsively
Design f...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Who Am I?
+ Co-founder of
+ Co-founder of
+ Co-host of
+ Co-pa...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
How Did I Get Here?
+ + =
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
What We’ll Cover
+ Lies & deceptions
+ An honest reconciliatio...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
When is our industry going stop calling it
“web”typography?
@s...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Not sure we can.
+ Encompasses all of what you know about type...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
It’s not what we don’t know
that’ll kill us
It’s what we willf...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
A Long Road to a Make-Believe Place
+ We prop up our vision of...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
A Long Road to a Make-Believe Place
+ We prop up our vision of...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
A Long Road to a Make-Believe Place
+ We prop up our vision of...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Take Away What We Can’t Know
+ Screen size
+ Device capabiliti...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Four Simple Steps
+ Performance: select fonts with care, load ...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Performance Matters
+ Great typography isn’t ‘I used all of th...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Performance Matters
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Performance Matters
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
FOUT is OUR fault
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
FOUT is OUR fault
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ Thi...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Progressively Enhance
No web fonts, uncorrected
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Progressively Enhance
No web fonts, corrected
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Proportion: one size won’t do
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Desktopgeese&handheldgander
+ Small canvas requires subtle
pro...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
For example…
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
For example…
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
A More Modern Scale
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Measure & Scale
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Measure & Scale
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Measure & Scale
http://bit.ly/jprwt
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Measure & Scale
+ Use max-width on elements to keep text reada...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
OpenType Demo
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
OpenType Demo
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
OpenType Demo
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
OpenType Demo
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Polish: Don’t Leave Orphans Behind
Typogrify Module FTW: http:...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Polish: Don’t Leave Orphans Behind
Typogrify Module FTW: http:...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
+ Yes, it’s a thing
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
+ Yes, it’s a thing
+ It’s about ada...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
+ Yes, it’s a thing
+ It’s about ada...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
+ Yes, it’s a thing
+ It’s about ada...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Responsive Web Typography
+ Performance
• Stats, Platforms & S...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
How Do I Do It in Drupal?
+ Type is tied to design
+ Belongs i...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Do It In Drupal: A Layered Approach
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Prototype, Don’t Promise
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
“Designers Should Code As Much As
Artists Should Mix Paint”
~ ...
hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon
Just out!
http://bit.ly/rwtbook
Jason Pamental | @jpamental
http://hwdesignco.com
Thank You
Jason Pamental (@jpamental)
!
Slides here: http://bit.ly/jpdcr...
Upcoming SlideShare
Loading in …5
×

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

778 views

Published on

Slides from my talk on Responsive Typography at DrupalCon Austin.

Published in: Design, Technology
  • Be the first to comment

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

×