The Next Steps for Web Typography

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
November 14, 2015

The Next Steps for Web Typography

We’ve come a long way with web typography since the dawn of web design, however, it sometimes feels as if the constraints of old still dampens our creativity. Let’s explore the ways we can push typographic design on the web further, beyond the status quo of today.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

November 14, 2015
Tweet

Transcript

  1. & & & Typography WEB NEXT The STEPS For

  2. None
  3. None
  4. None
  5. Responsive Web Typography

  6. 8 Different font sizes for different reading distances

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

  8. None
  9. sizecalc.com

  10. 7 Maintain perfect proportions in a paragraph

  11. 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.
  12. None
  13. 6 Establish hierarchy appropriate for the screen size

  14. STYLE OPTIONS ALL CAPS FOR THE SUBHEAD H2 SMALL CAPS

    FOR THE SUBHEAD H3 Italic for the Subhead H4
  15. modularscale.com

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

  17. 5 Indented paragraphs vs block paragraphs

  18. SMALL  SCREEN  – style variations  – indented

    paragraphs – white space LARGE SCREEN – typographic scale – block paragraphs – graphic elements
  19. sarasoueidan.com/blog/css-shapes/

  20. 4 Use graded fonts to normalize rendering

  21. ia.net/know-how/responsive-typography

  22. None
  23. 3 Take advantage of multiple optical sizes

  24. None
  25. 2 Use font widths according to the width of the

    screen
  26. None
  27. font-to-width.com

  28. None
  29. 1 Web fonts are a progressive enhancement

  30. PERFORMANCE STRATEGIES Load only fonts that you really need Provide

    decent fallback options  Use SVG instead of web fonts for lettering Subset web fonts Don’t inline
  31. github.com/typekit/webfontloader

  32. bramstein.com/writing/smashing-book-5-web-fonts-performance.html

  33. None
  34. The Benton Project bentonmodern.webtype.com Indra Kupferschmid CTS Nick Sherman QAD

  35. None
  36. None
  37. None
  38. None
  39. .columns { @media only screen and (min-height: 25em) { @media

    only screen and (min-width: 40em) and (max-width: 59.9375em) { -webkit-columns: 2; -moz-columns: 2; columns: 2; -webkit-column-gap: 2.7em; -moz-column-gap: 2.7em; column-gap: 2.7em; } @media only screen and (min-width: 60em) { -webkit-columns: 3; -moz-columns: 3; columns: 3; -webkit-column-gap: 2.7em; -moz-column-gap: 2.7em; column-gap: 2.7em; } } }
  40. None
  41. None
  42. None
  43. .section .grid:before { content: '§'; position: absolute; left: 50%; display:

    block; @include rem(font-size, 1); @include rem(line-height, 4); @include rem(width, 2); @include rem(height, 4); @include rem(top, -2); @include rem(margin-left, -1); text-align: center; background: #fff; }
  44. None
  45. /* Alternate characters */ -webkit-font-feature-settings: "ss01"; -moz-font-feature-settings: "ss01" 1; font-feature-settings:

    "ss01"; /* Common ligatures */ -webkit-font-feature-settings: "liga"; -moz-font-feature-settings: "liga" 1; font-feature-settings: "liga"; /* Small caps */ -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp" 1; font-feature-settings: "smcp"; /* clagnut.com/sandbox/css3/ */
  46. @supports ((font-feature-settings: "smcp") or (-webkit-font-feature-settings: "smcp") or (-moz-font-feature-settings: "smcp" 1))

    { .small-caps { text-transform: lowercase; -webkit-font-feature-settings: "smcp"; -moz-font-feature-settings: "smcp" 1; font-feature-settings: "smcp"; } } /* stateofwebtype.com/#font-feature-settings */
  47. None
  48. }}} {{{ 3D effects drop caps rotated letters flipped words

  49. None
  50. text-shadow: 1px 0px #ddc, 0px 1px #996, 2px 1px #ddc,

    1px 2px #996, 3px 2px #ddc, 2px 3px #996, 4px 3px #ddc, 3px 4px #996, 5px 4px #ddc, 4px 5px #996, 6px 5px #ddc, 5px 6px #996, 7px 6px #ddc, 6px 7px #996, 8px 7px #ddc, 7px 8px #996, 9px 8px #ddc, 8px 9px #996; /* practice.typekit.com/lesson/using-shades/ */
  51. @function generate3DShadow($max, $x, $y) { $val: 1px 0 #{$x}, 0

    1px #{$y}; @for $i from 1 through $max { $val: #{$val}, #{$i+1}px #{$i}px #{$x}; $val: #{$val}, #{$i}px #{$i+1}px #{$y}; } @return $val; } text-shadow: generate3DShadow(10, #ddc, #996);
  52. None
  53. var dropcaps = document.querySelectorAll('.drop-cap'); if (window.innerWidth < 600) { window.Dropcap.layout(dropcaps,

    3); } else { window.Dropcap.layout(dropcaps, 5, 3); } /* webplatform.adobe.com/dropcap.js/ */
  54. None
  55. .o { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); /* Glyph-specific

    adjustments */ }
  56. None
  57. .flip { display: block; -webkit-transform: scale(-1, -1); -moz-transform: scale(-1, -1);

    transform: scale(-1, -1); }
  58. None
  59. None
  60. None
  61. <div class="container"> <h1> <span class="s1">You</span> <span class="s2">&</span> <span class="s3">Me</span> </h1>

    </div>
  62. .container { font-size: 10vw; } .container h1 { font-size: 1em;

    line-height: 1; position: relative; width: 100%; height: 0; padding-top: 75%; /* 4:3 aspect ratio */ padding-top: 50%; /* 2:1 aspect ratio */ } .s1 { position: absolute; left: 10%; top: 10%; } /* webdesign.maratz.com/lab/expressive-web-typography/ */
  63. None
  64. None
  65. goo.gl/424HzX

  66. None
  67. None
  68. None
  69. None
  70. preview.typetester.org

  71. &ogether You Me

  72. &ogether You Me

  73. &ogether You Me

  74. You! Thank COLOPHON @markodugonjic marko@creativenights.com