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.
Responsive Typography 
hwdesignco.com | @jpamental | Responsive Typography 
ARTIFACT PVD 
30 September, 2014 
Design for M...
hwdesignco.com | @jpamental | Responsive Typography 
What We’ll Cover 
+ Lies & deceptions about art & science 
+ Understa...
hwdesignco.com | @jpamental | Responsive Typography 
Art & Science: 
A Historical Romance 
DaVinci? 
That guy would code 
...
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 – th...
Art is inherently tied to the 
technology we use to create it 
No matter how much we try to ignore it 
hwdesignco.com | @j...
Art+Science 
hwdesignco.com | @jpamental | Responsive Typography
Design+Development 
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography
When is our industry going stop calling it 
“web” typography? 
@sblakeborough, via twitter 
hwdesignco.com | @jpamental | ...
hwdesignco.com | @jpamental | Responsive Typography 
We can’t. 
+(Insert Ginger Rogers analogy here) 
+ Encompasses all of...
Type Is the Voice of Your Words 
+ Words have meaning, but letters have emotion 
hwdesignco.com | @jpamental | Responsive ...
Type Is the Voice of Your Words 
+ Words have meaning, but letters have emotion 
hwdesignco.com | @jpamental | Responsive ...
Type Is the Voice of Your Words 
+ Words have meaning, but letters have emotion 
hwdesignco.com | @jpamental | Responsive ...
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+Words must first be read 
before th...
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+Words must first be read 
before th...
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+Words must first be read 
before th...
Type Is the Voice of Your Words 
+Legible means you can read it 
+Readable means you might actually want to 
hwdesignco.co...
Type Is the Voice of Your Words 
+Legible means you can read it 
+Readable means you might actually want to 
A tale of a c...
Type Is the Voice of Your Words 
+Legible means you can read it 
+Readable means you might actually want to 
A tale of a c...
hwdesignco.com | @jpamental | Responsive Typography 
A Design Dilemma: 
What We Don’t Know 
+ Screen size 
+ Device capabi...
Focus on What’s Left: Typography 
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography 
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography 
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography 
hwdesignco.com | @jpamental | Responsive Typography
Responsive Typography: 
Four Simple Steps 
+ Performance: select fonts with care, load 
what you need & don’t block the pa...
hwdesignco.com | @jpamental | Responsive Typography 
Performance
hwdesignco.com | @jpamental | Responsive Typography 
Performance Matters 
+ Great typography isn’t ‘I used all of them’ 
+...
hwdesignco.com | @jpamental | Responsive Typography 
Performance Matters
hwdesignco.com | @jpamental | Responsive Typography 
Performance Matters
Progressive Performance 
hwdesignco.com | @jpamental | Responsive Typography
Progressive Enhancement 
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography 
FOUT is OUR fault
hwdesignco.com | @jpamental | Responsive Typography 
FOUT is OUR fault
body { font-family: “Trade Gothic”, helvetica, arial; } 
.wf-inactive body { font-family: helvetica, arial; } 
hwdesignco....
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
Web fonts loaded
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
No web fonts, uncorrected
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
No web fonts, corrected
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
Web fonts loaded
Backwards Compatible, Future Friendly 
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography 
Proportion
Proportion: one size won’t do 
http://bit.ly/jprwt 
hwdesignco.com | @jpamental | Responsive Typography
Desktop geese & handheld gander 
hwdesignco.com | @jpamental | Responsive Typography 
+Small canvas requires 
subtle propo...
hwdesignco.com | @jpamental | Responsive Typography 
For example… 
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography 
For example… 
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography 
A More Modern Scale 
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography 
Polish
Polish: Don’t Forget Fit & Finish 
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Forget Fit & Finish 
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Forget Fit & Finish 
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Leave Orphans Behind 
hwdesignco.com | @jpamental | Responsive Typography 
+ Typogrify FTW: 
http://bit.ly/r...
A Little in Abundance is a Lot 
+ Use max-width on elements to keep text readable 
hwdesignco.com | @jpamental | Responsiv...
hwdesignco.com | @jpamental | Responsive Typography 
New Tricks 
+ Emerging attributes: 
font-size-adjust & font-smoothing...
hwdesignco.com | @jpamental | Responsive Typography 
True Life Story
hwdesignco.com | @jpamental | Responsive Typography 
True Life Story 
-webkit-font-smoothing: antialiased; 
-moz-osx-font-...
A Perfect Page 
hwdesignco.com | @jpamental | Responsive Typography
A Perfect Page 
hwdesignco.com | @jpamental | Responsive Typography 
or at least a far better start
hwdesignco.com | @jpamental | Responsive Typography 
Inspiration
hwdesignco.com | @jpamental | Responsive Typography 
Inspiration 
+ Oversize 2-level header 
+ Stylized subhead 
+ Byline ...
hwdesignco.com | @jpamental | Responsive Typography 
Frustration
hwdesignco.com | @jpamental | Responsive Typography 
A Sneak Peek
hwdesignco.com | @jpamental | Responsive Typography 
Realization 
+ Oversize 2-level header 
+ Stylized subhead 
+ Byline ...
hwdesignco.com | @jpamental | Responsive Typography 
Realization
Responsive Web Typography 
+ Yes, it’s a thing 
+ It’s about adapting to screen size, network 
speed & device capabilities...
Responsive Web Typography 
+ Performance 
• Stats, Platforms & Screen Tests 
+ Progression (It’s the web. Stuff breaks) 
•...
“Designers Should Code As Much 
As Artists Should Mix Paint” 
~ Mustafa Kurtuldu (@Mustafa_x) 
hwdesignco.com | @jpamental...
hwdesignco.com | @jpamental | Responsive Typography 
Just out! 
http://bit.ly/rwtbook
hwdesignco.com | @jpamental | Responsive Typography 
Thank You 
Jason Pamental (@jpamental) 
! 
Slides: http://bit.ly/jpar...
Upcoming SlideShare
Loading in …5
×

