Responsive Web Typography @ Smashingconf Oxford

Responsive Web Typography @ Smashingconf Oxford

Responsive Web Design done correctly is based upon content rather than actual device resolutions, and so typography should adapt to both layout and sizing across content breakpoints.

However, mere font sizing along the typographic scale based upon two-dimensional viewport @media queries is not enough.

Apart from setting the correct balance of the black and the white in letterforms and texts, there are other important factors such as reading distance, information density, screen sharpness and device orientation that also influence the reading process.

Learn to look at typography multidimensionally and enhance the overall responsive experience.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

March 19, 2014
Tweet

Transcript

  1. RESPONSIVE WEB TYPOGRAPHY Marko Dugonjić @markodugonjic ! Oxford, 2014

  2. @markodugonjic

  3. None
  4. Creative Nights

  5. None
  6. MENU — Variables Tools Experiments Process

  7. — THE PROBLEM —

  8. None
  9. None
  10. None
  11. None
  12. :/

  13. media queries flexible layouts flexible images Responsive Experience

  14. VARIABLES of the RESPONSIVE READING EXPERIENCE — reading distance viewport

    width (and height) content hierarchy information density pixel density device orientation screen aspect ratio
  15. NARROW WIDE BIG SMALL TIM BROWN h p://vimeo.com/56276418 FINE COARSE

  16. NARROW WIDE FINE COARSE BIG SMALL TIM BROWN h p://vimeo.com/56276418

  17. SMARTPHONES ! Close reading Small screen HiDPI screen Single column

    Low information density Variable orientation Many aspect ratios DESKTOPS ! Distant reading Large screen Coarse screen Multiple columns High information density Fixed orientation A few aspect ratios
  18. 1  READING DISTANCE

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

  20. Y X ?

  21. None
  22. // concept code ! if (distance < 30) { body.className

    = 'close'; } ! if (distance > 30 && distance < 50) { body.className = 'medium'; } ! if (distance > 50) { body.className = 'far'; }
  23. * { margin: 0; padding: 0; } ! body {

     font-size: 100%; line-height: 1.5; } ! p {  margin-bottom: 1.5em; /* = line-height */ ! max-width: 38em;  /* 30–38em */ }
  24. None
  25. 2 VIEWPORT WIDTH

  26. 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 h p://webtypography.net/Rhythm_and_Proportion/Horizontal_Motion/2.1.2/ “
  27. ideal 66 max 75 min 45 < 40 chars screen

    width: 320px
  28. Breakpoints should not be dictated by devices, but by content.

    Let the content decide when to expand and then adjust your designs. ! JEREMY KEITH h p://www.lukew.com/ff/entry.asp?1393 “
  29. 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 h p://trentwalton.com/2012/06/19/fluid-type/ “
  30. @media only screen and (min-width: 37.5em) { }  /*

    600px */ ! @media only screen and (min-width: 50em) { }  /* 800px */ ! @media only screen and (min-width: 62.5em) { }  /* 1000px */ LYZA GARDNER h p://blog.cloudfour.com/the-ems-have-it-proportional-media-queries- w/
  31. 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.
  32. 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.
  33. 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. ! jjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj jjjjjjjjj ŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠŠ q d j Š
  34. /* 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 }
  35. None
  36. /* 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; }
  37. /* 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; }
  38. Molten leading nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line-height/

  39. $('p').moltenLeading({ minline: 1.4, maxline: 1.7 }); MAT MARQUIS h ps://github.com/Wilto/Molten-Leading

  40. LINE SPACE letter space, word spac, line space LETTER SPACE

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

    LINE SPACE
  42. None
  43. @media only screen and (min-device-pixel-ratio: 1.5) {  p {

    /* font-size: 1rem; line-height: 1.5; */ letter-spacing: .01em; word-spacing: .01em; } } ! /* vendor prefix omitted code */
  44. None
  45. None
  46. 3 HIERARCHY

  47. 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
  48. 16 18 21 24 36 48 60 72

  49. 16 18 21 24 36 48

  50. 16 18 21 24 36 48

  51. 16 18 21 24 36 48

  52. /* 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 */ }
  53. 16 24 36 54 81 122

  54. h p://www.modularscale.com

  55. STYLE OPTIONS ! ! ALL CAPS SUBHEAD H2 ! SMALL

    CAPS SUBHEAD H3 ! Italic Subhead H4
  56. 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
  57. /* 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; }
  58. Se ing Subheads with CSS  h p://blog.typekit.com/2013/07/25/se ing-subheads-with-css/

  59. h p://webdesign.maratz.com/lab/subheads/

  60. 4 INFORMATION DENSITY

  61. 1 1 2 1 2

  62. 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
  63. LESS  INFORMATION ! – style variations  – indented

    paragraphs – white space MORE INFORMATION ! – typographic scale – block paragraphs – graphic elements
  64. None
  65. 5 PIXEL DENSITY

  66. h p://www.fontbureau.com/ReadingEdge/

  67. None
  68. None
  69. h p://www.typonine.com

  70. iA ALL, EXCEPT RETINA RETINA LANDSCAPE RETINA PORTRAIT h p://ia.net/blog/responsive-typography/

  71. @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'); } }
  72. Comprehensive list of graded fonts h p://typophile.com/node/81483

  73. 6 DEVICE ORIENTATION

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

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

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

  77. None
  78. HEY, HANDSOME! HOW YOU DOIN’? HEY, HANDSOME! HOW YOU DOIN’?

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

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

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

  82. HANDSOME! HANDSOME!

  83. /* 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; } }
  84. None
  85. None
  86. ! ! – 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:
  87. 7 SCREEN ASPECT RATIO

  88. None
  89. h p://bradfrost.github.io/this-is-responsive/index.html

  90. — ALMOST DONE —

  91. reading distance  width and height content hierarchy information density

    pixel density device orientation screen aspect ratio
  92. None
  93. ! ! – 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 h p://www.cennydd.co.uk/2013/designing-with-context
  94. None
  95. THANKS! ! Marko Dugonjić @markodugonjic

  96. 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/