Save 37% off PRO during our Black Friday Sale! »

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.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

June 13, 2015
Tweet

Transcript

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

    2015.
  2. None
  3. None
  4. None
  5. Responsive Web Typography

  6. 7 Different font sizes for different reading distances

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

  8. None
  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.
  12. None
  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. 3 Use graded fonts to normalize rendering across different pixel

    densities
  20. None
  21. None
  22. 2 Look for type families that have multiple optical sizes

  23. None
  24. 1 Use different font widths according to the width of

    the screen
  25. None
  26. font-to-width.com

  27. None
  28. The Benton Project ! Indra Kupferschmid CTS Nick Sherman QAD

  29. None
  30. None
  31. None
  32. None
  33. .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; } } }
  34. None
  35. None
  36. None
  37. None
  38. /* 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/ */
  39. @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 */
  40. None
  41. 3D effects drop caps flipped type rotated type } {

  42. None
  43. 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/ */
  44. @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);
  45. None
  46. 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/ */
  47. None
  48. .o { -webkit-transform: rotate(90deg); -moz-transform: rotate(90deg); transform: rotate(90deg); /* Glyph-specific

    adjustments */ }
  49. None
  50. .flip { display: block; -webkit-transform: scale(-1, -1); -moz-transform: scale(-1, -1);

    transform: scale(-1, -1); }
  51. None
  52. None
  53. None
  54. <div class="container"> <h1> <span class="s1">You</span> <span class="s2">&</span> <span class="s3">Me</span> </h1>

    </div>
  55. .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/ */
  56. None
  57. None
  58. preview.typetester.org

  59. Thank You! Marko Dugonjić @markodugonjic marko@creativenights.com Abril Fatface by TypeTogether

    Ingra by Lettermin