Responsive Typography

Designing for Readability & Meaning on Any Screen

CSS Summit | #CSSSUMMIT Jason Pamental | @jpamental

15th July, 2014 http://hwdesignco.com
Who Am I?

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Who Am I?
Jason Pamental (@jpamental)

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Who Am I?
Jason Pamental (@jpamental)
+ Co-founder of

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Who Am I?
Jason Pamental (@jpamental)
+ Co-founder of

+ Tinkerer with

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Who Am I?
Jason Pamental (@jpamental)
+ Co-founder of

+ Tinkerer with

+ Author of this

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Who Am I?
Jason Pamental (@jpamental)
+ Co-founder of

+ Tinkerer with

+ Author of this

+ Co-parent of

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover
+ Lies & deceptions

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover
+ Lies & deceptions
+ An honest reconciliation

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover
+ Lies & deceptions
+ An honest reconciliation
+ What is Responsive Typography

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover
+ Lies & deceptions
+ An honest reconciliation
+ What is Responsive Typography
+ Making your typography responsive

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

What Well Cover
+ Lies & deceptions
+ An honest reconciliation
+ What is Responsive Typography
+ Making your typography responsive
+ Putting it all together

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Art & Technology:
A Historical Romance

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Art & Technology:
A Historical Romance

DaVinci?
That guy would code

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Art & Technology:
A Historical Romance

DaVinci? Vermeer:
That guy would code Master or Technician?

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Art & Technology:
A Historical Romance

DaVinci? Vermeer: Tim Jenison

That guy would code Master or Technician? Artist or Inventor?

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

 Art is inherently tied to the
technology we use to create it
No matter how much we try to ignore it

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

When is our industry going stop
calling it web typography?
~ @sblakeborough, via twitter

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

We cant.

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

We cant.
+ Encompasses all of what you know about
type & its use, but

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

We cant.
+ Encompasses all of what you know about
type & its use, but
+ Typography on the web requires additional
consideration (art & science)

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

We cant.
+ 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

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

We cant.
+ 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 | CSS Summit | #CSSSUMMIT

Its not what we dont
know thatll kill us

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Its not what we dont
know thatll kill us
Its what we willfully ignore

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

A Long Road to a Make-Believe Place

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions

960px

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

A Long Road to a Make-Believe Place
+ We prop up our vision of the world with tricks & misconceptions

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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 | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know
+ Screen size

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know
+ Screen size
+ Device capabilities

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know
+ Screen size
+ Device capabilities
+ Concurrent activities

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know
+ Screen size
+ Device capabilities
+ Concurrent activities
+ Depth of focus

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Take Away What We Cant Know
+ Screen size
+ Device capabilities
+ Concurrent activities
+ Depth of focus
+ Purpose of visit

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Focus on Whats Left:

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Focus on Whats Left:

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Focus on Whats Left:

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Focus on Whats Left:

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Focus on Whats Left:

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Four Simple Steps

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Four Simple Steps
+ Performance: select fonts with care, load what
you need & dont block the page draw

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Four Simple Steps
+ Performance: select fonts with care, load what
you need & dont block the page draw
+ Progressive: plan for failure, tune up the
loading process & fallback fonts to
minimize FOUT

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Four Simple Steps
+ Performance: select fonts with care, load what
you need & dont block the page draw
+ Progressive: plan for failure, tune up the
loading process & fallback fonts to
minimize FOUT
+ Proportion: small screens demand subtle scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Four Simple Steps
+ Performance: select fonts with care, load what
you need & dont 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 | CSS Summit | #CSSSUMMIT

Performance Matters

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters
+ Great typography isnt I used all of them

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters
+ Great typography isnt I used all of them
+ Load only what you need

Trade Gothic Next LT Pro Bold

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters
+ Great typography isnt I used all of them
+ Load only what you need

Trade Gothic Next LT Pro Bold

this is a typeface

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters
+ Great typography isnt I used all of them
+ Load only what you need

Trade Gothic Next LT Pro Bold

this is a typeface this is a font

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters
+ Great typography isnt 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 | CSS Summit | #CSSSUMMIT

