The document discusses responsive web typography and how designers need to adapt their typographic approaches for different screen sizes and devices. It emphasizes that responsive typography is about conveying meaning through relationships and proportion across a variety of contexts. Designers must consider type choices, fallback fonts, line length proportions appropriate for different devices, and testing fonts on different screens. The overall message is that responsive typography requires an adaptive mindset and approach to work effectively across a range of technologies.

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

3. Grammy.com
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

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

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

14. For example…
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

17. Thank you!
http://bit.ly/jprwtaiga
Conference (#hashtag)
Date
Jason Pamental | @jpamental
http://hwdesignco.com