Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Art Directed Web Typography

Art Directed Web Typography

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.

Marko Dugonjić

June 13, 2015
Tweet

More Decks by Marko Dugonjić

Other Decks in Design

Transcript

  1. Art
    Directed
    WEB
    TYPOGRAPHY
    Marko Dugonjić • @markodugonjic
    Typographics NYC 2015.

    View full-size slide

  2. Responsive Web
    Typography

    View full-size slide

  3. 7
    Different font sizes for different reading distances

    View full-size slide

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

    View full-size slide

  5. sizecalc.com

    View full-size slide

  6. 6
    Maintain perfect proportions in a paragraph

    View full-size slide

  7. 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 full-size slide

  8. 5
    Establish hierarchy appropriate for
    the screen real-estate

    View full-size slide

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

    View full-size slide

  10. modularscale.com

    View full-size slide

  11. SETTING SUBHEADS WITH CSS

    blog.typekit.com/2013/07/25/setting-subheads-with-css/
    webdesign.maratz.com/lab/subheads/

    View full-size slide

  12. 4
    Indented paragraphs on mobile
    vs block paragraphs on desktop

    View full-size slide

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

    View full-size slide

  14. 3
    Use graded fonts to normalize rendering across
    different pixel densities

    View full-size slide

  15. 2
    Look for type families that have multiple
    optical sizes

    View full-size slide

  16. 1
    Use different font widths
    according to the width of the screen

    View full-size slide

  17. font-to-width.com

    View full-size slide

  18. The Benton Project
    !
    Indra Kupferschmid
    CTS
    Nick Sherman
    QAD

    View full-size slide

  19. .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 full-size slide

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

    View full-size slide

  21. @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 full-size slide

  22. 3D effects
    drop caps
    flipped type
    rotated type
    }
    {

    View full-size slide

  23. 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 full-size slide

  24. @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 full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  28. .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%;
    }
    /* http://webdesign.maratz.com/lab/expressive-web-typography/ */

    View full-size slide

  29. preview.typetester.org

    View full-size slide

  30. Thank You!
    Marko Dugonjić
    @markodugonjic
    [email protected]
    Abril Fatface by TypeTogether
    Ingra by Lettermin

    View full-size slide