Web Typography

4dc4891f8146f79ced911d665f2dedef?s=47 Richard Rutter
January 13, 2012

Web Typography

An introduction to some basic principles (with particular attention to micro-typography) and the current state of typography on the web. Talk given to students reading for an MA in Web Design & Content Planning at Greenwich University.

4dc4891f8146f79ced911d665f2dedef?s=128

Richard Rutter

January 13, 2012
Tweet

Transcript

  1. 4.
  2. 5.
  3. 6.
  4. 7.
  5. 16.

    "

  6. 19.

    opening double quote “ closing double quote ” opening single

    quote ‘ closing single quote ’ en dash – em dash — minus − multiplication × ellipsis … “ ” ‘ ’ – — − × …
  7. 21.

  8. 22.

    Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv
  9. 23.

    Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv fi
  10. 30.
  11. 31.

    When the only font available is Times New Roman, the

    typographer must make the most of its virtues. The typography should be richly and superbly ordinary, so that attention is drawn to the quality of the composition, not the individual letterforms.” Elements of Typographic Style by Robert Bringhurst “
  12. 32.
  13. 36.

    Browser File types supported Internet Explorer 4 Embedded OpenType (EOT)

    Internet Explorer 9 EOT, WOFF Safari 3.1 TrueType, OpenType, SVG Safari 5 TrueType, OpenType, SVG, WOFF Opera 10 TrueType, OpenType Opera 11.10 TrueType, OpenType, WOFF Firefox 3.1 TrueType, OpenType Firefox 3.6 TrueType, OpenType, WOFF Chrome 4 TrueType, OpenType, SVG Chrome 6 TrueType, OpenType, SVG, WOFF Mobile Safari iOS 3.2 SVG Mobile Safari iOS 4.2 SVG, TTF Mobile Safari iOS 5 SVG, TTF, WOFF Browser support for Webfonts
  14. 37.

    @font-face { font-family: "Clarendon Narrow Extrabold"; src: url(clarendon-nar-eb.eot); src: url(clarendon-nar-eb.eot?iefix)

    format(eot), url(clarendon-nar-eb.woff) format(woff), url(clarendon-nar-eb.ttf) format(truetype), url(clarendon-nar-eb.svg#font) format(svg); font-weight: 800; }
  15. 38.

    ´

  16. 40.
  17. 42.
  18. 48.

    100 Ultra Light, Extra Light 200 Light, Thin 300 Book

    400 Normal, Regular 500 Medium 600 Demi Bold, Semi Bold 700 Bold 800 Black, Extra Bold 900 Ultra Bold, Fat, Heavy Values for font-weight property
  19. 56.
  20. 58.
  21. 63.

    Lining Old Style Proportional 409,280 , Proportional 367,112 , Proportional

    155,068 , Proportional 171,792 , Tabular , , Tabular , , Tabular , , Tabular , ,
  22. 64.
  23. 69.

    N

  24. 72.

    h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2;

    -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; }
  25. 73.

    h1 { font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2;

    -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; -webkit-font-feature-settings: "lnum", "tnum", "dlig " 0, "swsh" 2; }
  26. 74.

    In the Government formed in response to a perceived threat

    om the ’s Sputnik program. absorbed the -year-old , along with the and many of ’s early space programs.
  27. 76.

    <p>In <span class="numbers">1958</span> the <abbr class="smallcaps">US</abbr> Government formed <abbr class="smallcaps">NASA</abbr>

    in response to a perceived threat from the <abbr class="smallcaps">USSR</abbr>’s Sputnik program. <abbr class="smallcaps">NASA</abbr> absorbed the <span class="numbers">46</abbr>-year-old <abbr class="smallcaps">NACA</abbr>, along with the <abbr class="smallcaps">JPL</abbr> and many of <abbr class="smallcaps">ARPA</abbr>’s early space programs.</p>
  28. 77.

    p { font-family: "Magneta Book", Georgia, serif; } .numbers, .smallcaps

    { font-family: "Magneta Book Subset", "Magneta Book", Georgia, serif; }
  29. 78.
  30. 84.
  31. 87.
  32. 88.

    ˇ