Type, Responsively: Design for Readability & Meaning on Any Screen
Upcoming SlideShare
Loading in...5
×
 

Type, Responsively: Design for Readability & Meaning on Any Screen

on

  • 162 views

Slides from my talk on Responsive Typography at DrupalCon Austin.

Slides from my talk on Responsive Typography at DrupalCon Austin.

Statistics

Views

Total Views
162
Views on SlideShare
159
Embed Views
3

Actions

Likes
1
Downloads
3
Comments
0

1 Embed 3

http://www.slideee.com 3

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Type, Responsively: Design for Readability & Meaning on Any Screen Type, Responsively: Design for Readability & Meaning on Any Screen Presentation Transcript

  • Jason Pamental | @jpamental http://hwdesignco.com DrupalCon Austin | #DrupalCon 23rd May, 2014 Type, Responsively Design for Readability & Meaning on Any Screen
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Who Am I? + Co-founder of + Co-founder of + Co-host of + Co-parent of
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon How Did I Get Here? + + =
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon What We’ll Cover + Lies & deceptions + An honest reconciliation + What is Responsive Typography + Making your typography responsive + Prototypes trump promises
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon When is our industry going stop calling it “web”typography? @sblakeborough, via twitter
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Not sure we can. + 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 | DrupalCon Austin | #DrupalCon It’s not what we don’t know that’ll kill us It’s what we willfully ignore
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions 960px
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A Long Road to a Make-Believe Place + We prop up our vision of the world with tricks & misconceptions “A page is not a valuable concept even for someone who wants to read a book.” Jeff Eaton (@eaton)
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Take Away What We Can’t Know + Screen size + Device capabilities + Concurrent activities + Depth of focus + Purpose of visit
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Focus on What’s Left: Typography
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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 | DrupalCon Austin | #DrupalCon 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 | DrupalCon Austin | #DrupalCon Performance Matters
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Performance Matters
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon FOUT is OUR fault
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon FOUT is OUR fault
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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 | DrupalCon Austin | #DrupalCon Progressively Enhance Web fonts loaded
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance No web fonts, uncorrected
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance No web fonts, corrected
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Progressively Enhance Web fonts loaded
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Proportion: one size won’t do http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Desktopgeese&handheldgander + 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 | DrupalCon Austin | #DrupalCon For example… http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon For example… http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon A More Modern Scale http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale http://bit.ly/jprwt
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Measure & Scale + Use max-width on elements to keep text readable
 @media (min-width: 58em) { 
 p { max-width: 38em; }
 } + CSS3 brings character counts, but not universal (ch & cx) + EMs or REMs, but no PX + Don’t forget: use real content!
 Because Lorem Ipsum is a poser
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon OpenType Demo
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Forget Fit & Finish
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Polish: Don’t Leave Orphans Behind Typogrify Module FTW: http://drupal.org/project/typogrify
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography + Yes, it’s a thing
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Responsive Web Typography + Yes, it’s a thing + It’s about adapting to screen size, network speed & device capabilities
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon 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 | DrupalCon Austin | #DrupalCon 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
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon How Do I Do It in Drupal? + Type is tied to design + Belongs in the Theme + Needs layered approach + @font-your-face may or may not do enough
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Do It In Drupal: A Layered Approach
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Prototype, Don’t Promise
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon “Designers Should Code As Much As Artists Should Mix Paint” ~ Mustafa Kurtuldu (@Mustafa_x) FOWD London
  • hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon Just out! http://bit.ly/rwtbook
  • Jason Pamental | @jpamental http://hwdesignco.com Thank You Jason Pamental (@jpamental) ! Slides here: http://bit.ly/jpdcrwtslides ! Please review the session! http://bit.ly/jpdcrwt