Type, Responsively A More Modern Approach to Typography on the Web - - PowerPoint PPT Presentation

▶
type responsively
SMART_READER_LITE
LIVE PREVIEW

Type, Responsively A More Modern Approach to Typography on the Web - - PowerPoint PPT Presentation

Jan 20, 2024 413 likes •828 views

Type, Responsively A More Modern Approach to Typography on the Web FOWD London | #FOWD Jason Pamental | @jpamental 08 April, 2014 http://hwdesignco.com A Bit About Me + Live in the smallest state in the US + Designed my first site before there

slide-1
SLIDE 1

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

FOWD London | #FOWD 08 April, 2014

Type, Responsively

A More Modern Approach to Typography on the Web

slide-2
SLIDE 2

hwdesignco.com | @jpamental | FOWD London | #FOWD

A Bit About Me

+ Live in the smallest state in the US + Designed my first site before there was a

<table> tag

+ Love to learn. Love to share even more. + Follow @aProperCollie around a lot 


& post pictures on Instagram

slide-3
SLIDE 3

hwdesignco.com | @jpamental | FOWD London | #FOWD

An acknowledgement

+ I’m a fan of Responsive Web Design + RWD is a big deal. Really. + It’s also part of a larger conversation

about design

+ That includes typography

slide-4
SLIDE 4

hwdesignco.com | @jpamental | FOWD London | #FOWD

What’s type got to do with it?

+ Everything: type is the most prevalent

design element on the page

+ Words have meaning – 


but letters have emotion

+ Type is the most efficient design element

(in terms of file size)

+ …but it works differently on the web

slide-5
SLIDE 5

hwdesignco.com | @jpamental | FOWD London | #FOWD

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

@sblakeborough, via twitter

slide-6
SLIDE 6

hwdesignco.com | @jpamental | FOWD London | #FOWD

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 | FOWD London | #FOWD

So let’s move on.

slide-8
SLIDE 8

hwdesignco.com | @jpamental | FOWD London | #FOWD

Hat–tip to London

+ First spoke about web fonts here in 2011 + Used the phrase ‘Responsive Typography’ + Wrote about it for fonts.com, Typecast.com + Since then, others have used it too

  • Oliver Reichenstein @ ia.net
  • Nick Sherman @ AEA
slide-9
SLIDE 9

hwdesignco.com | @jpamental | FOWD London | #FOWD

But what does it mean?

slide-10
SLIDE 10

hwdesignco.com | @jpamental | FOWD London | #FOWD

Responsive Typography, Defined

+ It’s more than just web fonts + Responsive Typography must be:

  • Performant
  • Progressive
  • Proportional
  • Polished

+ So let’s explore

slide-11
SLIDE 11

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ You’ve got 5 seconds before they bail + Don’t waste users’ time + Respect the web, respect your users + Get the content on the screen + Font loader classes FTW

slide-12
SLIDE 12

hwdesignco.com | @jpamental | FOWD London | #FOWD

FOUT is YOUR fault

+ Use these: .wf-inactive / .wf-active + This CSS results in a blank screen during load:
 + Add this & give them content, then fonts:
 + Yes, it’s that simple

body { font-family: “Trade Gothic”, helvetica, arial; } .wf-inactive body { font-family: helvetica, arial; }

slide-13
SLIDE 13

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing

to avoid jumpiness

Web fonts loaded

slide-14
SLIDE 14

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing

to avoid jumpiness

No web fonts, uncorrected

slide-15
SLIDE 15

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing

to avoid jumpiness

No web fonts, corrected

slide-16
SLIDE 16

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ Tune fallback-specific CSS to avoid reflow + Test your design with fallback fonts only + Adjust font-size, line-height, letter-spacing

to avoid jumpiness

Web fonts loaded

slide-17
SLIDE 17

hwdesignco.com | @jpamental | FOWD London | #FOWD

Performance matters

+ Design for readability & beauty + But 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 + Budget wisely

slide-18
SLIDE 18

hwdesignco.com | @jpamental | FOWD London | #FOWD

Progressively enhance

+ Asia, India, Africa are huge markets & growing + Most handsets running Opera Mini + Which does not support @font-face + cue: sad trombone + 350 Million reasons you should have tuned

your fallback styles

slide-19
SLIDE 19

hwdesignco.com | @jpamental | FOWD London | #FOWD

Proportion: one size won’t do

