Type, Responsively: A more modern approach to type on the web
1. Type, Responsively
A More Modern Approach to Typography on the Web
AIGA RI
11 Feb, 2014
Jason Pamental | @jpamental
http://hwdesignco.com
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
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. When is our industry going stop
calling it “web” typography?
@sblakeborough, via twitter
hwdesignco.com | @jpamental | AIGA RI
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. 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. 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. 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. 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. 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
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. 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
