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
   

   View Slide

2. View Slide

3. View Slide

4. View Slide

5. Responsive Web Typography
   

   View Slide

6. 8
   Different font sizes for different reading distances
   

   View Slide

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

   View Slide

8. View Slide

9. sizecalc.com
   

   View Slide

10. 7
    Maintain perfect proportions in a paragraph
    

    View Slide

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.
    

    View Slide

12. View Slide

13. 6
    Establish hierarchy appropriate for the screen size
    

    View Slide

14. STYLE OPTIONS
    ALL CAPS FOR THE SUBHEAD H2
    SMALL CAPS FOR THE SUBHEAD H3
    Italic for the Subhead H4
    

    View Slide

15. modularscale.com
    

    View Slide

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

    View Slide

17. 5
    Indented paragraphs vs block paragraphs
    

    View Slide

18. SMALL
    SCREEN
    – style variations
    – indented paragraphs
    – white space
    LARGE
    SCREEN
    – typographic scale
    – block paragraphs
    – graphic elements
    

    View Slide

19. sarasoueidan.com/blog/css-shapes/
    

    View Slide

20. 4
    Use graded fonts to normalize rendering
    

    View Slide

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

    View Slide

22. View Slide

23. 3
    Take advantage of multiple optical sizes
    

    View Slide

24. View Slide

25. 2
    Use font widths according to the width of the screen
    

    View Slide

26. View Slide

27. font-to-width.com
    

    View Slide

28. View Slide

29. 1
    Web fonts are a progressive enhancement
    

    View Slide

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
    

    View Slide

31. github.com/typekit/webfontloader
    

    View Slide

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

    View Slide

33. View Slide

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

    View Slide

35. View Slide

36. View Slide

37. View Slide

38. View Slide

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;
    }
    }
    }
    

    View Slide

40. View Slide

41. View Slide

42. View Slide

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;
    }
    

    View Slide

44. View Slide

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/ */
    

    View Slide

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 */
    

    View Slide

47. View Slide

48. }}}
    {{{ 3D effects
    drop caps
    rotated letters
    flipped words
    

    View Slide

49. View Slide

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/ */
    

    View Slide

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);
    

    View Slide

52. View Slide

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/ */
    

    View Slide

54. View Slide

55. .o {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    transform: rotate(90deg);
    /* Glyph-specific adjustments */
    }
    

    View Slide

56. View Slide

57. .flip {
    display: block;
    -webkit-transform: scale(-1, -1);
    -moz-transform: scale(-1, -1);
    transform: scale(-1, -1);
    }
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. 
    
    You
    &
    Me
    
    
    

    View Slide

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/ */
    

    View Slide

63. View Slide

64. View Slide

65. goo.gl/424HzX
    

    View Slide

66. View Slide

67. View Slide

68. View Slide

69. View Slide

70. preview.typetester.org
    

    View Slide

71. &ogether
    You
    Me
    

    View Slide

72. &ogether
    You
    Me
    

    View Slide

73. &ogether
    You
    Me
    

    View Slide

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

    View Slide