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

064a012a1854bc58e17b05f6db3877af?s=128

Danny Calders

April 13, 2012
Tweet

Transcript

  1. 4.

    Responsive web design + fluid grids + media queries +

    flexible images I won’t be talking about flexible media today.
  2. 5.
  3. 7.
  4. 8.

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

    networks to unknown devices and browsers.” - Jeffrey Veen, Hotwired Style, 1997
  5. 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
  6. 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
  7. 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.
  8. 21.
  9. 22.
  10. 24.
  11. 25.

    I truely believe that we would not be were we

    are today if it weren’t for the iPhone.
  12. 26.
  13. 35.
  14. 38.
  15. 40.
  16. 43.

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

    an uppercase letter M set in lead.
  17. 45.
  18. 48.

    M 288px Georgia 288px Helvetica M Today, in the digital

    world, it is harder to define what 1 em exactly is.
  19. 49.

    ... 16 18 21 24 36 48 The typographic scale

    The typographic scale is a standard also going back to the days of typesetting.
  20. 50.
  21. 51.

    16px 18px 21px 24px 36px 48px The typographic scale More

    suitable for titles on larger screens
  22. 52.
  23. 53.

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

    better on smaller screens (tablets, iPad,...)
  24. 54.
  25. 55.
  26. 56.

    16px 18px 21px 24px 36px 48px The typographic scale Even

    smaller for mobile and small screens.
  27. 57.
  28. 58.
  29. 59.

    Better font size Larger screens need a larger font size,

    smaller screens need a smaller font size.
  30. 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.
  31. 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.
  32. 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.
  33. 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
  34. 66.

    A handy way of showing character 45 and 75 within

    a text. Hat tip to Trent Walton
  35. 68.
  36. 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.
  37. 70.
  38. 71.

    The drawback is that people might need to scroll down

    the first column, up the second...
  39. 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.
  40. 73.
  41. 77.
  42. 85.
  43. 87.
  44. 88.

    @media only screen and (max-width: 45em) { p { line-height:

    1.45; } } Adjusted for smaller screens...
  45. 89.
  46. 90.
  47. 91.

    @media only screen and (max-width: 22em) { p { line-height:

    1.4; } } ... and even more for mobile and very small screens.
  48. 92.
  49. 93.
  50. 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.
  51. 101.
  52. 102.
  53. 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...
  54. 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.
  55. 117.
  56. 118.
  57. 119.
  58. 120.

    could cause a performance hit! ... but be aware of

    the side effects. Use only on titles.
  59. 121.

    ... or you could use a jQuery plugin in the

    meanwhile. Still, only use on titles. typebutter.com
  60. 125.
  61. 128.
  62. 129.
  63. 143.