Responsive Web Typography @ Awwwards Barcelona

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
February 24, 2015

Responsive Web Typography @ Awwwards Barcelona

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ć

February 24, 2015
Tweet

Transcript

  1. RESPONSIVE WEB TYPOGRAPHY Marko Dugonjić Barcelona, 2015

  2. TYPOGRAPHY ↓ CSS

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

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

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

    width (and height) content hierarchy information density pixel density device orientation screen aspect ratio
  6. 1  READING DISTANCE

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

  8. None
  9. 2 VIEWPORT WIDTH

  10. 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/ “
  11. ideal 66 max 75 min 45 < 40 chars screen

    width: 320px
  12. 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.
  13. • • • • • • • • 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.
  14. 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 Š
  15. /* 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 }
  16. None
  17. body { background: url(BASELINE-24X24.GIF); }

  18. /* 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; }
  19. $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 }
  20. letter space, word spac, line space LETTER SPACE WORD SPACE

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

    letter-spacing: .01em; word-spacing: .01em; } } ! /* vendor prefix omitted code */
  23. None
  24. None
  25. None
  26. 3 HIERARCHY

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

  29. 16 18 21 24 36 48

  30. 16 18 21 24 36 48

  31. 16 18 21 24 36 48

  32. modularscale.com

  33. modularscale.com stats

  34. STYLE OPTIONS ! ! ALL CAPS FOR THE SUBHEAD H2

    ! SMALL CAPS FOR THE SUBHEAD H3 ! Italic for the Subhead H4
  35. 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
  36. /* 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; }
  37. SETTING SUBHEADS WITH CSS  blog.typekit.com/2013/07/25/se ing-subheads-with-css/ webdesign.maratz.com/lab/subheads/

  38. 4 INFORMATION DENSITY

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

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

  43. fontbureau.com/ReadingEdge/

  44. None
  45. None
  46. None
  47. iA ALL, EXCEPT RETINA RETINA LANDSCAPE RETINA PORTRAIT ia.net/blog/responsive-typography/

  48. @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'); } }
  49. 6 DEVICE ORIENTATION

  50. None
  51. None
  52. None
  53. font-to-width.com

  54. ! ! – 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:
  55. typologic.nl/news/live-font-interpolation-with-svg/

  56. typosansplomb.com/ResponsiveInterpolation/

  57. 7 SCREEN ASPECT RATIO

  58. None
  59. bradfrost.github.io/this-is-responsive/index.html

  60. — ALMOST DONE —

  61. reading distance  width and height content hierarchy information density

    pixel density device orientation screen aspect ratio
  62. ! ! – 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
  63. GRACIAS! ! @markodugonjic speakerdeck.com/maratz

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