Performance Matters

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Performance Matters

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
body { font-family: Trade Gothic, helvetica, arial; }

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
body { font-family: Trade Gothic, helvetica, arial; }

+ Add this & give them content, then fonts:

.wf-inactive body { font-family: helvetica, arial; }

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
body { font-family: Trade Gothic, helvetica, arial; }

+ Add this & give them content, then fonts:

.wf-inactive body { font-family: helvetica, arial; }

+ Adjust font-size, line-height, letter-

spacing to avoid jumpiness

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

FOUT is OUR fault
+ Use these: .wf-inactive / .wf-active
+ This CSS results in a blank screen during load:
body { font-family: Trade Gothic, helvetica, arial; }

+ Add this & give them content, then fonts:

.wf-inactive body { font-family: helvetica, arial; }

+ Adjust font-size, line-height, letter-

spacing to avoid jumpiness
+ Making it easy since 2010

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

Web fonts loaded

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

No web fonts, uncorrected

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

No web fonts, corrected

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

Web fonts loaded

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Progressively Enhance

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Proportion: one size wont do

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Proportion: one size wont do

http://bit.ly/jprwt
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
Desktop geese & handheld gander

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Desktop geese & handheld gander
+ Small canvas requires
subtle proportions

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Desktop geese & handheld gander
+ Small canvas requires
subtle proportions
+ What works in print
works in print

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
For example

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

For example

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

For example

http://bit.ly/jprwt
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
A More Modern Scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

A More Modern Scale

http://bit.ly/jprwt
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
Measure & Scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Measure & Scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Measure & Scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Measure & Scale

http://bit.ly/jprwt
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
Measure & Scale

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Measure & Scale
+ Use max-width on elements to keep text readable
@media (min-width: 58em) {
p { max-width: 38em; }
}

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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)

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

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
+ Dont forget: use real content!
Because Lorem Ipsum is a poser
hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT
Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

OpenType Demo

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

OpenType Demo

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Forget Fit & Finish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Leave Orphans Behind

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Leave Orphans Behind

Typogrify Module FTW: http://bit.ly/drupaltypogrify

Widowtamer from Nathan Ford: http://bit.ly/widotamer

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Polish: Dont Leave Orphans Behind

Typogrify Module FTW: http://bit.ly/drupaltypogrify

Widowtamer from Nathan Ford: http://bit.ly/widotamer

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Designers Should Code As Much
As Artists Should Mix Paint
~ Mustafa Kurtuldu (@Mustafa_x)
FOWD London

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Yes, its a thing

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Yes, its a thing
+ Its about adapting to screen size, network
speed & device capabilities

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Yes, its a thing
+ Its about adapting to screen size, network
speed & device capabilities
+ Its about designing for whats next

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Yes, its a thing
+ Its about adapting to screen size, network
speed & device capabilities
+ Its about designing for whats next
Last Winter Olympics: There was no iPad

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Yes, its a thing
+ Its about adapting to screen size, network
speed & device capabilities
+ Its about designing for whats next
Last Winter Olympics: There was no iPad
The one before? No iPhone either

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Performance
Stats, Platforms & Screen Tests

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Performance
Stats, Platforms & Screen Tests

+ Progression (Its the web. Stuff breaks)

If the font fails, does your design hold up?

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Performance
Stats, Platforms & Screen Tests

+ Progression (Its the web. Stuff breaks)

If the font fails, does your design hold up?

+ Proportion
Its about composition (think: small paintings)

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Responsive Web Typography
+ Performance
Stats, Platforms & Screen Tests

+ Progression (Its the web. Stuff breaks)

If the font fails, does your design hold up?

+ Proportion
Its about composition (think: small paintings)

+ Polish

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Just out!

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

Just out!

http://bit.ly/rwtbook

hwdesignco.com | @jpamental | CSS Summit | #CSSSUMMIT

 Thank You
Jason Pamental (@jpamental)
!
Slides here: http://bit.ly/jpcsssummit

Jason Pamental | @jpamental

http://hwdesignco.com