Art Directed Web Typography @ WordCamp Vienna 2016

Having the ability to set legible body copy is an absolute must, and we’ve come a long way with web typography since the dawn of web design. However, it sometimes feels like we have allowed the lack of variety prior to the rise of web fonts to dampen our creativity now that thousands of web fonts are at our disposal. Have usability conventions and the web’s universality steered us away from proper art direction? Have we forgotten about art direction altogether? Let’s look at ways we can push typographic design on the web further, beyond the status quo of today.

Transcript

1. & & & Typography WEB DIRECTED Art
6. Responsive Web Typography
7. 7 Different font sizes for different reading distances
8. 0,26mm 1,3mm 71cm 350cm
9. sizecalc.com
10. 6 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. 5 Establish hierarchy appropriate for the screen real-estate
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. 4 Indented paragraphs on mobile vs block paragraphs on desktop
18. SMALL
    SCREEN
    – style variations
    – indented paragraphs
    – white space LARGE SCREEN – typographic scale – block paragraphs – graphic elements
19. sarasoueidan.com/blog/css-shapes/
20. 3 Use graded fonts to normalize rendering across different pixel densities
21. ia.net/know-how/responsive-typography
23. 2 Look for type families that have multiple optical sizes
25. 1 Use different font widths according to the width of the screen
27. font-to-width.com
29. The Benton Project bentonmodern.webtype.com Indra Kupferschmid CTS Nick Sherman QAD
34. .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; } } }
39. /* 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"; /* http://clagnut.com/sandbox/css3/ */
40. @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 */
42. 3D effects drop caps flipped type rotated type { }
44. 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/ */
45. @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);
47. var dropcaps = document.querySelectorAll('.drop-cap'); if (window.innerWidth < 600) { window.Dropcap.layout(dropcaps, 3); } else { window.Dropcap.layout(dropcaps, 5, 3); } /* http://webplatform.adobe.com/dropcap.js/ */
49. .o { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); /* Glyph-specific adjustments */ }
51. .flip { display: block; -webkit-transform: scale(-1, -1); -moz-transform: scale(-1, -1); transform: scale(-1, -1); }
55. <div class="container"> <h1> <span class="s1">You</span> <span class="s2">&</span> <span class="s3">Me</span> </h1> </div>
56. .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 */ } .container h1 .s1 { position: absolute; left: 10%; top: 10%; } /* http://webdesign.maratz.com/lab/expressive-web-typography/ */
59. preview.typetester.org
60. COLOPHON You! Thank @markodugonjic marko@creativenights.com