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.
Type, Responsively
A More Modern Approach to Typography on the Web

AIGA RI
11 Feb, 2014

Jason Pamental | @jpamental
http...
Drawing on Quicksand
+ Responsive Web Design changed

everything… and nothing
+ Forces focus on conveying meaning &

hiera...
Grammy.com

hwdesignco.com | @jpamental | AIGA RI
What’s type got to do with it?
+ Everything: type is the most prevalent

design element on the page
+ Words have meaning –...
When is our industry going stop
calling it “web” typography?
@sblakeborough, via twitter

hwdesignco.com | @jpamental | AI...
Not sure we can.
+ Typography on the web requires

additional consideration (art & science)
+ Our canvas is fluid; constant...
Responsive Web Typography
+ Yes, it’s a thing
+ It’s not a publicity stunt
+ It’s about adapting to screen size,

network ...
Responsive Web Typography
+ Yes, it’s a thing
+ It’s not a publicity stunt
+ It’s about adapting to screen size,

network ...
Responsive Web Typography
+ Type choices
• Stats, Platforms & Screen Tests

+ Fallback fonts (It’s the web. Stuff breaks)
•...
Desktop Geese & Handheld Gander
+ Small canvas requires

subtle proportions

+ What works in print…

works in print

+ Bri...
Elements of Typographic Style
+ Bringhurst’ scale

works well on desktop

+ Looks ungainly on

small screens

+ Have a sca...
For example…

hwdesignco.com | @jpamental | AIGA RI
For example…

hwdesignco.com | @jpamental | AIGA RI
For example…

hwdesignco.com | @jpamental | AIGA RI
Responsive Typographic Style
+ Line length is important, but use device

norms for size
+ Think relative proportion, not s...
Don’t Panic.
+ There are lots of resources
+ Load only what you need

(specify each weight/variant)

+ Manage the loading ...
Thank you!
http://bit.ly/jprwtaiga

Conference (#hashtag)
Date

Jason Pamental | @jpamental
http://hwdesignco.com
Upcoming SlideShare
Loading in …5
×

Type, Responsively: A more modern approach to type on the web

645 views

Published on

Published in: Design
  • Be the first to comment

Type, Responsively: A more modern approach to type on the web

  1. 1. Type, Responsively A More Modern Approach to Typography on the Web AIGA RI 11 Feb, 2014 Jason Pamental | @jpamental http://hwdesignco.com
  2. 2. Drawing on Quicksand + Responsive Web Design changed everything… and nothing + Forces focus on conveying meaning & hierarchy through relationships & proportion + Can’t avoid it: some in US are over 50% mobile–only hwdesignco.com | @jpamental | AIGA RI
  3. 3. Grammy.com hwdesignco.com | @jpamental | AIGA RI
  4. 4. 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) hwdesignco.com | @jpamental | AIGA RI
  5. 5. When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | AIGA RI
  6. 6. Not sure we can. + Typography on the web requires additional consideration (art & science) + Our canvas is fluid; constantly expanding & contracting + Amazon sells more e-books than physical ones. Since 2011 hwdesignco.com | @jpamental | AIGA RI
  7. 7. Responsive Web Typography + Yes, it’s a thing + It’s not a publicity stunt + It’s about adapting to screen size, network speed & device capabilities + It’s about designing for what’s next hwdesignco.com | @jpamental | AIGA RI
  8. 8. Responsive Web Typography + Yes, it’s a thing + It’s not a publicity stunt + 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 hwdesignco.com | @jpamental | AIGA RI
  9. 9. Responsive Web Typography + Type choices • Stats, Platforms & Screen Tests + Fallback fonts (It’s the web. Stuff breaks) • If the font fails, does your design hold up? + Proportion • It’s about composition (think: small paintings) hwdesignco.com | @jpamental | AIGA RI
  10. 10. Desktop Geese & Handheld Gander + Small canvas requires subtle proportions + What works in print… works in print + Bringhurst matters, but scale must adapt hwdesignco.com | @jpamental | AIGA RI
  11. 11. Elements of Typographic Style + Bringhurst’ scale works well on desktop + Looks ungainly on small screens + Have a scale that helps translate hwdesignco.com | @jpamental | AIGA RI
  12. 12. For example… hwdesignco.com | @jpamental | AIGA RI
  13. 13. For example… hwdesignco.com | @jpamental | AIGA RI
  14. 14. For example… hwdesignco.com | @jpamental | AIGA RI
  15. 15. 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 ________ hwdesignco.com | @jpamental | AIGA RI
  16. 16. 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 + Have fun! hwdesignco.com | @jpamental | AIGA RI
  17. 17. Thank you! http://bit.ly/jprwtaiga Conference (#hashtag) Date Jason Pamental | @jpamental http://hwdesignco.com

×