Responsive Typography
with Jason Pamental
Presented on September 17 2014 at
FITC's Web Unleashed Toronto 2014
More info at www.fitc.ca
Responsive Typography is the notion that our type must move and change and adapt just as the rest of our designs do. In fact, it may have a bigger impact on readability and usability than any other aspect. In this presentation, Jason Pamental will talk about the ’4 Ps’ of Responsive Web Type:
Performance: Load what you need, when you need it (and how to manage the process)
Progression: Ensure that all devices get a good design and enhance the experience for devices/browsers that can handle it
Proportion: One scale doesn’t fit all screens; Jason will show a more modern scale that can help make designs work better on all devices
Polish: Great design is detail; type is no different. Jason will show how to add refinements like ligatures, fractions, swashes and more, quickly and easily
OBJECTIVE
To introduce the audience to the benefits & beauty of using web fonts and how to use them well on all devices and platforms.
TARGET AUDIENCE
Designers who want to create more beautiful, readable and engaging sites and developers who want to build them to be fast, flexible and robust.
ASSUMED AUDIENCE KNOWLEDGE
Basic understanding of the web, HTML & CSS. Some concepts are a bit more advanced, but it’s not necessary that the audience has tried them before.
5 THINGS THE AUDIENCE WILL LEARN
Why web typography is so important, especially on smaller screens
How to implement web fonts properly for best performance and availability
What is FOUT and how to minimize it well
What to adjust for on smaller screens
How to get beyond the basics and really polish up the details
'Future Evolution of the Internet' delivered by Geoff Huston at Everything Op...
Responsive Typography
1. Jason Pamental | @jpamental
http://hwdesignco.com
Responsive Typography
Design for Meaning, Not for Screen Size
Web Unleashed #WebU2014
16 September, 2014
2. hwdesignco.com | @jpamental | Responsive Typography
+ Built a lot
of these
+ Co-parent of
Who Am I?
+ Co-founder of
+ Tinkerer with
3. hwdesignco.com | @jpamental | Responsive Typography
What We’ll Cover
+ Lies & deceptions about art & science
+ Understanding the value of hats
+ What is Responsive Typography
+ Practicing the Four P’s
4. Art & Science: A Historical Romance
hwdesignco.com | @jpamental | Responsive Typography
DaVinci?
That guy would code
Vermeer:
Master or Technician?
Tim Jenison
Artist or Inventor?
5. Is Tim an artist or is Tim an inventor? I
think the problem is not trying to pick one
of these things for Tim to be – the problem
is that we have that distinction
-Penn Jillette in ‘Tim’s Vermeer’
hwdesignco.com | @jpamental | Responsive Typography
6. Art is inherently tied to the
technology we use to create it
hwdesignco.com | @jpamental | Responsive Typography
No matter how much we try to ignore it
10. When is our industry going stop calling it
hwdesignco.com | @jpamental | Responsive Typography
“web” typography?
@sblakeborough, via twitter
11. hwdesignco.com | @jpamental | Responsive Typography
We can’t.
+ (Insert Ginger Rogers analogy here)
+ Encompasses all of what you know about type & its use, but
+ Typography on the web requires additional consideration
(art & science)
+ Our canvas is fluid; constantly expanding & contracting
+ Reading on screens will only increase
12. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
13. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
I love you
14. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
I love you
15. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words must first be read before they can be understood
16. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words must first be read before they can be understood
Four score and seven years ago our fathers brought forth on
this continent, a new nation, conceived in Liberty, and dedicated
to the proposition that all men are created equal.
17. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words must first be read before they can be understood
Four score and seven years ago our fathers brought forth on this
continent, a new nation, conceived in Liberty, and dedicated to the
proposition that all men are created equal.
18. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Legible means you can read it
+ Readable means you might actually want to
19. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Legible means you can read it
+ Readable means you might actually want to
A tale of a curious affliction
20. hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Legible means you can read it
+ Readable means you might actually want to
A tale of a curious affliction
21. A Design Dilemma: What We Don’t Know
hwdesignco.com | @jpamental | Responsive Typography
+ Screen size
+ Device capabilities
+ Concurrent activities
+ Depth of focus
+ Purpose of visit
26. Responsive Typography: Four Simple Steps
+ Performance: select fonts with care, load what you need &
don’t block the page draw
+ Progressive: plan for failure, tune up the loading process &
fallback fonts to minimize FOUT
+ Proportion: small screens demand subtle scale
+ Polish: Design IS the details: OpenType & then some
hwdesignco.com | @jpamental | Responsive Typography
28. hwdesignco.com | @jpamental | Responsive Typography
Performance Matters
+ Great typography isn’t ‘I used all of them’
+ Load only what you need
Trade Gothic Next LT Pro Bold
this is a typeface this is a font
+ Each font has a performance cost, so budget wisely
35. body { font-family: “Trade Gothic”, helvetica, arial; }
hwdesignco.com | @jpamental | Responsive Typography
FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
+ Add this & give them content, then fonts:
.wf-inactive body { font-family: helvetica, arial; }
+ Adjust font-size, line-height, letter-spacing to avoid jumpiness
+ Making it easy since 2010
43. hwdesignco.com | @jpamental | Responsive Typography
Desktop geese & handheld gander
+ Small canvas requires
subtle proportions
+ What works in print…
works in print
+ Robert Bringhurst matters,
but scale must adapt
http://bit.ly/jprwt
51. Polish: Don’t Leave Orphans Behind
hwdesignco.com | @jpamental | Responsive Typography
+ Typogrify FTW:
http://bit.ly/rt-tpgrfy
http://bit.ly/drupaltypogrify
http://bit.ly/rt-tpgrfy-ee
http://bit.ly/rt-tpgrfy-wp
+ Also try Widowtamer for JS
drop-in solution:
http://bit.ly/rt-widotamer
+ Seems small, but has oversized
impact to user & editor
52. hwdesignco.com | @jpamental | Responsive Typography
A Little in Abundance is a Lot
+ Use max-width on elements to keep text readable
@media (min-width: 58em) {
p { max-width: 38em; }
}
+ CSS3 brings character counts, but not universal
(vw & vh, ch & cx)
+ EMs or REMs, but no PX
+ Don’t forget: use real content!
Because Lorem Ipsum is a poser
53. hwdesignco.com | @jpamental | Responsive Typography
New Tricks
+ Emerging attributes: font-size-adjust & font-smoothing
+ The future is here; it’s just not evenly distributed
+ Try text-rendering engine detection w/font-smoothing
(http://typerendering.com/ - courtesy of @NiceWebType & @bramstein)
63. hwdesignco.com | @jpamental | Responsive Typography
Responsive Web Typography
+ Yes, it’s a thing
+ 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
• The one before? No iPhone either
64. hwdesignco.com | @jpamental | Responsive Typography
Responsive Web Typography
+ Performance
• Stats, Platforms & Screen Tests
+ Progression (It’s the web. Stuff breaks)
• If the font fails, does your design hold up?
+ Proportion
• It’s about composition (think: small paintings)
+ Polish
• Great typography is greater than the sum of its parts
65. “Designers Should Code As Much As
hwdesignco.com | @jpamental | Responsive Typography
Artists Should Mix Paint”
~ Mustafa Kurtuldu (@Mustafa_x)
FOWD London