Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@markodugonjic [email protected]

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

Creative Nights

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

MENU — Variables Tools Experiments Process

Slide 7

Slide 7 text

— THE PROBLEM —

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

:/

Slide 11

Slide 11 text

media queries flexible layouts flexible images Responsive Experience

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

1 READING DISTANCE

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Y X ?

Slide 18

Slide 18 text

No content

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

2 VIEWPORT WIDTH

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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 “

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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.

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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 Š

Slide 28

Slide 28 text

/* 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 }

Slide 29

Slide 29 text

No content

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

No content

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

No content

Slide 38

Slide 38 text

No content

Slide 39

Slide 39 text

3 HIERARCHY

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

16 18 21 24 36 48 60 72

Slide 42

Slide 42 text

16 18 21 24 36 48

Slide 43

Slide 43 text

16 18 21 24 36 48

Slide 44

Slide 44 text

16 18 21 24 36 48

Slide 45

Slide 45 text

/* 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 */ }

Slide 46

Slide 46 text

modularscale.com

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

webdesign.maratz.com/lab/subheads/

Slide 52

Slide 52 text

4 INFORMATION DENSITY

Slide 53

Slide 53 text

1 1 2 1 2

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

No content

Slide 57

Slide 57 text

5 PIXEL DENSITY

Slide 58

Slide 58 text

fontbureau.com/ReadingEdge/

Slide 59

Slide 59 text

typography.com/cloud/welcome/

Slide 60

Slide 60 text

No content

Slide 61

Slide 61 text

No content

Slide 62

Slide 62 text

No content

Slide 63

Slide 63 text

typonine.com

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

@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'); } }

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

6 DEVICE ORIENTATION

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

No content

Slide 72

Slide 72 text

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

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

HANDSOME! HANDSOME!

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

font-to-width.com

Slide 79

Slide 79 text

No content

Slide 80

Slide 80 text

No content

Slide 81

Slide 81 text

No content

Slide 82

Slide 82 text

! ! – 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:

Slide 83

Slide 83 text

7 SCREEN ASPECT RATIO

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

A0 A1 A2 A3 A4 A5 A6

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

— ALMOST DONE —

Slide 88

Slide 88 text

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

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

No content

Slide 92

Slide 92 text

DĚKUJI! ! Marko Dugonjić @markodugonjic [email protected]

Slide 93

Slide 93 text

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/