Type, Responsively Design for Readability & Meaning on Any - - PowerPoint PPT Presentation

▶
type responsively
SMART_READER_LITE
LIVE PREVIEW

Type, Responsively Design for Readability & Meaning on Any - - PowerPoint PPT Presentation

Nov 23, 2022 348 likes •917 views

Type, Responsively Design for Readability & Meaning on Any Screen DrupalCon Austin | #DrupalCon Jason Pamental | @jpamental 23rd May, 2014 http://hwdesignco.com Who Am I? + Co-founder of + Co-founder of + Co-host of + Co-parent of

slide-1
SLIDE 1

Jason Pamental | @jpamental http://hwdesignco.com

DrupalCon Austin | #DrupalCon 23rd May, 2014

Type, Responsively

Design for Readability & Meaning on Any Screen

slide-2
SLIDE 2

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Who Am I?

+ Co-founder of + Co-founder of + Co-host of + Co-parent of

slide-3
SLIDE 3

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

How Did I Get Here?

+ + =

slide-4
SLIDE 4

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

slide-5
SLIDE 5

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

When is our industry going stop calling it “web” typography?

@sblakeborough, via twitter

slide-6
SLIDE 6

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

slide-7
SLIDE 7

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

It’s not what we don’t know that’ll kill us It’s what we willfully ignore

slide-8
SLIDE 8

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

slide-9
SLIDE 9

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

slide-10
SLIDE 10

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)

slide-11
SLIDE 11

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

slide-12
SLIDE 12

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Focus on What’s Left: Typography

slide-13
SLIDE 13

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Focus on What’s Left: Typography

slide-14
SLIDE 14

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Focus on What’s Left: Typography

slide-15
SLIDE 15

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Focus on What’s Left: Typography

slide-16
SLIDE 16

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

slide-17
SLIDE 17

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

slide-18
SLIDE 18

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Performance Matters

slide-19
SLIDE 19

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Performance Matters

slide-20
SLIDE 20

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

FOUT is OUR fault

slide-21
SLIDE 21

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

FOUT is OUR fault

slide-22
SLIDE 22

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; }

slide-23
SLIDE 23

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Progressively Enhance

Web fonts loaded

slide-24
SLIDE 24

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Progressively Enhance

No web fonts, uncorrected

slide-25
SLIDE 25

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Progressively Enhance

No web fonts, corrected

slide-26
SLIDE 26

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Progressively Enhance

Web fonts loaded

slide-27
SLIDE 27

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Proportion: one size won’t do

http://bit.ly/jprwt

slide-28
SLIDE 28

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

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

slide-29
SLIDE 29

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

For example…

http://bit.ly/jprwt

slide-30
SLIDE 30

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

For example…

http://bit.ly/jprwt

slide-31
SLIDE 31

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

A More Modern Scale

http://bit.ly/jprwt

slide-32
SLIDE 32

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Measure & Scale

http://bit.ly/jprwt

slide-33
SLIDE 33

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Measure & Scale

http://bit.ly/jprwt

slide-34
SLIDE 34

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Measure & Scale

http://bit.ly/jprwt

slide-35
SLIDE 35

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

slide-36
SLIDE 36

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Polish: Don’t Forget Fit & Finish

slide-37
SLIDE 37

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Polish: Don’t Forget Fit & Finish

slide-38
SLIDE 38

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

OpenType Demo

slide-39
SLIDE 39

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

OpenType Demo

slide-40
SLIDE 40

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

OpenType Demo

slide-41
SLIDE 41

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

OpenType Demo

slide-42
SLIDE 42

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Polish: Don’t Forget Fit & Finish

slide-43
SLIDE 43

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Polish: Don’t Leave Orphans Behind

Typogrify Module FTW: http://drupal.org/project/typogrify

slide-44
SLIDE 44

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Polish: Don’t Leave Orphans Behind

Typogrify Module FTW: http://drupal.org/project/typogrify

slide-45
SLIDE 45

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Responsive Web Typography

slide-46
SLIDE 46

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Responsive Web Typography

+ Yes, it’s a thing

slide-47
SLIDE 47

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

slide-48
SLIDE 48

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

slide-49
SLIDE 49

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
slide-50
SLIDE 50

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

slide-51
SLIDE 51

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

slide-52
SLIDE 52

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Do It In Drupal: A Layered Approach

slide-53
SLIDE 53

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Prototype, Don’t Promise

slide-54
SLIDE 54

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

“Designers Should Code As Much As Artists Should Mix Paint”

~ Mustafa Kurtuldu (@Mustafa_x) FOWD London

slide-55
SLIDE 55

hwdesignco.com | @jpamental | DrupalCon Austin | #DrupalCon

Just out!

http://bit.ly/rwtbook

slide-56
SLIDE 56

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