+ Much has been written about RWD:

  • Responsive Images
  • Emerging UI Patterns
  • Performance Optimization

+ Most ignore the scale of your type + I find this… disturbing.

slide-20
SLIDE 20

hwdesignco.com | @jpamental | FOWD London | #FOWD

Desktop geese & handheld gander

+ Small canvas requires

subtle proportions

+ What works in print…

works in print

+ Bringhurst matters,

but scale must adapt

slide-21
SLIDE 21

hwdesignco.com | @jpamental | FOWD London | #FOWD

Elements of Typographic Style

+ Bringhurst’ scale

works well on desktop

+ Looks ungainly on

small screens

+ Here’s a scale that

helps translate:
 http://bit.ly/jprwt

slide-22
SLIDE 22

hwdesignco.com | @jpamental | FOWD London | #FOWD

For example…

slide-23
SLIDE 23

hwdesignco.com | @jpamental | FOWD London | #FOWD

For example…

slide-24
SLIDE 24

hwdesignco.com | @jpamental | FOWD London | #FOWD

For example…

slide-25
SLIDE 25

hwdesignco.com | @jpamental | FOWD London | #FOWD

Responsive Typographic Style

+ Line length is important, but use device

norms for size

+ Think relative proportion, not specific

screen size

+ Test! Font quality is improving, but no excuse

for not knowing how it looks on ________

slide-26
SLIDE 26

hwdesignco.com | @jpamental | FOWD London | #FOWD

Polish: design is details

+ Type is your voice. Speak eloquently. + Real quotation marks are brilliant + Browsers are lazy letter-spacers + OpenType is Awesome. See what the

kerfuffle is all about

slide-27
SLIDE 27

hwdesignco.com | @jpamental | FOWD London | #FOWD

"This" is not “that”

+ CMS are dumb + Use libraries like Typogrify & Smartypants + Automatically replace quotes, &’s, more + Never leave an 


  • rphan
slide-28
SLIDE 28

hwdesignco.com | @jpamental | FOWD London | #FOWD

Cozy is as cozy does

+ Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers


slide-29
SLIDE 29

hwdesignco.com | @jpamental | FOWD London | #FOWD

Cozy is as cozy does

+ Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers


slide-30
SLIDE 30

hwdesignco.com | @jpamental | FOWD London | #FOWD

Cozy is as cozy does

+ Loose letters look sloppy + Browsers aren’t so great at it + Try letter-spacing: -1px; in your headers
 + OpenType Features bring real kerning!

slide-31
SLIDE 31

hwdesignco.com | @jpamental | FOWD London | #FOWD

OpenType Feature Fest

+ Real kerning tables + Ligatures, Fractions & Swashes oh my!


slide-32
SLIDE 32

hwdesignco.com | @jpamental | FOWD London | #FOWD

OpenType Feature Fest

+ Real kerning tables + Ligatures, Fractions & Swashes oh my!


slide-33
SLIDE 33

hwdesignco.com | @jpamental | FOWD London | #FOWD

OpenType Feature Fest

+ Real kerning tables + Ligatures, Fractions & Swashes oh my!
 + Every design element must have a purpose + Even if that purpose is simply greater beauty

slide-34
SLIDE 34

hwdesignco.com | @jpamental | FOWD London | #FOWD

So let’s review.

slide-35
SLIDE 35

hwdesignco.com | @jpamental | FOWD London | #FOWD

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

hwdesignco.com | @jpamental | FOWD London | #FOWD

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

hwdesignco.com | @jpamental | FOWD London | #FOWD

Don’t Panic.

+ There are lots of resources + Load only what you need


(specify each weight/variant)

+ Manage the loading process


http://bit.ly/jpfontfall2

+ Use a modular scale


http://bit.ly/jprwt

+ Add panache! (.net magazine May, 2014)

slide-38
SLIDE 38

hwdesignco.com | @jpamental | FOWD London | #FOWD

Oh, and one more thing…

My book is in beta! http://typeresponsively.com

(sign up to be notified when it’s available)

slide-39
SLIDE 39

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

Thank you!

http://bit.ly/jpfowd-rwt

FOWD London | #FOWD 08 April, 2014

slide-40
SLIDE 40

hwdesignco.com | @jpamental | FOWD London | #FOWD

Resources & Links

+ Oliver Reichenstein’s post


http://ia.net/blog/responsive-typography-the-basics/

+ A More Modern Scale


http://typecast.com/blog/a-more- modern-scale-for-web-typography/