Upload
fitc
View
312
Download
3
Tags:
Embed Size (px)
DESCRIPTION
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
Citation preview
Jason Pamental | @jpamental http://hwdesignco.com
Web Unleashed #WebU201416 September, 2014
Responsive TypographyDesign for Meaning, Not for Screen Size
hwdesignco.com | @jpamental | Responsive Typography
+ Built a lot of these
+ Co-parent of
Who Am I?
+ Co-founder of
+ Tinkerer with
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
hwdesignco.com | @jpamental | Responsive Typography
Art & Science: A Historical Romance
DaVinci? That guy would code
Vermeer: Master or Technician?
Tim Jenison Artist or Inventor?
hwdesignco.com | @jpamental | Responsive Typography
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
Art is inherently tied to the technology we use to create it
No matter how much we try to ignore it
hwdesignco.com | @jpamental | Responsive Typography
Art+Science
hwdesignco.com | @jpamental | Responsive Typography
Design+Development
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography
When is our industry going stop calling it “web” typography?
@sblakeborough, via twitter
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
hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
I love you
hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words have meaning, but letters have emotion
I love you
hwdesignco.com | @jpamental | Responsive Typography
Type Is the Voice of Your Words
+ Words must first be read before they can be understood
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.
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.
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
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
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
hwdesignco.com | @jpamental | Responsive Typography
A Design Dilemma: What We Don’t Know
+ Screen size+ Device capabilities+ Concurrent activities+ Depth of focus+ Purpose of visit
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Responsive Typography
Focus on What’s Left: Typography
hwdesignco.com | @jpamental | Responsive Typography
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
Performance
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
hwdesignco.com | @jpamental | Responsive Typography
Performance Matters
hwdesignco.com | @jpamental | Responsive Typography
Performance Matters
hwdesignco.com | @jpamental | Responsive Typography
Progressive Performance
hwdesignco.com | @jpamental | Responsive Typography
Progressive Enhancement
hwdesignco.com | @jpamental | Responsive Typography
FOUT is OUR fault
hwdesignco.com | @jpamental | Responsive Typography
FOUT is OUR fault
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:
+ Adjust font-size, line-height, letter-spacing to avoid jumpiness + Making it easy since 2010
body { font-family: “Trade Gothic”, helvetica, arial; }
.wf-inactive body { font-family: helvetica, arial; }
hwdesignco.com | @jpamental | Responsive Typography
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | Responsive Typography
Progressively Enhance
No web fonts, uncorrected
hwdesignco.com | @jpamental | Responsive Typography
Progressively Enhance
No web fonts, corrected
hwdesignco.com | @jpamental | Responsive Typography
Progressively Enhance
Web fonts loaded
hwdesignco.com | @jpamental | Responsive Typography
Backwards Compatible, Future Friendly
hwdesignco.com | @jpamental | Responsive Typography
Proportion
hwdesignco.com | @jpamental | Responsive Typography
Proportion: one size won’t do
http://bit.ly/jprwt
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
hwdesignco.com | @jpamental | Responsive Typography
For example…
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography
For example…
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography
A More Modern Scale
http://bit.ly/jprwt
hwdesignco.com | @jpamental | Responsive Typography
Polish
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Forget Fit & Finish
hwdesignco.com | @jpamental | Responsive Typography
Polish: Don’t Leave Orphans Behind
+ Typogrify FTW: http://bit.ly/rt-tpgrfy http://bit.ly/drupaltypogrifyhttp://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
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
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)
hwdesignco.com | @jpamental | Responsive Typography
True Life Story
hwdesignco.com | @jpamental | Responsive Typography
True Life Story
-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
hwdesignco.com | @jpamental | Responsive Typography
A Perfect Pageor at least a far better start
hwdesignco.com | @jpamental | Responsive Typography
Inspiration
hwdesignco.com | @jpamental | Responsive Typography
Inspiration+ Oversize 2-level header+ Stylized subhead+ Byline+ Large initial cap+ Inset photo+ Pull-quote
hwdesignco.com | @jpamental | Responsive Typography
Frustration
hwdesignco.com | @jpamental | Responsive Typography
A Sneak Peek
hwdesignco.com | @jpamental | Responsive Typography
Realization+ Oversize 2-level header+ Stylized subhead+ Byline+ Large initial cap+ Inset photo+ Pull-quote+ Virtually no markup needed+ Fully responsive
hwdesignco.com | @jpamental | Responsive Typography
Realization
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
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
hwdesignco.com | @jpamental | Responsive Typography
“Designers Should Code As Much As Artists Should Mix Paint”
~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
hwdesignco.com | @jpamental | Responsive Typography
Just out!
http://bit.ly/rwtbook
Jason Pamental | @jpamental http://hwdesignco.com
Thank YouJason Pamental (@jpamental)
!Slides: http://bit.ly/jpwebu14
Code: http://bit.ly/rtwcode