Web Typography

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. ffi

22. Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv

23. Calibri         0123abcdefigHJKlmnopQRStuv Cambria      

      0123abcdefigHJKlmnopQRStu Candara       0123abcdefigHJKlmnopQRStu Constantia     0123abcdefigHJKlmnopQRStu Corbel           0123abcdefigHJKlmnopQRStuv fi

24. fine affluent

25. fine affluent

26. h1 { text-rendering: optimizeLegibility; }

27. marketplace.veer.com/merch/vpr0001260

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

29. Kerning table for Baskerville 1757

30. ¶∂

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 “
32. None

33. col.ly/s/842

34. Font Linking

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

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

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; }

38. ´

39. astonmartin.com

40. avios.com

41. www.lannasport.se

42. stuff.tv

43. tradeshift.com/enterprise

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

    Adelle Adelle Adelle Adelle

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

    Adelle Adelle

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

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

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

49. www.truphone.com

50. citizenmusician.org

51. nikebetterworld.com

52. fontdeck.com/typefaces/nonlatin/greek

53. fontdeck.com/font/lagoon/regular

54. fontdeck.com/font/digohweli/regular

55. ff fl ffl fi ffi ff fl ffl fi ffi

    fb fj fk ti ty
56. None

57. QUICHE ch stf ck OO I E

58. None

59. affloat fine fjords a oa n fjords

60. ✂ ajestic

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

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

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

    155,068 , Proportional 171,792 , Tabular , , Tabular , , Tabular , , Tabular , ,

64. 1 ½

65. Final space shu le.

66. Final NASA space shu le.

67. Final NASA space shu le.

68. Final space shu le.

69. N

70. font-feature-settings

71. h1 { font-feature-settings: "lnum", "tnum", "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"; }

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; }

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.

75. Magneta Expert Subset

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>

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

    { font-family: "Magneta Book Subset", "Magneta Book", Georgia, serif; }
78. None

79. fontdeck.com/typeface/magnetaexpertsubset

80. 2012.ampersandconf.com

81. fontdeck.com/typeface/trilogyfatfaceexpertsubset

82. ele- phant-

83. Hyphenation in the Gutenberg Bible

84. None

85. p { hyphens: auto; }

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

87. None

88. ˇ

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