SlideShare ist ein Scribd-Unternehmen logo
1 von 67
Downloaden Sie, um offline zu lesen
Responsive Typography 
hwdesignco.com | @jpamental | Responsive Typography 
ARTIFACT PVD 
30 September, 2014 
Design for Meaning, Not for Screen Size
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?
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
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
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 
hwdesignco.com | @jpamental | Responsive Typography 
I love you
Type Is the Voice of Your Words 
+ Words have meaning, but letters have emotion 
hwdesignco.com | @jpamental | Responsive Typography 
I love you
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+Words must first be read 
before they can be understood
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+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.
Type Is the Voice of Your Words 
hwdesignco.com | @jpamental | Responsive Typography 
+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.
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
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
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
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
Progressive Performance 
hwdesignco.com | @jpamental | Responsive Typography
Progressive Enhancement 
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography 
FOUT is OUR fault
hwdesignco.com | @jpamental | Responsive Typography 
FOUT is OUR fault
body { font-family: “Trade Gothic”, helvetica, arial; } 
.wf-inactive body { font-family: 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: 
+Adjust font-size, line-height, letter-spacing 
to avoid jumpiness 
+Making it easy since 2010
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
Web fonts loaded
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
No web fonts, uncorrected
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
No web fonts, corrected
Progressively Enhance 
hwdesignco.com | @jpamental | Responsive Typography 
Web fonts loaded
Backwards Compatible, Future Friendly 
hwdesignco.com | @jpamental | Responsive Typography
hwdesignco.com | @jpamental | Responsive Typography 
Proportion
Proportion: one size won’t do 
http://bit.ly/jprwt 
hwdesignco.com | @jpamental | Responsive Typography
Desktop geese & handheld gander 
hwdesignco.com | @jpamental | Responsive Typography 
+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
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 
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
A Little in Abundance is a Lot 
+ Use max-width on elements to keep text readable 
hwdesignco.com | @jpamental | Responsive Typography 
@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;
A Perfect Page 
hwdesignco.com | @jpamental | Responsive Typography
A Perfect Page 
hwdesignco.com | @jpamental | Responsive Typography 
or 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 extra 
markup necessary 
+ Fully responsive
hwdesignco.com | @jpamental | Responsive Typography 
Realization
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) 
hwdesignco.com | @jpamental | Responsive Typography 
FOWD London
hwdesignco.com | @jpamental | Responsive Typography 
Just out! 
http://bit.ly/rwtbook
hwdesignco.com | @jpamental | Responsive Typography 
Thank You 
Jason Pamental (@jpamental) 
! 
Slides: http://bit.ly/jpartpvd14 
Code: http://bit.ly/rtwcode

Weitere Àhnliche Inhalte

Ähnlich wie Responsive Typography: Design for meaning, not for screen size

Type, Responsively: A more modern approach to type on the web
Type, Responsively: A more modern approach to type on the webType, Responsively: A more modern approach to type on the web
Type, Responsively: A more modern approach to type on the web
Jason Pamental
 
Ba Session3
Ba Session3Ba Session3
Ba Session3
CMoz
 
Presentation Visuals
Presentation VisualsPresentation Visuals
Presentation Visuals
bthat
 

Ähnlich wie Responsive Typography: Design for meaning, not for screen size (20)

Designing from the Inside Out
Designing from the Inside OutDesigning from the Inside Out
Designing from the Inside Out
 
Beautiful (& Responsive) Web Typography: Designing for Readability and Meanin...
Beautiful (& Responsive) Web Typography: Designing for Readability and Meanin...Beautiful (& Responsive) Web Typography: Designing for Readability and Meanin...
Beautiful (& Responsive) Web Typography: Designing for Readability and Meanin...
 
Type, Responsively: A more modern approach to type on the web
Type, Responsively: A more modern approach to type on the webType, Responsively: A more modern approach to type on the web
Type, Responsively: A more modern approach to type on the web
 
Type, Responsively: Design for Readability & Meaning on Any Screen
Type, Responsively: Design for Readability & Meaning on Any ScreenType, Responsively: Design for Readability & Meaning on Any Screen
Type, Responsively: Design for Readability & Meaning on Any Screen
 
Type, Responsively: A More Modern Approach to Typography on the Web
Type, Responsively: A More Modern Approach to Typography on the WebType, Responsively: A More Modern Approach to Typography on the Web
Type, Responsively: A More Modern Approach to Typography on the Web
 
