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.

Transcript

1. & & & Typography WEB NEXT The STEPS For
5. Responsive Web Typography
6. 8 Different font sizes for different reading distances
7. 0,26mm 1,3mm 71cm 350cm
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.
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
23. 3 Take advantage of multiple optical sizes
25. 2 Use font widths according to the width of the screen
27. font-to-width.com
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
34. The Benton Project bentonmodern.webtype.com Indra Kupferschmid CTS Nick Sherman QAD
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; } } }
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; }
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 */
48. }}} {{{ 3D effects drop caps rotated letters flipped words
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);
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/ */
55. .o { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); /* Glyph-specific adjustments */ }
57. .flip { display: block; -webkit-transform: scale(-1, -1); -moz-transform: scale(-1, -1); transform: scale(-1, -1); }
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/ */
65. goo.gl/424HzX
70. preview.typetester.org
71. &ogether You Me
72. &ogether You Me
73. &ogether You Me
74. You! Thank COLOPHON @markodugonjic marko@creativenights.com