Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Responsive Web Design & Typography

Responsive Web Design & Typography

How do we ensure our text stays readable within the flexible nature of responsive web design. Presentation given at the Fronteers meeting at Inventis, April 10, 2012


Danny Calders

April 13, 2012


  1. Responsive Web Design and Typography Fronteers meeting @ Inventis, 10

    april 2012
  2. 2011. This is how it all started...

  3. www.alistapart.com/articles/responsive-web-design/

  4. Responsive web design + fluid grids + media queries +

    flexible images I won’t be talking about flexible media today.
  5. Back to 1994. This early website was completely fluid (

    we might even say responsive? ).
  6. This is what a 640px wide window looks like today

    (on a 13” MacBook Air)
  7. 1997

  8. “The web’s content must be build to travel across vast

    networks to unknown devices and browsers.” - Jeffrey Veen, Hotwired Style, 1997
  9. 2000 www.alistapart.com/articles/dao/

  10. “Make pages which are adaptable. Make pages which are accessible,

    regardless of the browser, platform or screen that your reader chooses or must use to access your pages.” - John Allsopp, A List Apart, 2000
  11. 2006 clagnut.com/blog/1663/

  12. “There’s an different approach to web page layout which is

    gradually getting some traction. The idea is that the layout is changed to best accommodate the window size.” - Richard Rutter, own blog, 2006
  13. Example: when the screen was wide enough, a third column

    was shown www.jrvelasco.com
  14. This was done with javascript, measuring the viewport width.

  15. Also in 2006. A smart man wrote a smart book.

  16. “... increasing a page’s flexibility and taking necessary steps to

    ensure that it’s readable in as many circumstances as possible...” - Dan Cederholm, Bulletproof Web Design, 2006 This time focusing on readability instead of layout.
  17. www.simplebits.com/publications/bulletproof

  18. This is the book’s example site.

  19. Bulletproof test: increase the font size by a few notches

  20. The latest release of the book incorporates responsive web design

  21. None
  22. None
  23. So what happened between 2006 and 2010?

  24. None
  25. I truely believe that we would not be were we

    are today if it weren’t for the iPhone.
  26. How do we keep our texts readable in such a

    flexible environment?
  27. Responsive Web Design and Typography

  28. Typography readability + character Character: does it represent the client

    or message?
  29. A great example of readability.

  30. If people need this to be able to read your

  31. ...you did something wrong. (example: 11px grey Arial body text)

  32. How do we know it’s readable?

  33. “Read!” - me Read your text. Read it a lot.

    Is it easy to read?
  34. Typography number of fonts Hint: don’t use too many.

  35. One font

  36. aworkinglibrary.com

  37. seedconference.com

  38. Two fonts

  39. lostworldsfairs.com/atlantis

  40. Readable text font size measure leading Measure and leading [pronounced:

    ledding] come from the days of typesetting.
  41. Readable text font size line length line spacing In more

    human language.
  42. www.informationarchitects.jp/en/100e2r/

  43. 1em ≠ 1em 1 em was originally the width of

    an uppercase letter M set in lead.
  44. 16px ≠ 16px

  45. The Adventures of Sherlock Holmes 48px Georgia The Adventures of

    Sherlock Holmes 48px Times New Roman
  46. M 288px Georgia 288px Times New Roman M

  47. The Adventures of Sherlock Holmes 48px Georgia The Adventures of

    Sherlock Holmes 48px Helvetica
  48. M 288px Georgia 288px Helvetica M Today, in the digital

    world, it is harder to define what 1 em exactly is.
  49. ... 16 18 21 24 36 48 The typographic scale

    The typographic scale is a standard also going back to the days of typesetting.
  50. None
  51. 16px 18px 21px 24px 36px 48px The typographic scale More

    suitable for titles on larger screens
  52. 48 36 24

  53. 16px 18px 21px 24px 36px 48px The typographic scale Looking

    better on smaller screens (tablets, iPad,...)
  54. None
  55. None
  56. 16px 18px 21px 24px 36px 48px The typographic scale Even

    smaller for mobile and small screens.
  57. None
  58. None
  59. Better font size Larger screens need a larger font size,

    smaller screens need a smaller font size.
  60. body { font-size: 100%; } p { font-size: 1em; //16px

    } Great way of working. If you ever need to scale, you just need to change the root size.
  61. body { font-size: 100%; } ul { font-size: 1em; //16px

    } footer ul { font-size: 0.75em; //12px } footer ul p { font-size: 1.33em; //? } But it can get complicated when nesting elements.
  62. body { font-size: 100%; } ul { font-size: 1rem; //16px

    } footer ul { font-size: 0.75rem; //12px } footer ul p { font-size: 1rem; //16px } rem (root em) relates back to the root, not to the parent element.
  63. caniuse.com

  64. Readable text font size line length line spacing

  65. “Anything from 45 to 75 characters is widely regarded as

    a satisfactory length of line for a single-column page...” - The Elements of Typographic Style Applied to the Web
  66. A handy way of showing character 45 and 75 within

    a text. Hat tip to Trent Walton
  67. Readable text font size line length: columns line spacing

  68. None
  69. @media only screen and (min-width: 35em) { #container { -webkit-column-count:

    2; -webkit-column-gap: 20px; } } One way of dealing with long lines of text is to create columns.
  70. None
  71. The drawback is that people might need to scroll down

    the first column, up the second...
  72. @media only screen and (min-width: 35em) and (min-height: 40em) {

    #container { -webkit-column-count: 2; -webkit-column-gap: 20px; } } That’s why you can combine columns with a minimum height.
  73. None
  74. Side note: hyphenation

  75. blog.fontdeck.com/post/9037028497/hyphens

  76. p { -webkit-hyphens:auto; }

  77. None
  78. <!DOCTYPE HTML> <html lang="en-US"> <head> Hyphenation uses the page’s language

    to look up the dictionary.
  79. Readable text font size line length: max-width line spacing

  80. Too long lines to read...

  81. #container { max-width: 45em; margin: 0 auto; }

  82. Aaah. Perfect.

  83. Better line length Create columns when height allowed, use maximum

    width otherwise.
  84. Readable text font size line length line spacing

  85. None
  86. p { line-height: 1.5; } Generally a good line height

    for larger screen sizes.
  87. None
  88. @media only screen and (max-width: 45em) { p { line-height:

    1.45; } } Adjusted for smaller screens...
  89. None
  90. None
  91. @media only screen and (max-width: 22em) { p { line-height:

    1.4; } } ... and even more for mobile and very small screens.
  92. None
  93. None
  94. “What we need is a fluid way to set line

    height. ... Molten leading would maintain a specific font- size while adjusting line-height based on width. ... What I’m talking about is augmenting CSS with range rules (effectively, min/max line-height) that don’t yet exist, but should for the sake of fluidity.” - Tim Brown, Molten Leading, 2012 It would be nice if we had a min-line-height, like we have a min-width.
  95. A jQuery plugin until CSS catches up. github.com/jimjeffers/jQuery-minLineHeight

  96. Better line spacing Wider paragraphs need more line height.

  97. Headlines fittext

  98. fittextjs.com

  99. Fittext makes sure the title scales automatically when the screen

    is resized.
  100. <script src="js/jquery.fittext.js"></script> <script> jQuery(document).ready(function($){ $(".fit").fitText(0.7); }); </script> You have to

    play around with the value. A bigger value makes the text smaller.
  101. None
  102. None
  103. Details lettering kerning other

  104. Details lettering kerning other

  105. letteringjs.com

  106. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering(); }); </script> .char1, .char4,

    .char19, .char26, .char30 { color: #FF0067; } You can use lettering to target and style individual letters...
  107. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering(); }); </script> .char1, .char4,

    .char19, .char26, .char30 { color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.
  108. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering("words"); }); </script> .word4, .word9

    { color: #FF0067; } ... or words ...
  109. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering("words"); }); </script> .word4, .word9

    { color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.
  110. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering("lines"); }); </script> .line2 {

    color: #FF0067; } ... or lines.
  111. <script src="js/jquery.lettering-0.6.1.min.js"></script> <script> jQuery(document).ready(function($) { $("h2").lettering("lines"); }); </script> .line2 {

    color: #FF0067; } Always remember that you are absolutely unique. Just like everyone else.
  112. trentwalton.com/css3/type

  113. www.strangenative.com/foldup

  114. Details lettering kerning other

  115. aestheticallyloyal.com/public/optimize-legibility

  116. h2 { text-rendering: optimizeLegibility; } You can use CSS for

  117. None
  118. None
  119. None
  120. could cause a performance hit! ... but be aware of

    the side effects. Use only on titles.
  121. ... or you could use a jQuery plugin in the

    meanwhile. Still, only use on titles. typebutter.com
  122. Details lettering kerning other Alias “everything else Trent Walton does

    is awesome”.
  123. trentwalton.com/category/notes

  124. The date format changes with the available space. Told you,

    it’s a detail!
  125. None
  126. Fittext used in combination with CSS3 goodness.

  127. Selected text colour matches the article’s colours.

  128. None
  129. None
  130. The future?

  131. beta.typecastapp.com

  132. Setting type in an infinite canvas...

  133. with access to thousands of web fonts...

  134. and CSS automagically created for you!

  135. An example of a page made entirely in Typecast without...

  136. ... and with a grid to show the vertical rhythm.

  137. simpleasmilk.co.uk

  138. Resources Interested and wanting to read more on web typography?

    Look no further!
  139. webtypography.net/toc/

  140. jasonsantamaria.com/articles/

  141. trentwalton.com

  142. nicewebtype.com

  143. 8faces.com

  144. Thank you t @dannycalders