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

▶
responsive typography
SMART_READER_LITE
LIVE PREVIEW

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

Jul 03, 2023 304 likes •985 views

Text (504) 229-6828 with #rwdtype 5 (comment) Responsive Typography Design for Meaning, Not for Screen Size CSS Dev Conf 13 October, 2014 hwdesignco.com | @jpamental | Responsive Typography What Well Cover + Lies & deceptions about art

slide-1
SLIDE 1

hwdesignco.com | @jpamental | Responsive Typography CSS Dev Conf 13 October, 2014

Responsive Typography

Design for Meaning, Not for Screen Size

Text (504) 229-6828 with #rwdtype 5 (comment)

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 of 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

I love you

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

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-15
SLIDE 15

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

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-17
SLIDE 17

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

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

slide-19
SLIDE 19

hwdesignco.com | @jpamental | Responsive Typography

Focus on What’s Left: Typography

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

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-23
SLIDE 23

hwdesignco.com | @jpamental | Responsive Typography

Performance

slide-24
SLIDE 24

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-25
SLIDE 25

hwdesignco.com | @jpamental | Responsive Typography

Performance Matters

slide-26
SLIDE 26

hwdesignco.com | @jpamental | Responsive Typography

Performance Matters

slide-27
SLIDE 27

hwdesignco.com | @jpamental | Responsive Typography

Progressive Performance

slide-28
SLIDE 28

hwdesignco.com | @jpamental | Responsive Typography

Progressive Enhancement

slide-29
SLIDE 29

hwdesignco.com | @jpamental | Responsive Typography

FOUT is OUR fault

slide-30
SLIDE 30

hwdesignco.com | @jpamental | Responsive Typography

FOUT is OUR fault

slide-31
SLIDE 31

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-32
SLIDE 32

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

Web fonts loaded

slide-33
SLIDE 33

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

No web fonts, uncorrected

slide-34
SLIDE 34

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

No web fonts, corrected

slide-35
SLIDE 35

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

Web fonts loaded

slide-36
SLIDE 36

hwdesignco.com | @jpamental | Responsive Typography

Progressively Enhance

body { font-family:"Roboto", Helvetica, "Lucida Sans", sans-serif; font-size: 1em; letter-spacing: normal; line-height: 1.4em; } .wf-inactive body { font-family: Helvetica, "Lucida Sans", sans-serif; font-size: 1em; letter-spacing: 0.0035em; line-height: 1.4em; }

slide-37
SLIDE 37

hwdesignco.com | @jpamental | Responsive Typography

Backwards Compatible, Future Friendly

slide-38
SLIDE 38

hwdesignco.com | @jpamental | Responsive Typography

Proportion

slide-39
SLIDE 39

hwdesignco.com | @jpamental | Responsive Typography

Proportion: one size won’t do

http://bit.ly/jprwt

slide-40
SLIDE 40

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-41
SLIDE 41

hwdesignco.com | @jpamental | Responsive Typography

For example…

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…

h1 { font-size: 2em; line-height: 1.25; margin-top: 0.9375em; margin-bottom: 0.3125em; } @media (min-width: 43.75em) { h1 { font-size: 2.5em; letter-spacing: normal; line-height: 1.125; margin-top: 0.73333334em; margin-bottom: 0.24444445em; } } @media (min-width: 56.25em) { h1 { font-size: 3em; letter-spacing: normal; line-height: 1.05; margin-top: 0.6875em; margin-bottom: 0.22916667em; } }

http://bit.ly/jprwt

slide-44
SLIDE 44

hwdesignco.com | @jpamental | Responsive Typography

Polish

slide-45
SLIDE 45

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

http://bit.ly/jpsassotf

slide-46
SLIDE 46

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

http://bit.ly/jpsassotf

slide-47
SLIDE 47

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

h1 { font-family:”Playfair Display", Georgia, serif; font-feature-settings:"clig" 1,"dlig" 1,"frac" 1,"liga" 1; } http://bit.ly/jpsassotf

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 Forget Fit & Finish

slide-50
SLIDE 50

hwdesignco.com | @jpamental | Responsive Typography

Polish: Don’t Forget Fit & Finish

#main-content p:first-of-type:first-letter, .lt-ie9 #main-content h1 + p:first-letter { font-size: 3em; font-family: "Playfair Display", Georgia, "Times New Roman"; font-weight: bold; line-height: 0.9; display: block; float: left; padding-right: 0.15em; padding-top: 0; }

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

slide-52
SLIDE 52

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

  • versized impact to 


user & editor

slide-53
SLIDE 53

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-54
SLIDE 54

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 combined


w/font-smoothing adjustments 


(http://typerendering.com courtesy of @NiceWebType & @bramstein)

slide-55
SLIDE 55

hwdesignco.com | @jpamental | Responsive Typography

True Life Story

slide-56
SLIDE 56

hwdesignco.com | @jpamental | Responsive Typography

True Life Story

  • webkit-font-smoothing: antialiased;
  • moz-osx-font-smoothing: grayscale;
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

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

slide-59
SLIDE 59

hwdesignco.com | @jpamental | Responsive Typography

Frustration

slide-60
SLIDE 60

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

slide-61
SLIDE 61

hwdesignco.com | @jpamental | Responsive Typography

Realization

slide-62
SLIDE 62

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-63
SLIDE 63

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-64
SLIDE 64

hwdesignco.com | @jpamental | Responsive Typography

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

~ Mustafa Kurtuldu (@Mustafa_x) FOWD London

slide-65
SLIDE 65

hwdesignco.com | @jpamental | Responsive Typography

Just out!

http://bit.ly/rwtbook

slide-66
SLIDE 66

hwdesignco.com | @jpamental | Responsive Typography

Thank You

Jason Pamental (@jpamental)

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

Code: http://bit.ly/rtwcode

Text (504) 229-6828 with #rwdtype 5 (comment)