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. 2.
  2. 3.
  3. 4.
  4. 8.
  5. 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.
  6. 12.
  7. 14.

    STYLE OPTIONS ALL CAPS FOR THE SUBHEAD H2 SMALL CAPS

    FOR THE SUBHEAD H3 Italic for the Subhead H4
  8. 18.

    SMALL  SCREEN  – style variations  – indented

    paragraphs – white space LARGE SCREEN – typographic scale – block paragraphs – graphic elements
  9. 22.
  10. 24.
  11. 26.
  12. 28.
  13. 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
  14. 33.
  15. 35.
  16. 36.
  17. 37.
  18. 38.
  19. 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; } } }
  20. 40.
  21. 41.
  22. 42.
  23. 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; }
  24. 44.
  25. 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/ */
  26. 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 */
  27. 47.
  28. 49.
  29. 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/ */
  30. 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);
  31. 52.
  32. 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/ */
  33. 54.
  34. 56.
  35. 58.
  36. 59.
  37. 60.
  38. 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/ */
  39. 63.
  40. 64.
  41. 66.
  42. 67.
  43. 68.
  44. 69.