Designing with Web Fonts: Type, Responsively (PVD)
Designing with Web Fonts: Type, Responsively (PVD)Designing with Web Fonts: Type, Responsively (PVD)
Designing with Web Fonts: Type, Responsively (PVD)
 
The Battle Is Not the War
The Battle Is Not the WarThe Battle Is Not the War
The Battle Is Not the War
 
Designing with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, ResponsivelyDesigning with Web Fonts: Type, Responsively
Designing with Web Fonts: Type, Responsively
 
#NoEstimates Thinking
#NoEstimates Thinking#NoEstimates Thinking
#NoEstimates Thinking
 
Ba Session3
Ba Session3Ba Session3
Ba Session3
 
How to pitch - #DraftAndCraft edition
How to pitch - #DraftAndCraft editionHow to pitch - #DraftAndCraft edition
How to pitch - #DraftAndCraft edition
 
Presentation Visuals
Presentation VisualsPresentation Visuals
Presentation Visuals
 
Poster assignment - PR
Poster assignment - PRPoster assignment - PR
Poster assignment - PR
 
Graphic Designer
Graphic DesignerGraphic Designer
Graphic Designer
 
From Post to Podcast: PodCamp Toronto 2019
From Post to Podcast: PodCamp Toronto 2019From Post to Podcast: PodCamp Toronto 2019
From Post to Podcast: PodCamp Toronto 2019
 
Flow. The official worst software development approach in history
Flow. The official worst software development approach in historyFlow. The official worst software development approach in history
Flow. The official worst software development approach in history
 
SF Service Jam Day 1 Deck
SF Service Jam Day 1 DeckSF Service Jam Day 1 Deck
SF Service Jam Day 1 Deck
 
Turning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven CompanyTurning a Startup to a Design-Driven Company
Turning a Startup to a Design-Driven Company
 
Modern websites in RiSE
Modern websites in RiSEModern websites in RiSE
Modern websites in RiSE
 
Writing Vibrant, Compelling Copy
Writing Vibrant, Compelling CopyWriting Vibrant, Compelling Copy
Writing Vibrant, Compelling Copy
 

Mehr von Jason Pamental

Designing the Experience Continuum
Designing the Experience ContinuumDesigning the Experience Continuum
Designing the Experience Continuum
Jason Pamental
 
Web Typography & Drupal: Putting Arial Out to Pasture
Web Typography & Drupal: Putting Arial Out to PastureWeb Typography & Drupal: Putting Arial Out to Pasture
Web Typography & Drupal: Putting Arial Out to Pasture
Jason Pamental
 

Mehr von Jason Pamental (11)

Once Upon a Drop Cap
Once Upon a Drop CapOnce Upon a Drop Cap
Once Upon a Drop Cap
 
Pacing Design - NEDcamp 2015
Pacing Design - NEDcamp 2015Pacing Design - NEDcamp 2015
Pacing Design - NEDcamp 2015
 
Designing the Experience Continuum
Designing the Experience ContinuumDesigning the Experience Continuum
Designing the Experience Continuum
 
Designing the Experience Continuum: Typography in the Age of the Connected Ev...
Designing the Experience Continuum: Typography in the Age of the Connected Ev...Designing the Experience Continuum: Typography in the Age of the Connected Ev...
Designing the Experience Continuum: Typography in the Age of the Connected Ev...
 
Life of P FITC & CreateUpstate
Life of P FITC & CreateUpstateLife of P FITC & CreateUpstate
Life of P FITC & CreateUpstate
 
Life of p
Life of pLife of p
Life of p
 
Drawing on Quicksand: Visual Systems, Drupal & The Modern Web World
Drawing on Quicksand: Visual Systems, Drupal & The Modern Web WorldDrawing on Quicksand: Visual Systems, Drupal & The Modern Web World
Drawing on Quicksand: Visual Systems, Drupal & The Modern Web World
 
Death, Taxes & Viewport Chrome: Designing for Uncertainty
Death, Taxes & Viewport Chrome: Designing for UncertaintyDeath, Taxes & Viewport Chrome: Designing for Uncertainty
Death, Taxes & Viewport Chrome: Designing for Uncertainty
 
Death, Taxes & Viewport Chrome
Death, Taxes & Viewport ChromeDeath, Taxes & Viewport Chrome
Death, Taxes & Viewport Chrome
 
