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
FOWD London | #FOWD
08 April, 2014
Type, Responsively
A More Modern Appr...
hwdesignco.com | @jpamental | FOWD London | #FOWD
A Bit About Me
+ Live in the smallest state in the US
+ Designed my first...
hwdesignco.com | @jpamental | FOWD London | #FOWD
An acknowledgement
+ I’m a fan of Responsive Web Design
+ RWD is a big d...
hwdesignco.com | @jpamental | FOWD London | #FOWD
What’s type got to do with it?
+ Everything: type is the most prevalent
...
hwdesignco.com | @jpamental | FOWD London | #FOWD
When is our industry going stop
calling it“web”typography?
@sblakeboroug...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Not sure we can.
+ Encompasses all of what you know about
type & its use...
hwdesignco.com | @jpamental | FOWD London | #FOWD
So let’s move on.
hwdesignco.com | @jpamental | FOWD London | #FOWD
Hat–tip to London
+ First spoke about web fonts here in 2011
+ Used the ...
hwdesignco.com | @jpamental | FOWD London | #FOWD
But what does it mean?
hwdesignco.com | @jpamental | FOWD London | #FOWD
Responsive Typography, Defined
+ It’s more than just web fonts
+ Respons...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ You’ve got 5 seconds before they bail
+ Don’t wast...
hwdesignco.com | @jpamental | FOWD London | #FOWD
FOUT is YOUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS res...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ Tune fallback-specific CSS to avoid reflow
+ Test yo...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ Tune fallback-specific CSS to avoid reflow
+ Test yo...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ Tune fallback-specific CSS to avoid reflow
+ Test yo...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ Tune fallback-specific CSS to avoid reflow
+ Test yo...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Performance matters
+ Design for readability & beauty
+ But load only wh...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Progressively enhance
+ Asia, India, Africa are huge markets & growing
+...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Proportion: one size won’t do
+ Much has been written about RWD:
• Respo...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Desktopgeese&handheldgander
+ Small canvas requires
subtle proportions
+...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Elements of Typographic Style
+ Bringhurst’ scale
works well on desktop
...
hwdesignco.com | @jpamental | FOWD London | #FOWD
For example…
hwdesignco.com | @jpamental | FOWD London | #FOWD
For example…
hwdesignco.com | @jpamental | FOWD London | #FOWD
For example…
hwdesignco.com | @jpamental | FOWD London | #FOWD
Responsive Typographic Style
+ Line length is important, but use device
...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Polish: design is details
+ Type is your voice. Speak eloquently.
+ Real...
hwdesignco.com | @jpamental | FOWD London | #FOWD
"This" is not“that”
+ CMS are dumb
+ Use libraries like Typogrify & Smar...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Cozy is as cozy does
+ Loose letters look sloppy
+ Browsers aren’t so gr...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Cozy is as cozy does
+ Loose letters look sloppy
+ Browsers aren’t so gr...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Cozy is as cozy does
+ Loose letters look sloppy
+ Browsers aren’t so gr...
hwdesignco.com | @jpamental | FOWD London | #FOWD
OpenType Feature Fest
+ Real kerning tables
+ Ligatures, Fractions & Swa...
hwdesignco.com | @jpamental | FOWD London | #FOWD
OpenType Feature Fest
+ Real kerning tables
+ Ligatures, Fractions & Swa...
hwdesignco.com | @jpamental | FOWD London | #FOWD
OpenType Feature Fest
+ Real kerning tables
+ Ligatures, Fractions & Swa...
hwdesignco.com | @jpamental | FOWD London | #FOWD
So let’s review.
hwdesignco.com | @jpamental | FOWD London | #FOWD
Responsive Web Typography
+ Yes, it’s a thing
+ It’s about adapting to s...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Responsive Web Typography
+ Performance
• Stats, Platforms & Screen Test...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Don’t Panic.
+ There are lots of resources
+ Load only what you need