Responsive Typography: Design for meaning, not for screen size

1,149 views

Published on

My talk from ARTIFACT Providence from September, 2014. Responsive Typography focuses on making your typography effective, fast and finessed.

Published in: Design
  • Be the first to comment

Responsive Typography: Design for meaning, not for screen size

  1. 1. Responsive Typography hwdesignco.com | @jpamental | Responsive Typography ARTIFACT PVD 30 September, 2014 Design for Meaning, Not for Screen Size
  2. 2. hwdesignco.com | @jpamental | Responsive Typography What We’ll Cover + Lies & deceptions about art & science + Understanding the value of hats + What is Responsive Typography + Practicing the Four P’s
  3. 3. hwdesignco.com | @jpamental | Responsive Typography Art & Science: A Historical Romance DaVinci? That guy would code Vermeer: Master or Technician? Tim Jenison Artist or Inventor?
  4. 4. 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’ hwdesignco.com | @jpamental | Responsive Typography
  5. 5. Art is inherently tied to the technology we use to create it No matter how much we try to ignore it hwdesignco.com | @jpamental | Responsive Typography
  6. 6. Art+Science hwdesignco.com | @jpamental | Responsive Typography
  7. 7. Design+Development hwdesignco.com | @jpamental | Responsive Typography
  8. 8. hwdesignco.com | @jpamental | Responsive Typography
  9. 9. When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | Responsive Typography
  10. 10. hwdesignco.com | @jpamental | Responsive Typography We can’t. +(Insert Ginger Rogers analogy here) + 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
  11. 11. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography
  12. 12. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography I love you
  13. 13. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography I love you
  14. 14. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +Words must first be read before they can be understood
  15. 15. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +Words must first be read before they can be understood Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
  16. 16. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +Words must first be read before they can be understood Four score and seven years ago our fathers brought forth on this continent, a new nation, conceived in Liberty, and dedicated to the proposition that all men are created equal.
  17. 17. Type Is the Voice of Your Words +Legible means you can read it +Readable means you might actually want to hwdesignco.com | @jpamental | Responsive Typography
  18. 18. Type Is the Voice of Your Words +Legible means you can read it +Readable means you might actually want to A tale of a curious affliction hwdesignco.com | @jpamental | Responsive Typography
  19. 19. Type Is the Voice of Your Words +Legible means you can read it +Readable means you might actually want to A tale of a curious affliction hwdesignco.com | @jpamental | Responsive Typography
  20. 20. hwdesignco.com | @jpamental | Responsive Typography A Design Dilemma: What We Don’t Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  21. 21. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  22. 22. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  23. 23. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  24. 24. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  25. 25. Responsive Typography: 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 hwdesignco.com | @jpamental | Responsive Typography
  26. 26. hwdesignco.com | @jpamental | Responsive Typography Performance
  27. 27. hwdesignco.com | @jpamental | Responsive Typography 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
  28. 28. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  29. 29. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  30. 30. Progressive Performance hwdesignco.com | @jpamental | Responsive Typography
  31. 31. Progressive Enhancement hwdesignco.com | @jpamental | Responsive Typography
  32. 32. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  33. 33. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  34. 34. body { font-family: “Trade Gothic”, helvetica, arial; } .wf-inactive body { font-family: helvetica, arial; } hwdesignco.com | @jpamental | Responsive Typography 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
  35. 35. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography Web fonts loaded
  36. 36. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography No web fonts, uncorrected
  37. 37. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography No web fonts, corrected
  38. 38. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography Web fonts loaded
  39. 39. Backwards Compatible, Future Friendly hwdesignco.com | @jpamental | Responsive Typography
  40. 40. hwdesignco.com | @jpamental | Responsive Typography Proportion
  41. 41. Proportion: one size won’t do http://bit.ly/jprwt hwdesignco.com | @jpamental | Responsive Typography
  42. 42. Desktop geese & handheld gander hwdesignco.com | @jpamental | Responsive Typography +Small canvas requires subtle proportions +What works in print… works in print +Robert Bringhurst matters, but scale must adapt http://bit.ly/jprwt
  43. 43. hwdesignco.com | @jpamental | Responsive Typography For example… http://bit.ly/jprwt
  44. 44. hwdesignco.com | @jpamental | Responsive Typography For example… http://bit.ly/jprwt
  45. 45. hwdesignco.com | @jpamental | Responsive Typography A More Modern Scale http://bit.ly/jprwt
  46. 46. hwdesignco.com | @jpamental | Responsive Typography Polish
  47. 47. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  48. 48. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  49. 49. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  50. 50. Polish: Don’t Leave Orphans Behind hwdesignco.com | @jpamental | Responsive Typography + Typogrify FTW: http://bit.ly/rt-tpgrfy http://bit.ly/drupaltypogrify http://bit.ly/rt-tpgrfy-ee http://bit.ly/rt-tpgrfy-wp + Also try Widowtamer for JS drop-in solution: http://bit.ly/rt-widotamer + Seems small, but has oversized impact to user & editor
  51. 51. A Little in Abundance is a Lot + Use max-width on elements to keep text readable hwdesignco.com | @jpamental | Responsive Typography @media (min-width: 58em) { p { max-width: 38em; } } + CSS3 brings character counts, but not universal (vw & vh, ch & cx) + EMs or REMs, but no PX + Don’t forget: use real content! Because Lorem Ipsum is a poser
  52. 52. hwdesignco.com | @jpamental | Responsive Typography New Tricks + Emerging attributes: font-size-adjust & font-smoothing + The future is here; it’s just not evenly distributed + Try text-rendering engine detection w/font-smoothing (http://typerendering.com courtesy of @NiceWebType & @bramstein)
  53. 53. hwdesignco.com | @jpamental | Responsive Typography True Life Story
  54. 54. hwdesignco.com | @jpamental | Responsive Typography True Life Story -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  55. 55. A Perfect Page hwdesignco.com | @jpamental | Responsive Typography
  56. 56. A Perfect Page hwdesignco.com | @jpamental | Responsive Typography or at least a far better start
  57. 57. hwdesignco.com | @jpamental | Responsive Typography Inspiration
  58. 58. hwdesignco.com | @jpamental | Responsive Typography Inspiration + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote
  59. 59. hwdesignco.com | @jpamental | Responsive Typography Frustration
  60. 60. hwdesignco.com | @jpamental | Responsive Typography A Sneak Peek
  61. 61. hwdesignco.com | @jpamental | Responsive Typography Realization + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote + Virtually no extra markup necessary + Fully responsive
  62. 62. hwdesignco.com | @jpamental | Responsive Typography Realization
  63. 63. 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 hwdesignco.com | @jpamental | Responsive Typography
  64. 64. 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 • Great typography is greater than the sum of its parts hwdesignco.com | @jpamental | Responsive Typography
  65. 65. “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) hwdesignco.com | @jpamental | Responsive Typography FOWD London
  66. 66. hwdesignco.com | @jpamental | Responsive Typography Just out! http://bit.ly/rwtbook
  67. 67. hwdesignco.com | @jpamental | Responsive Typography Thank You Jason Pamental (@jpamental) ! Slides: http://bit.ly/jpartpvd14 Code: http://bit.ly/rtwcode

×