Web Typography & Drupal: Putting Arial Out to Pasture
Web Typography & Drupal: Putting Arial Out to PastureWeb Typography & Drupal: Putting Arial Out to Pasture
Web Typography & Drupal: Putting Arial Out to Pasture
 
Web Strategy: What is it and why we need to care
Web Strategy: What is it and why we need to careWeb Strategy: What is it and why we need to care
Web Strategy: What is it and why we need to care
 

KĂŒrzlich hochgeladen

Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard ...
nirzagarg
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
amitlee9823
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
poojakaurpk09
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
aroranaina404
 
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- IntroductionDESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
sivagami49
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
tbatkhuu1
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
instagramfab782445
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion pills in Kuwait Cytotec pills in Kuwait
 

KĂŒrzlich hochgeladen (20)

AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...AMBER GRAIN EMBROIDERY | Growing folklore elements |  Root-based materials, w...
AMBER GRAIN EMBROIDERY | Growing folklore elements | Root-based materials, w...
 
Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard ...
Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard  ...Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard  ...
Anamika Escorts Service Darbhanga âŁïž 7014168258 âŁïž High Cost Unlimited Hard ...
 
call girls in Vasundhra (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...call girls in Vasundhra (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
call girls in Vasundhra (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
 
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verifiedSector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
Sector 105, Noida Call girls :8448380779 Model Escorts | 100% verified
 
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
Brookefield Call Girls: 🍓 7737669865 🍓 High Profile Model Escorts | Bangalore...
 
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
HiFi Call Girl Service Delhi Phone ☞ 9899900591 ☜ Escorts Service at along wi...
 
Case Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, PuneCase Study of Hotel Taj Vivanta, Pune
Case Study of Hotel Taj Vivanta, Pune
 
call girls in Kaushambi (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...call girls in Kaushambi (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
call girls in Kaushambi (Ghaziabad) 🔝 >àŒ’8448380779 🔝 genuine Escort Service 🔝...
 
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts ServiceVVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
VVIP CALL GIRLS Lucknow 💓 Lucknow < Renuka Sharma > 7877925207 Escorts Service
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Gi...
 
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
8377087607, Door Step Call Girls In Kalkaji (Locanto) 24/7 Available
 
❀Personal Whatsapp Number 8617697112 Samba Call Girls 💩✅.
❀Personal Whatsapp Number 8617697112 Samba Call Girls 💩✅.❀Personal Whatsapp Number 8617697112 Samba Call Girls 💩✅.
❀Personal Whatsapp Number 8617697112 Samba Call Girls 💩✅.
 
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...Booking open Available Pune Call Girls Kirkatwadi  6297143586 Call Hot Indian...
Booking open Available Pune Call Girls Kirkatwadi 6297143586 Call Hot Indian...
 
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdfChapter 19_DDA_TOD Policy_First Draft 2012.pdf
Chapter 19_DDA_TOD Policy_First Draft 2012.pdf
 
Sweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptxSweety Planet Packaging Design Process Book.pptx
Sweety Planet Packaging Design Process Book.pptx
 
DESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- IntroductionDESIGN THINKING in architecture- Introduction
DESIGN THINKING in architecture- Introduction
 
Editorial design Magazine design project.pdf
Editorial design Magazine design project.pdfEditorial design Magazine design project.pdf
Editorial design Magazine design project.pdf
 
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
Abortion pill for sale in Muscat (+918761049707)) Get Cytotec Cash on deliver...
 
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman MuscatAbortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
Abortion Pills in Oman (+918133066128) Cytotec clinic buy Oman Muscat
 
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
Pooja 9892124323, Call girls Services and Mumbai Escort Service Near Hotel Th...
 

Responsive Typography: Design for meaning, not for screen size

  • 1. Responsive Typography hwdesignco.com | @jpamental | Responsive Typography ARTIFACT PVD 30 September, 2014 Design for Meaning, Not for Screen Size
  • 2. 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
  • 3. hwdesignco.com | @jpamental | Responsive Typography Art & Science: A Historical Romance DaVinci? That guy would code Vermeer: Master or Technician? Tim Jenison Artist or Inventor?
  • 4. 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
  • 5. 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
  • 6. Art+Science hwdesignco.com | @jpamental | Responsive Typography
  • 7. Design+Development hwdesignco.com | @jpamental | Responsive Typography
  • 8. hwdesignco.com | @jpamental | Responsive Typography
  • 9. When is our industry going stop calling it “web” typography? @sblakeborough, via twitter hwdesignco.com | @jpamental | Responsive Typography
  • 10. 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
  • 11. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography
  • 12. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography I love you
  • 13. Type Is the Voice of Your Words + Words have meaning, but letters have emotion hwdesignco.com | @jpamental | Responsive Typography I love you
  • 14. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +Words must first be read before they can be understood
  • 15. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +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.
  • 16. Type Is the Voice of Your Words hwdesignco.com | @jpamental | Responsive Typography +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. 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
  • 18. 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
  • 19. 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
  • 20. 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
  • 21. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  • 22. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  • 23. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  • 24. Focus on What’s Left: Typography hwdesignco.com | @jpamental | Responsive Typography
  • 25. 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
  • 26. hwdesignco.com | @jpamental | Responsive Typography Performance
  • 27. 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
  • 28. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  • 29. hwdesignco.com | @jpamental | Responsive Typography Performance Matters
  • 30. Progressive Performance hwdesignco.com | @jpamental | Responsive Typography
  • 31. Progressive Enhancement hwdesignco.com | @jpamental | Responsive Typography
  • 32. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  • 33. hwdesignco.com | @jpamental | Responsive Typography FOUT is OUR fault
  • 34. body { font-family: “Trade Gothic”, helvetica, arial; } .wf-inactive body { font-family: 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: +Adjust font-size, line-height, letter-spacing to avoid jumpiness +Making it easy since 2010
  • 35. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography Web fonts loaded
  • 36. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography No web fonts, uncorrected
  • 37. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography No web fonts, corrected
  • 38. Progressively Enhance hwdesignco.com | @jpamental | Responsive Typography Web fonts loaded
  • 39. Backwards Compatible, Future Friendly hwdesignco.com | @jpamental | Responsive Typography
  • 40. hwdesignco.com | @jpamental | Responsive Typography Proportion
  • 41. Proportion: one size won’t do http://bit.ly/jprwt hwdesignco.com | @jpamental | Responsive Typography
  • 42. Desktop geese & handheld gander hwdesignco.com | @jpamental | Responsive Typography +Small canvas requires subtle proportions +What works in print
 works in print +Robert Bringhurst matters, but scale must adapt http://bit.ly/jprwt
  • 43. hwdesignco.com | @jpamental | Responsive Typography For example
 http://bit.ly/jprwt
  • 44. hwdesignco.com | @jpamental | Responsive Typography For example
 http://bit.ly/jprwt
  • 45. hwdesignco.com | @jpamental | Responsive Typography A More Modern Scale http://bit.ly/jprwt
  • 46. hwdesignco.com | @jpamental | Responsive Typography Polish
  • 47. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  • 48. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  • 49. Polish: Don’t Forget Fit & Finish hwdesignco.com | @jpamental | Responsive Typography
  • 50. 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
  • 51. A Little in Abundance is a Lot + Use max-width on elements to keep text readable hwdesignco.com | @jpamental | Responsive Typography @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
  • 52. 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)
  • 53. hwdesignco.com | @jpamental | Responsive Typography True Life Story
  • 54. hwdesignco.com | @jpamental | Responsive Typography True Life Story -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  • 55. A Perfect Page hwdesignco.com | @jpamental | Responsive Typography
  • 56. A Perfect Page hwdesignco.com | @jpamental | Responsive Typography or at least a far better start
  • 57. hwdesignco.com | @jpamental | Responsive Typography Inspiration
  • 58. hwdesignco.com | @jpamental | Responsive Typography Inspiration + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote
  • 59. hwdesignco.com | @jpamental | Responsive Typography Frustration
  • 60. hwdesignco.com | @jpamental | Responsive Typography A Sneak Peek
  • 61. hwdesignco.com | @jpamental | Responsive Typography Realization + Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote + Virtually no extra markup necessary + Fully responsive
  • 62. hwdesignco.com | @jpamental | Responsive Typography Realization
  • 63. 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
  • 64. 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
  • 65. “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) hwdesignco.com | @jpamental | Responsive Typography FOWD London
  • 66. hwdesignco.com | @jpamental | Responsive Typography Just out! http://bit.ly/rwtbook
  • 67. hwdesignco.com | @jpamental | Responsive Typography Thank You Jason Pamental (@jpamental) ! Slides: http://bit.ly/jpartpvd14 Code: http://bit.ly/rtwcode