type, responsively: a more modern approach to type on the web
DESCRIPTION
TRANSCRIPT
![Page 1: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/1.jpg)
Jason Pamental | @jpamental http://hwdesignco.com
AIGA RI11 Feb, 2014
Type, ResponsivelyA More Modern Approach to Typography on the Web
![Page 2: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/2.jpg)
hwdesignco.com | @jpamental | AIGA RI
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
![Page 3: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/3.jpg)
hwdesignco.com | @jpamental | AIGA RI
Grammy.com
![Page 4: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/4.jpg)
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 – but letters have emotion
+ Type is the most efficient design element (in terms of file size)
![Page 5: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/5.jpg)
hwdesignco.com | @jpamental | AIGA RI
When is our industry going stop calling it “web” typography?
@sblakeborough, via twitter
![Page 6: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/6.jpg)
hwdesignco.com | @jpamental | AIGA RI
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
![Page 7: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/7.jpg)
hwdesignco.com | @jpamental | AIGA RI
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
![Page 8: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/8.jpg)
hwdesignco.com | @jpamental | AIGA RI
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
![Page 9: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/9.jpg)
hwdesignco.com | @jpamental | AIGA RI
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)
![Page 10: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/10.jpg)
hwdesignco.com | @jpamental | AIGA RI
Desktop Geese & Handheld Gander
+ Small canvas requires subtle proportions
+ What works in print… works in print
+ Bringhurst matters, but scale must adapt
![Page 11: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/11.jpg)
hwdesignco.com | @jpamental | AIGA RI
Elements of Typographic Style
+ Bringhurst’ scale works well on desktop
+ Looks ungainly on small screens
+ Have a scale that helps translate
![Page 12: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/12.jpg)
hwdesignco.com | @jpamental | AIGA RI
For example…
![Page 13: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/13.jpg)
hwdesignco.com | @jpamental | AIGA RI
For example…
![Page 14: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/14.jpg)
hwdesignco.com | @jpamental | AIGA RI
For example…
![Page 15: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/15.jpg)
hwdesignco.com | @jpamental | AIGA RI
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 ________
![Page 16: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/16.jpg)
hwdesignco.com | @jpamental | AIGA RI
Don’t Panic.
+ There are lots of resources+ Load only what you need
(specify each weight/variant)
+ Manage the loading processhttp://bit.ly/jpfontfall2
+ Use a modular scalehttp://bit.ly/jprwt
+ Have fun!
![Page 17: Type, Responsively: A more modern approach to type on the web](https://reader033.vdocuments.us/reader033/viewer/2022042814/54c798d74a7959820a8b457b/html5/thumbnails/17.jpg)
Jason Pamental | @jpamental http://hwdesignco.com
Conference (#hashtag)Date
Thank you!http://bit.ly/jprwtaiga