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

1,243 views

Published on

Responsive Typography
with Jason Pamental

Presented on September 17 2014 at
FITC's Web Unleashed Toronto 2014
More info at www.fitc.ca

Responsive Typography is the notion that our type must move and change and adapt just as the rest of our designs do. In fact, it may have a bigger impact on readability and usability than any other aspect. In this presentation, Jason Pamental will talk about the ’4 Ps’ of Responsive Web Type:

Performance: Load what you need, when you need it (and how to manage the process)
Progression: Ensure that all devices get a good design and enhance the experience for devices/browsers that can handle it

Proportion: One scale doesn’t fit all screens; Jason will show a more modern scale that can help make designs work better on all devices

Polish: Great design is detail; type is no different. Jason will show how to add refinements like ligatures, fractions, swashes and more, quickly and easily

OBJECTIVE
To introduce the audience to the benefits & beauty of using web fonts and how to use them well on all devices and platforms.

TARGET AUDIENCE
Designers who want to create more beautiful, readable and engaging sites and developers who want to build them to be fast, flexible and robust.

ASSUMED AUDIENCE KNOWLEDGE
Basic understanding of the web, HTML & CSS. Some concepts are a bit more advanced, but it’s not necessary that the audience has tried them before.

5 THINGS THE AUDIENCE WILL LEARN
Why web typography is so important, especially on smaller screens
How to implement web fonts properly for best performance and availability
What is FOUT and how to minimize it well
What to adjust for on smaller screens
How to get beyond the basics and really polish up the details

Published in: Internet
  • Be the first to comment

Responsive Typography

  1. 1. Jason Pamental | @jpamental http://hwdesignco.com Responsive Typography Design for Meaning, Not for Screen Size Web Unleashed #WebU2014 16 September, 2014
  2. 2. hwdesignco.com | @jpamental | Responsive Typography + Built a lot of these + Co-parent of Who Am I? + Co-founder of + Tinkerer with
  3. 3. 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
  4. 4. Art & Science: A Historical Romance hwdesignco.com | @jpamental | Responsive Typography DaVinci? That guy would code Vermeer: Master or Technician? Tim Jenison Artist or Inventor?
  5. 5. 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
  6. 6. Art is inherently tied to the technology we use to create it hwdesignco.com | @jpamental | Responsive Typography No matter how much we try to ignore it
  7. 7. hwdesignco.com | @jpamental | Responsive Typography Art+Science
  8. 8. hwdesignco.com | @jpamental | Responsive Typography Design+Development
  9. 9. hwdesignco.com | @jpamental | Responsive Typography
  10. 10. When is our industry going stop calling it hwdesignco.com | @jpamental | Responsive Typography “web” typography? @sblakeborough, via twitter
  11. 11. 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
  12. 12. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + Words have meaning, but letters have emotion
  13. 13. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + Words have meaning, but letters have emotion I love you
  14. 14. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + Words have meaning, but letters have emotion I love you
  15. 15. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + Words must first be read before they can be understood
  16. 16. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + 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. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + 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.
  18. 18. hwdesignco.com | @jpamental | Responsive Typography Type Is the Voice of Your Words + Legible means you can read it + Readable means you might actually want to
  19. 19. hwdesignco.com | @jpamental | Responsive Typography 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
  20. 20. hwdesignco.com | @jpamental | Responsive Typography 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
  21. 21. A Design Dilemma: What We Don’t Know hwdesignco.com | @jpamental | Responsive Typography + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  22. 22. hwdesignco.com | @jpamental | Responsive Typography Focus on What’s Left: Typography
  23. 23. hwdesignco.com | @jpamental | Responsive Typography Focus on What’s Left: Typography
  24. 24. hwdesignco.com | @jpamental | Responsive Typography Focus on What’s Left: Typography
  25. 25. hwdesignco.com | @jpamental | Responsive Typography Focus on What’s Left: Typography
  26. 26. 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
  27. 27. hwdesignco.com | @jpamental | Responsive Typography Performance
  28. 28. 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
  29. 29. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  30. 30. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  31. 31. hwdesignco.com | @jpamental | Responsive Typography Progressive Performance
  32. 32. Progressive Enhancement hwdesignco.com | @jpamental | Responsive Typography
  33. 33. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  34. 34. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  35. 35. body { font-family: “Trade Gothic”, 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: .wf-inactive body { font-family: helvetica, arial; } + Adjust font-size, line-height, letter-spacing to avoid jumpiness + Making it easy since 2010
  36. 36. hwdesignco.com | @jpamental | Responsive Typography Progressively Enhance Web fonts loaded
  37. 37. hwdesignco.com | @jpamental | Responsive Typography Progressively Enhance No web fonts, uncorrected
  38. 38. hwdesignco.com | @jpamental | Responsive Typography Progressively Enhance No web fonts, corrected
  39. 39. hwdesignco.com | @jpamental | Responsive Typography Progressively Enhance Web fonts loaded
  40. 40. Backwards Compatible, Future Friendly hwdesignco.com | @jpamental | Responsive Typography
  41. 41. hwdesignco.com | @jpamental | Responsive Typography Proportion
  42. 42. hwdesignco.com | @jpamental | Responsive Typography Proportion: one size won’t do http://bit.ly/jprwt
  43. 43. hwdesignco.com | @jpamental | Responsive Typography 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
  44. 44. hwdesignco.com | @jpamental | Responsive Typography For example… http://bit.ly/jprwt
  45. 45. hwdesignco.com | @jpamental | Responsive Typography For example… http://bit.ly/jprwt
  46. 46. hwdesignco.com | @jpamental | Responsive Typography A More Modern Scale http://bit.ly/jprwt
  47. 47. hwdesignco.com | @jpamental | Responsive Typography Polish
  48. 48. hwdesignco.com | @jpamental | Responsive Typography Polish: Don’t Forget Fit & Finish
  49. 49. hwdesignco.com | @jpamental | Responsive Typography Polish: Don’t Forget Fit & Finish
  50. 50. hwdesignco.com | @jpamental | Responsive Typography Polish: Don’t Forget Fit & Finish
  51. 51. 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
  52. 52. hwdesignco.com | @jpamental | Responsive Typography A Little in Abundance is a Lot + Use max-width on elements to keep text readable @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
  53. 53. 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)
  54. 54. hwdesignco.com | @jpamental | Responsive Typography True Life Story
  55. 55. hwdesignco.com | @jpamental | Responsive Typography True Life Story -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  56. 56. hwdesignco.com | @jpamental | Responsive Typography A Perfect Page 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 markup needed + Fully responsive
  62. 62. hwdesignco.com | @jpamental | Responsive Typography Realization
  63. 63. hwdesignco.com | @jpamental | Responsive Typography 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
  64. 64. hwdesignco.com | @jpamental | Responsive Typography 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
  65. 65. “Designers Should Code As Much As hwdesignco.com | @jpamental | Responsive Typography Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
  66. 66. hwdesignco.com | @jpamental | Responsive Typography Just out! http://bit.ly/rwtbook
  67. 67. Jason Pamental | @jpamental http://hwdesignco.com Thank You Jason Pamental (@jpamental) ! Slides: http://bit.ly/jpwebu14 Code: http://bit.ly/rtwcode

×