RESPONSIVE WEB TYPOGRAPHY Marko Dugonjić @markodugonjic ! Prague, 2014

@markodugonjic marko@creativenights.com

No content

Creative Nights

No content

MENU — Variables Tools Experiments Process

— THE PROBLEM —

No content

No content

:/

media queries flexible layouts flexible images Responsive Experience

VARIABLES of the RESPONSIVE READING EXPERIENCE — reading distance viewport width (and height) content hierarchy information density pixel density device orientation screen aspect ratio

NARROW WIDE BIG SMALL TIM BROWN vimeo.com/56276418 FINE COARSE

NARROW WIDE FINE COARSE BIG SMALL TIM BROWN vimeo.com/56276418

1 READING DISTANCE

0,26mm 1,3mm 71cm 350cm

Y X ?

No content

// concept code ! if (distance < 30) { body.className = 'close'; } ! if (distance > 30 && distance < 50) { body.className = 'medium'; } ! if (distance > 50) { body.className = 'far'; }

2 VIEWPORT WIDTH

Anything from 45 to 75 characters is widely regarded as a satisfactory length of line for a single-column page set in a serifed text face in a text size. The 66- character line (counting both le ers and spaces) is widely regarded as ideal. For multiple column work, a be er average is 40 to 50 characters. ! ROBERT BRINGHURST webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/ “

ideal 66 max 75 min 45 < 40 chars screen width: 320px

Breakpoints should not be dictated by devices, but by content. Let the content decide when to expand and then adjust your designs. ! JEREMY KEITH lukew.com/ff/entry.asp?1393 “

Breakpoints should not be dictated by devices*, but by content. Let the cont*ent decide when to expand and then adjust your designs. ! HAT TIP TRENT WALTON trentwalton.com/2012/06/19/fluid-type/ “

Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required.

Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. • • • • • • • • • •

Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. ! qqqqqqqqqqqqqqqqqqqqqqqqqq dddddddddddddddddddddddddd Line height for each breakpoint is adjusted according to the line length rendered at that breakpoint. Short line lengths require tighter line spacing, because the reader’s eye doesn’t have to travel much to reach the next line of text. As line length gets longer, more line spacing is required. ! jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ q d j Š

/* under 45 chars */ body { line-height: 1.4 } p { margin-bottom: 1.4em } ! /* 45–60 chars */ body { line-height: 1.45 } p { margin-bottom: 1.45em } ! /* 60–75 chars */ body { line-height: 1.5 } p { margin-bottom: 1.5em }

No content

body { background: url(stripe-pattern.gif); }

