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. Web Typography Richard Rutter Web Typography Evangelist, Fontdeck.com Talk Web

    Design 2012, University of Greenwich
  2. We are all typographers!

  3. informationarchitects.jp/en/the-web-is-all-about-typography-period/

  4. None
  5. None
  6. None
  7. None
  8. From Mark Boulton’s “Designing layouts that think for you”

  9. From Mark Boulton’s “Designing layouts that think for you”

  10. From Mark Boulton’s “Designing layouts that think for you”

  11. From Mark Boulton’s “Designing layouts that think for you”

  12. From Mark Boulton’s “Designing layouts that think for you”

  13. From Mark Boulton’s “Designing layouts that think for you”

  14. Defaut line-height and margins

  15. Rhythmic line-height and margins

  16. "

  17. "It's a flippin' pangolin!"

  18. “It’s a flippin’ pangolin!”

  19. opening double quote “ closing double quote ” opening single

    quote ‘ closing single quote ’ en dash – em dash — minus − multiplication × ellipsis … “ ” ‘ ’ – — − × …
  20. wordpress.org/extend/plugins/wp-typography/

  21. Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv
  22. Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv fi
  23. fine affluent

  24. fine affluent

  25. h1 { text-rendering: optimizeLegibility; }

  26. marketplace.veer.com/merch/vpr0001260

  27. Kerning on (top) and off (bottom)

  28. Kerning table for Baskerville 1757

  29. ¶∂

  30. 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 “
  31. None
  32. col.ly/s/842

  33. Font Linking

  34. @font-face { font-family: "Clarendon"; src: url("clarendon-nar-eb.woff"); }

  35. 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
  36. @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; }
  37. ´

  38. astonmartin.com

  39. avios.com

  40. www.lannasport.se

  41. stuff.tv

  42. tradeshift.com/enterprise

  43. Ultra light Light Regular Bold Black Ultra black Adelle Adelle

    Adelle Adelle Adelle Adelle
  44. Light Regular SemiBold Bold ExtraBold Heavy Adelle Adelle Adelle Adelle

    Adelle Adelle
  45. h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: bold; }

  46. h1 { font-family: “Adelle”, Cambria, Georgia, serif; font-weight: 200; }

  47. 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
  48. www.truphone.com

  49. citizenmusician.org

  50. nikebetterworld.com

  51. fontdeck.com/typefaces/nonlatin/greek

  52. fontdeck.com/font/lagoon/regular

  53. fontdeck.com/font/digohweli/regular

  54. ff fl ffl fi ffi ff fl ffl fi ffi

    fb fj fk ti ty
  55. None
  56. QUICHE ch stf ck OO I E

  57. None
  58. affloat fine fjords a oa n fjords

  59. ✂ ajestic

  60. Quiz game key !ui" #$m% &%'

  61. 0123456789 

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

    155,068 , Proportional 171,792 , Tabular , , Tabular , , Tabular , , Tabular , ,
  63. 1 ½

  64. Final space shu le.

  65. Final NASA space shu le.

  66. Final NASA space shu le.

  67. Final space shu le.

  68. N

  69. font-feature-settings

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

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

    -moz-font-feature-settings: "lnum=1, tnum=1, dlig=0, swsh=2"; }
  72. 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; }
  73. 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.
  74. Magneta Expert Subset

  75. <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>
  76. p { font-family: "Magneta Book", Georgia, serif; } .numbers, .smallcaps

    { font-family: "Magneta Book Subset", "Magneta Book", Georgia, serif; }
  77. None
  78. fontdeck.com/typeface/magnetaexpertsubset

  79. 2012.ampersandconf.com

  80. fontdeck.com/typeface/trilogyfatfaceexpertsubset

  81. ele- phant-

  82. Hyphenation in the Gutenberg Bible

  83. None
  84. p { hyphens: auto; }

  85. p { -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto; }

  86. None
  87. ˇ

  88. Richard Rutter, Fontdeck.com @clagnut http://speakerdeck.com/u/clagnut/