(s...
hwdesignco.com | @jpamental | FOWD London | #FOWD
Oh, and one more thing…
My book is in beta!
http://typeresponsively.com
...
Jason Pamental | @jpamental
http://hwdesignco.com
Thank you!
http://bit.ly/jpfowd-rwt
FOWD London | #FOWD
08 April, 2014
hwdesignco.com | @jpamental | FOWD London | #FOWD
Resources & Links
+ Oliver Reichenstein’s post

http://ia.net/blog/respo...
Upcoming SlideShare
Loading in …5
×

Type, Responsively: A More Modern Approach to Typography on the Web

982 views

Published on

Slides from that talk I gave on Responsive Typography at Future of Web Design London in April, 2014

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

Type, Responsively: A More Modern Approach to Typography on the Web

  1. 1. Jason Pamental | @jpamental http://hwdesignco.com FOWD London | #FOWD 08 April, 2014 Type, Responsively A More Modern Approach to Typography on the Web
  2. 2. hwdesignco.com | @jpamental | FOWD London | #FOWD A Bit About Me + Live in the smallest state in the US + Designed my first site before there was a <table> tag + Love to learn. Love to share even more. + Follow @aProperCollie around a lot 
 & post pictures on Instagram
  3. 3. hwdesignco.com | @jpamental | FOWD London | #FOWD An acknowledgement + I’m a fan of Responsive Web Design + RWD is a big deal. Really. + It’s also part of a larger conversation about design + That includes typography
  4. 4. hwdesignco.com | @jpamental | FOWD London | #FOWD What’s type got to do with it? + Everything: type is the most prevalent design element on the page + Words have meaning – 
 but letters have emotion + Type is the most efficient design element (in terms of file size) + …but it works differently on the web
  5. 5. hwdesignco.com | @jpamental | FOWD London | #FOWD When is our industry going stop calling it“web”typography? @sblakeborough, via twitter
  6. 6. hwdesignco.com | @jpamental | FOWD London | #FOWD 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 | FOWD London | #FOWD So let’s move on.
  8. 8. hwdesignco.com | @jpamental | FOWD London | #FOWD Hat–tip to London + First spoke about web fonts here in 2011 + Used the phrase ‘Responsive Typography’ + Wrote about it for fonts.com, Typecast.com + Since then, others have used it too • Oliver Reichenstein @ ia.net • Nick Sherman @ AEA
  9. 9. hwdesignco.com | @jpamental | FOWD London | #FOWD But what does it mean?
  10. 10. hwdesignco.com | @jpamental | FOWD London | #FOWD Responsive Typography, Defined + It’s more than just web fonts + Responsive Typography must be: • Performant • Progressive • Proportional • Polished + So let’s explore
  11. 11. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + You’ve got 5 seconds before they bail + Don’t waste users’ time + Respect the web, respect your users + Get the content on the screen + Font loader classes FTW
  12. 12. hwdesignco.com | @jpamental | FOWD London | #FOWD FOUT is YOUR fault + Use these: .wf-inactive / .wf-active + This CSS results in a blank screen during load:
 + Add this & give them content, then fonts:
 + Yes, it’s that simple body { font-family: “Trade Gothic”, helvetica, arial; } .wf-inactive body { font-family: helvetica, arial; }
  13. 13. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing to avoid jumpiness Web fonts loaded
  14. 14. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing to avoid jumpiness No web fonts, uncorrected
  15. 15. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing to avoid jumpiness No web fonts, corrected
  16. 16. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing to avoid jumpiness Web fonts loaded
  17. 17. hwdesignco.com | @jpamental | FOWD London | #FOWD Performance matters + Design for readability & beauty + But 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 + Budget wisely
  18. 18. hwdesignco.com | @jpamental | FOWD London | #FOWD Progressively enhance + Asia, India, Africa are huge markets & growing + Most handsets running Opera Mini + Which does not support @font-face + cue: sad trombone + 350 Million reasons you should have tuned your fallback styles
  19. 19. hwdesignco.com | @jpamental | FOWD London | #FOWD Proportion: one size won’t do + Much has been written about RWD: • Responsive Images • Emerging UI Patterns • Performance Optimization + Most ignore the scale of your type + I find this… disturbing.
  20. 20. hwdesignco.com | @jpamental | FOWD London | #FOWD Desktopgeese&handheldgander + Small canvas requires subtle proportions + What works in print… works in print + Bringhurst matters, but scale must adapt
  21. 21. hwdesignco.com | @jpamental | FOWD London | #FOWD Elements of Typographic Style + Bringhurst’ scale works well on desktop + Looks ungainly on small screens + Here’s a scale that helps translate:
 http://bit.ly/jprwt
  22. 22. hwdesignco.com | @jpamental | FOWD London | #FOWD For example…
  23. 23. hwdesignco.com | @jpamental | FOWD London | #FOWD For example…
  24. 24. hwdesignco.com | @jpamental | FOWD London | #FOWD For example…
  25. 25. hwdesignco.com | @jpamental | FOWD London | #FOWD Responsive Typographic Style + Line length is important, but use device norms for size + Think relative proportion, not specific screen size + Test! Font quality is improving, but no excuse for not knowing how it looks on ________
  26. 26. hwdesignco.com | @jpamental | FOWD London | #FOWD Polish: design is details + Type is your voice. Speak eloquently. + Real quotation marks are brilliant + Browsers are lazy letter-spacers + OpenType is Awesome. See what the kerfuffle is all about
  27. 27. hwdesignco.com | @jpamental | FOWD London | #FOWD "This" is not“that” + CMS are dumb + Use libraries like Typogrify & Smartypants + Automatically replace quotes, &’s, more + Never leave an 
 orphan
  28. 28. hwdesignco.com | @jpamental | FOWD London | #FOWD Cozy is as cozy does + Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers

  29. 29. hwdesignco.com | @jpamental | FOWD London | #FOWD Cozy is as cozy does + Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers

  30. 30. hwdesignco.com | @jpamental | FOWD London | #FOWD Cozy is as cozy does + Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers
 + OpenType Features bring real kerning!
  31. 31. hwdesignco.com | @jpamental | FOWD London | #FOWD OpenType Feature Fest + Real kerning tables + Ligatures, Fractions & Swashes oh my!

  32. 32. hwdesignco.com | @jpamental | FOWD London | #FOWD OpenType Feature Fest + Real kerning tables + Ligatures, Fractions & Swashes oh my!

  33. 33. hwdesignco.com | @jpamental | FOWD London | #FOWD OpenType Feature Fest + Real kerning tables + Ligatures, Fractions & Swashes oh my!
 + Every design element must have a purpose + Even if that purpose is simply greater beauty
  34. 34. hwdesignco.com | @jpamental | FOWD London | #FOWD So let’s review.
  35. 35. hwdesignco.com | @jpamental | FOWD London | #FOWD 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
  36. 36. hwdesignco.com | @jpamental | FOWD London | #FOWD 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
  37. 37. hwdesignco.com | @jpamental | FOWD London | #FOWD Don’t Panic. + There are lots of resources + Load only what you need
 (specify each weight/variant) + Manage the loading process
 http://bit.ly/jpfontfall2 + Use a modular scale
 http://bit.ly/jprwt + Add panache! (.net magazine May, 2014)
  38. 38. hwdesignco.com | @jpamental | FOWD London | #FOWD Oh, and one more thing… My book is in beta! http://typeresponsively.com (sign up to be notified when it’s available)
  39. 39. Jason Pamental | @jpamental http://hwdesignco.com Thank you! http://bit.ly/jpfowd-rwt FOWD London | #FOWD 08 April, 2014
  40. 40. hwdesignco.com | @jpamental | FOWD London | #FOWD Resources & Links + Oliver Reichenstein’s post
 http://ia.net/blog/responsive-typography-the-basics/ + A More Modern Scale
 http://typecast.com/blog/a-more- modern-scale-for-web-typography/

×