$30 off During Our Annual Pro Sale. View Details »

The Next Steps for Web Typography

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.

Marko Dugonjić

November 14, 2015
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

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
    [email protected]

    View Slide