Date post: | 27-Jan-2015 |
Category: |
Design |
Upload: | jason-pamental |
View: | 105 times |
Download: | 1 times |
Jason Pamental | @jpamental http://hwdesignco.com
AIGA RI11 Feb, 2014
Type, ResponsivelyA More Modern Approach to Typography on the Web
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
hwdesignco.com | @jpamental | AIGA RI
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 – but letters have emotion
+ Type is the most efficient design element (in terms of file size)
hwdesignco.com | @jpamental | AIGA RI
When is our industry going stop calling it “web” typography?
@sblakeborough, via twitter
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
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
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
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)
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
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
hwdesignco.com | @jpamental | AIGA RI
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 specific screen size
+ Test! Font quality is improving, but no excuse for not knowing how it looks on ________
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!
Jason Pamental | @jpamental http://hwdesignco.com
Conference (#hashtag)Date
Thank you!http://bit.ly/jprwtaiga