Slide 1

Slide 1 text

RESPONSIVE WEB TYPOGRAPHY Marko Dugonjić Barcelona, 2015

Slide 2

Slide 2 text

TYPOGRAPHY ↓ CSS

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 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 6

Slide 6 text

1 READING DISTANCE

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

2 VIEWPORT WIDTH

Slide 10

Slide 10 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 11

Slide 11 text

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

Slide 12

Slide 12 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 13

Slide 13 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 14

Slide 14 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 15

Slide 15 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 16

Slide 16 text

No content

Slide 17

Slide 17 text

body { background: url(BASELINE-24X24.GIF); }

Slide 18

Slide 18 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 19

Slide 19 text

$baseline_S: 1.4; $baseline_M: 1.45; $baseline_L: 1.5; ! body { line-height: #{$baseline_S}; background-size: 100% #{$baseline_S}em } p { margin-bottom: #{$baseline_S}em } ! ! body { line-height: $baseline_M; background-size: 100% #{$baseline_M}em } p { margin-bottom: #{$baseline_M}em } ! ! body { line-height: $baseline_L; background-size: 100% #{$baseline_L}em } p { margin-bottom: #{$baseline_L}em }

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

No content

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

No content

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

3 HIERARCHY

Slide 27

Slide 27 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 28

Slide 28 text

16 18 21 24 36 48 60 72

Slide 29

Slide 29 text

16 18 21 24 36 48

Slide 30

Slide 30 text

16 18 21 24 36 48

Slide 31

Slide 31 text

16 18 21 24 36 48

Slide 32

Slide 32 text

modularscale.com

Slide 33

Slide 33 text

modularscale.com stats

Slide 34

Slide 34 text

STYLE OPTIONS ! ! ALL CAPS FOR THE SUBHEAD H2 ! SMALL CAPS FOR THE SUBHEAD H3 ! Italic for the Subhead H4

Slide 35

Slide 35 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 36

Slide 36 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 37

Slide 37 text

SETTING SUBHEADS WITH CSS blog.typekit.com/2013/07/25/se ing-subheads-with-css/ webdesign.maratz.com/lab/subheads/

Slide 38

Slide 38 text

4 INFORMATION DENSITY

Slide 39

Slide 39 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 40

Slide 40 text

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

Slide 41

Slide 41 text

No content

Slide 42

Slide 42 text

5 PIXEL DENSITY

Slide 43

Slide 43 text

fontbureau.com/ReadingEdge/

Slide 44

Slide 44 text

No content

Slide 45

Slide 45 text

No content

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

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

Slide 48

Slide 48 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 49

Slide 49 text

6 DEVICE ORIENTATION

Slide 50

Slide 50 text

No content

Slide 51

Slide 51 text

No content

Slide 52

Slide 52 text

No content

Slide 53

Slide 53 text

font-to-width.com

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

typologic.nl/news/live-font-interpolation-with-svg/

Slide 56

Slide 56 text

typosansplomb.com/ResponsiveInterpolation/

Slide 57

Slide 57 text

7 SCREEN ASPECT RATIO

Slide 58

Slide 58 text

No content

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

— ALMOST DONE —

Slide 61

Slide 61 text

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

Slide 62

Slide 62 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 63

Slide 63 text

GRACIAS! ! @markodugonjic speakerdeck.com/maratz

Slide 64

Slide 64 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/