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

689

Published on

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

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

No Downloads
Views
Total Views
689
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
6
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

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/
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×