Responsive Typography Design for Meaning, Not for Screen Size UX - - PowerPoint PPT Presentation

▶
responsive typography
SMART_READER_LITE
LIVE PREVIEW

Responsive Typography Design for Meaning, Not for Screen Size UX - - PowerPoint PPT Presentation

Mar 08, 2024 165 likes •862 views

Responsive Typography Design for Meaning, Not for Screen Size UX Fest #UXFest Jason Pamental | @jpamental 1 October, 2014 http://hwdesignco.com What Well Cover + Lies & deceptions about art & science + Understanding the value of

slide-1
SLIDE 1

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

UX Fest #UXFest 1 October, 2014

Responsive Typography

Design for Meaning, Not for Screen Size

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

slide-3
SLIDE 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?

slide-4
SLIDE 4

hwdesignco.com | @jpamental | Responsive Typography

Is Tim an artist or is Tim an inventor? I think the problem is not trying to pick one

  • f these things for Tim to be – the problem

is that we have that distinction

  • Penn Jillette in ‘Tim’s Vermeer’
slide-5
SLIDE 5

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

slide-6
SLIDE 6

hwdesignco.com | @jpamental | Responsive Typography

Art+Science

slide-7
SLIDE 7

hwdesignco.com | @jpamental | Responsive Typography

Design+Development

slide-8
SLIDE 8

hwdesignco.com | @jpamental | Responsive Typography

slide-9
SLIDE 9

hwdesignco.com | @jpamental | Responsive Typography

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

@sblakeborough, via twitter

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

slide-11
SLIDE 11

hwdesignco.com | @jpamental | Responsive Typography

Type Is the Voice of Your Words

+ Words have meaning, but letters have emotion

slide-12
SLIDE 12

hwdesignco.com | @jpamental | Responsive Typography

Type Is the Voice of Your Words

+ Words have meaning, but letters have emotion

I love you

slide-13
SLIDE 13

hwdesignco.com | @jpamental | Responsive Typography

Type Is the Voice of Your Words

+ Words have meaning, but letters have emotion

I love you

slide-14
SLIDE 14

hwdesignco.com | @jpamental | Responsive Typography

Type Is the Voice of Your Words

+ Words must first be read before they can be understood

slide-15
SLIDE 15

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.

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

  • n this continent, a new nation, conceived in Liberty, and

dedicated to the proposition that all men are created equal.

slide-17
SLIDE 17

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

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

A tale of a curious affmicuion

slide-19
SLIDE 19

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

slide-20
SLIDE 20

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

slide-21
SLIDE 21

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

slide-22
SLIDE 22

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

slide-23
SLIDE 23

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

slide-24
SLIDE 24

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

slide-25
SLIDE 25

hwdesignco.com | @jpamental | Responsive Typography

Performance

slide-26
SLIDE 26

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

slide-27
SLIDE 27

hwdesignco.com | @jpamental | Responsive Typography

Performance Matters

slide-28
SLIDE 28

hwdesignco.com | @jpamental | Responsive Typography

Performance Matters

slide-29
SLIDE 29

hwdesignco.com | @jpamental | Responsive Typography

Progressive Performance

slide-30
SLIDE 30

hwdesignco.com | @jpamental | Responsive Typography

Progressive Enhancement

slide-31
SLIDE 31

hwdesignco.com | @jpamental | Responsive Typography

FOUT is OUR fault

slide-32
SLIDE 32

hwdesignco.com | @jpamental | Responsive Typography

FOUT is OUR fault

slide-33
SLIDE 33

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

slide-34
SLIDE 34

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

Web fonts loaded

slide-35
SLIDE 35

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

No web fonts, uncorrected

slide-36
SLIDE 36

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

No web fonts, corrected

slide-37
SLIDE 37

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

Web fonts loaded

slide-38
SLIDE 38

hwdesignco.com | @jpamental | Responsive Typography

Backwards Compatible, Future Friendly

slide-39
SLIDE 39

hwdesignco.com | @jpamental | Responsive Typography

Proportion

slide-40
SLIDE 40

hwdesignco.com | @jpamental | Responsive Typography

Proportion: one size won’t do

http://bit.ly/jprwt

slide-41
SLIDE 41

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

slide-42
SLIDE 42

hwdesignco.com | @jpamental | Responsive Typography

For example…

http://bit.ly/jprwt

slide-43
SLIDE 43

hwdesignco.com | @jpamental | Responsive Typography

For example…

http://bit.ly/jprwt

slide-44
SLIDE 44

hwdesignco.com | @jpamental | Responsive Typography

A More Modern Scale

http://bit.ly/jprwt

slide-45
SLIDE 45

hwdesignco.com | @jpamental | Responsive Typography

Polish

slide-46
SLIDE 46

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

slide-47
SLIDE 47

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

slide-48
SLIDE 48

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

slide-49
SLIDE 49

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Leave Orphans Behind

+ Typogrify FTW: 


http://bit.ly/rt-tpgrfy
 http://bit.ly/drupaltypogrify
 http://bit.ly/rt-tpgrfy-ee
 http://bit.ly/rt-tpgrfy-wp

slide-50
SLIDE 50

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Leave Orphans Behind

+ 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

slide-51
SLIDE 51

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Leave Orphans Behind

+ 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

slide-52
SLIDE 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 poseur

slide-53
SLIDE 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)

slide-54
SLIDE 54

hwdesignco.com | @jpamental | Responsive Typography

True Life Story

slide-55
SLIDE 55

hwdesignco.com | @jpamental | Responsive Typography

True Life Story

  • webkit-font-smoothing: antialiased;
  • moz-osx-font-smoothing: grayscale;
slide-56
SLIDE 56

hwdesignco.com | @jpamental | Responsive Typography

A Perfect Page

slide-57
SLIDE 57

hwdesignco.com | @jpamental | Responsive Typography

A Perfect Page

  • r at least a far better start
slide-58
SLIDE 58

hwdesignco.com | @jpamental | Responsive Typography

Inspiration

slide-59
SLIDE 59

hwdesignco.com | @jpamental | Responsive Typography

Inspiration

+ Oversize 2-level header + Stylized subhead + Byline + Large initial cap + Inset photo + Pull-quote

slide-60
SLIDE 60

hwdesignco.com | @jpamental | Responsive Typography

Frustration

slide-61
SLIDE 61

hwdesignco.com | @jpamental | Responsive Typography

A Sneak Peek

slide-62
SLIDE 62

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

slide-63
SLIDE 63

hwdesignco.com | @jpamental | Responsive Typography

Realization

slide-64
SLIDE 64

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

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

hwdesignco.com | @jpamental | Responsive Typography

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

~ Mustafa Kurtuldu (@Mustafa_x) FOWD London

slide-67
SLIDE 67

hwdesignco.com | @jpamental | Responsive Typography

Just out!

http://bit.ly/rwtbook

slide-68
SLIDE 68

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

Thank You

Jason Pamental (@jpamental)

  • Slides: http://bit.ly/jpuxfest14

Code: http://bit.ly/rtwcode