/* vendor prefix omitted code */ ! body { background-image: linear-gradient(top, #fff 0, #fff 95%, #f00 95%, #f00 100%); ! background-repeat: repeat; background-size: 24px 24px; }

/* short line lengths */ body { line-height: 1.4em; background-size: 100% 1.4em; } ! /* medium line lengths */ body { line-height: 1.45em; background-size: 100% 1.45em; } ! /* long line lengths */ body { line-height: 1.5em; background-size: 100% 1.5em; }

LINE SPACE letter space, word spac, line space LETTER SPACE WORD SPACE LINE SPACE

letter space, word spac, line space LETTER SPACE WORD SPACE LINE SPACE

No content

@media only screen and (min-device-pixel-ratio: 1.5) { p { letter-spacing: .01em; word-spacing: .01em; } } ! /* vendor prefix omitted code */

No content

No content

3 HIERARCHY

w e b t y p o g r p h y T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e a r e h a r d t o r e a d b e c a u s e o f t h e p o o r l y c h o s e n l e t t e r s i z e a n d l a y o u t t h a t a p p e a r t o b e d i s p r o p o r t i o n a l t o t h e s c r e e n ? S o , w h y i s t h i s h a p p e n i n g ? H o w d o s u c h , o t h e r w i s e b e a u t i f u l r e s p o n s i v e d e s i g n s , e n d u p b e i n g s o p o o r l y e x e c u t e d o n m o b i l e ? T h e a n s w e r i s i n f a c t q u i t e c l e a r — s u c h w e b s i t e s w e r e d e v e l o p e d o n t h e d e s k t o p c o m p u t e r , w i t h d e s k t o p r e a d i n g d i s t a n c e , w i t h a _ d e s k t o p d o w n _ , r a t h e r t h a n a _ m o b i l e u p _ a p p r o a c h . I t ’ s o b v i o u s t h a t t h e c o r e r e s p o n s i v e w e b d e s i g n a r s e n a l o f m e d i a q u e r i e s , f l e x i b l e l a y o u t s a n d f l e x i b l e i m a g e s i s n o t s u f f i c i e n t . w e b t y p o g r p h y a j s d h j a h s g d T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e a r e h a r d t o r e a d b e c a u s e o f t h e p o o r l y c h o s e n l e t t e r s i z e a n d l a y o u t t h a t a p p e a r t o b e d i s p r o p o r t i o n a l t o t h e s c r e e n ? S o , w h y i s t h i s h a p p e n i n g ? H o w d o s u c h , o t h e r w i s e b e a u t i f u l r e s p o n s i v e d e s i g n s , e n d u p b e i n g s o p o o r l y e x e c u t e d o n m o b i l e ? T h e a n s w e r i s i n f a c t q u i t e c l e a r — s u c h w e b s i t e s w e r e d e v e l o p e d o n t h e d e s k t o p c o m p u t e r , w i t h d e s k t o p r e a d i n g d i s t a n c e , w i t h a _ d e s k t o p d o w n _ , r a t h e r t h a n a _ m o b i l e u p _ a p p r o a c h . I t ’ s o b v i o u s t h a t t h e c o r e r e s p o n s i v e w e b d e s i g n a r s e n a l o f m e d i a q u e r i e s , f l e x i b l e l a y o u t s a n d f l e x i b l e i m a g e s i s n o t s u f f i c i e n t . # # M A N Y M O R E V A R I A B L E S A p a r t f r o m t h e o b v i o u s v a r i a b l e s — v i e w p o r t w i d t h a n d v i e w p o r t h e i g h t — t h e r e a r e o t h e r s , s u c h a s r e a d i n g d i s t a n c e , p i x e l d e n s i t y ( o r s c r e e n c r u d e n e s s ) , d e v i c e o r i e n t a t i o n a n d v i e w p o r t a s p e c t r a t i o , b u t a l s o t h e c o n t e n t h i e r a r c h y a n d i n f o r m a t i o n d e n s i t y . B e f o r e I e l a b o r a t e e a c h , l e t m e b r i e f l y e x p l a i n t h e r u l e s o f t h e p a r a g r a p h . # # # R e a d i n g d i s t a n c e T h e r e a r e t h r e e w h i t e s p a c e s i n s i d e t h e p a r a g r a p h t h a t a r e i n t e r d e p e n d e n t — t h e l e t t e r s p a c e , t h e w o r d s p a c e a n d t h e l i n e s p a c e . I f a n y o f t h e t h r e e i s c h a n g e d , a l l t h e o t h e r s s h o u l d b e r e a s s e s s e d , t o o . B y p r e s e r v i n g t h e w h i t e s p a c e h i e r a r c h y , w e c a n

16 18 21 24 36 48 60 72

16 18 21 24 36 48

16 18 21 24 36 48

16 18 21 24 36 48

/* short reading distance */ p { font-size: 1rem; /* 16px */ } h3 { font-size: 1.125rem; /* 18px */ } h2 { font-size: 1.312rem; /* 21px */ } h1 { font-size: 1.5rem; /* 24px */ } ! /* medium reading distance */ p { font-size: 1.125rem; /* 18px */ } h3 { font-size: 1.312rem; /* 21px */ } h2 { font-size: 1.5rem; /* 24px */ } h1 { font-size: 2.25rem; /* 36px */ } ! /* long reading distance */ p { font-size: 1.312rem; /* 21px */ } h3 { font-size: 1.5rem; /* 24px */ } h2 { font-size: 2.25rem; /* 36px */ } h1 { font-size: 3rem; /* 48px */ }

modularscale.com

STYLE OPTIONS ! ! ALL CAPS SUBHEAD H2 ! SMALL CAPS SUBHEAD H3 ! Italic Subhead H4

SUBHEAD ONE Subhead Two SUBHEAD THREE On the opposite side, instead of progressively increasing font size for each heading level, especially as we now have such a vast selection of web fonts available and fonts are rendered with much more detail than before, we can use italics, small caps and all caps at the same letter size to establish text hierarchy. Add bolds into the mix, and you have a palette of at least

/* alternative small caps rules */ ! h3 { font-family: small-caps-typeface; text-transform: lowercase; } h3 { font-feature-settings: "smcp"; /* OpenType */ text-transform: lowercase; } h3 { font-weight: 500; /* if the weight exists */ font-size: 80%; /* give or take */ text-transform: uppercase; letter-spacing: .125em; }

Se ing Subheads with CSS blog.typekit.com/2013/07/25/se ing-subheads-with-css/

webdesign.maratz.com/lab/subheads/

4 INFORMATION DENSITY

1 1 2 1 2

R e s p o n s i v e W e b T y p o g r a p h y T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . R e s p o n s i v e W e b T y p o g r a p h y T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e org izers izer izmn kjla9 jsf lkfo jfa R e s p o n s i v e W e b T y p o g r a p h y T h a n k y o u f o r t h e l o v e l y i n t r o d u c t i o n , R a f a l ! P l e a s e g i v e a w a r m r o u n d o f a p p l a u s e t o t h e o r g a n i z e r s . L e t m e a s k y o u s o m e t h i n g … H a v e y o u e v e r s a v e d a n a r t i c l e w i t h t h e i n t e n t i o n t o r e a d i t l a t e r o n a m o b i l e d e v i c e i n t h e p a r k a s s u m i n g t h a t i t s r e s p o n s i v e w e b d e s i g n i s a l l i t t a k e s f o r t h e b e s t p o s s i b l e r e a d i n g e x p e r i e n c e ? H a v e y o u e v e r b e e n d i s a p p o i n t e d w h e n y o u r e a l i z e d t h a t a r t i c l e s o n m o b i l e a r e h a r d t o r e a d b e c a u s e o f t h e p o o r l y c h o s e n l e t t e r s i z e a n d l a y o u t t h a t a p p e a r t o b e d i s p r o p o r t i o n a l t o t h e s c r e e n ? S o , w h y i s t h i s h a p p e n i n g ? H o w d o s u c h , o t h e r w i s e b e a u t i f u l r e s p o n s i v e d e s i g n s , e n d u p b e i n g s o p o o r l y e x e c u t e d o n m o b i l e ? T h e a n s w e r i s i n f a c t q u i t e c l e a r — s u c h w e b s i t e s w e r e d e v e l o p e d o n 1 1 2 1 2 organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga organizersj hjhgorganiz ersorga

LESS INFORMATION ! – style variations – indented paragraphs – white space MORE INFORMATION ! – typographic scale – block paragraphs – graphic elements

No content

5 PIXEL DENSITY

fontbureau.com/ReadingEdge/

typography.com/cloud/welcome/

No content

No content

No content

typonine.com

iA ALL, EXCEPT RETINA RETINA LANDSCAPE RETINA PORTRAIT ia.net/blog/responsive-typography/

@font-face { font-family: 'Typeface Name'; src: url('Grade-A.woff') format('woff'); } @media ... and (min-device-pixel-ratio: 1.5) { @font-face { font-family: 'Typeface Name'; src: url('Grade-B.woff') format('woff'); } } @media ... and (min-device-pixel-ratio: 1.5) and (orientation: portrait) { @font-face { font-family: 'Typeface Name'; src: url('Grade-C.woff') format('woff'); } }

Comprehensive list of graded fonts typophile.com/node/81483

6 DEVICE ORIENTATION

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

No content

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

HANDSOME! HANDSOME!

/* Illustration purpose code */ ! @media ... and (orientation: portrait) { h1 { font-family: 'Typeface Width Variant'; letter-spacing: -.1em; } } ! @media ... and (orientation: landscape) { h1 { font-family: 'Typeface Width Variant'; letter-spacing: .1em; } }

font-to-width.com

No content

No content

No content

! ! – DIN – Franklin Gothic – Frutiger – Futura – Georgia Pro – Gill Sans – Helvetica – JAF Bernino ! ! – Minion Pro – Myriad Pro – Nimbus Sans – Open Sans – Proxima Nova – Roboto – Univers – … WEB FONTS available in multiple widths:

7 SCREEN ASPECT RATIO

No content

A0 A1 A2 A3 A4 A5 A6

bradfrost.github.io/this-is-responsive/index.html

— ALMOST DONE —

reading distance width and height content hierarchy information density pixel density device orientation screen aspect ratio

No content

! ! – reading distance – screen width – content hierarchy – information density – pixel density – device orientation – screen aspect ratio ! ! – device – environment – time – activity – individual – location – social CONTEXT IS MULTIFACETED CENNYDD BOWLES cennydd.co.uk/2013/designing-with-context

No content

DĚKUJI! ! Marko Dugonjić @markodugonjic marko@creativenights.com

Credits ! Rhythm and Proportion, Robert Bringhurst, h p://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/ ! Inside Paragraphs, Cyrus Highsmith, h p://insideparagraphs.com ! Graded fonts, Typophile, h p://typophile.com/node/81483 ! Responsive Typography, The Basics, Information Architects, h p://informationarchitects.net/blog/responsive-typography-the-basics/ ! Wrist, Palm, Lap, Desk, Wall, Luke Wroblewski, h ps://twi er.com/lukew/status/273453112902172672 ! The EMs have it: Proportional Media Queries FTW!, Lyza Gardner, h p://blog.cloudfour.com/the-ems-have-it-proportional-media-queries- w/ ! Photo: Empty park bench h p://www.flickr.com/photos/jonasb/21755140/ ! Photo: Golden wedding h p://www.flickr.com/photos/crabchick/4056045781/