1. Web Typography Fundamentals From Gutenberg to Google

2. Hi There. Bill C. EnglishLead Designer, Tuitive@billcenglish

8. HistoryVocabularyContrastTechnologyTips

19. What Is Typography? Design or selection of letter forms to be organized into words and sentences and printed or displayed electronically

20. What is Good Typography? Stresses legibility and communication Draws attention to itself, then relinquishes the attention it has drawn Gives letters a “living energy” More than just picking out fonts

21. Web design is 95% typography. Source: http://informationarchitects.jp/the-web-is-all-about-typography-period/

28. What is Good Web Typography? Optimize readability, accessibility, usability, and overall graphic balance Succeed despite limited font choices and poor screen resolution Treats the text as a user interface, not a canvas

29. HistoryVocabularyContrastTechnologyTips

30. crossbar stroke stem

31. arms bowl counter leg tail

32. point The smallest of the typographical measuring units. 1 point equals 1/72 inch. There are 12 points in a Pica. em Square unit of measurement equal to the point size of the current font. en One half of an em.

33. font A complete character set of a single size of a particular typeface (ex: Arial 10pt). type·face One or more fonts designed with stylistic unity (ex: Arial).

34. kerning

35. tracking letter-spacing {}

36. baseline

37. descender

38. x-height

39. cap-line cap-height

40. ascender

41. serif

42. serif sans-serif

43. modern blackletter monospaced slab-serif dingbats script

44. measure

45. leading line-height {}

46. flush left, ragged right text-align { left; } center-justified text-align { center; } flush right, ragged left text-align { right; }

47. flush left, flush right text-align { justify; } force justified

48. widow rag orphan

49. HistoryVocabularyContrastTechnologyTips

50. Size

53. WEight

56. Structure

60. Form

61. A Contrast In Form a contrast in form A CONTRAST IN FORM

63. Color

66. Direction

70. Texture

74. Concord Removal of contrast to give elements a uniform impression Type blocks are designed to achieve an equal level of lightness and darkness

76. Visual Hierarchy Divide up the screen and tell users what is most important Create typographic “anchors” to move the users eye across and down the screen

77. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

78. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

79. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

80. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

81. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

82. Athletes confused by Olympic social media rules By Mark McClusky,Wired February 5, 2010 4:57 p.m. EST American skier Lindsey Vonn, one of the potential stars of the 2010 Winter Olympics, told her nearly 35,000 Twitter followers that she would not be posting to the social network until after the Games were over, perhaps based on a faulty understanding of the International Olympic Committee's rules on blogging and social networking. Read more

84. HistoryVocabularyContrastTechnologyTips

85. Web Safe Fonts Arial Arial Black Comic Sans Courier New Georgia Times New Roman Trebuchet MS Verdana

86. MAC PC

87. The C Fonts Calibri Cambria Candara Consolas Constantia Corbel

88. Font Stacks p { font-family: Arial, Helvetica, sans-serif;} p.serif { font-family: Georgia, "Times New Roman", Times, serif;}

89. Font Stacks p { font-family: Arial, Helvetica, sans-serif; } p.serif { font-family: Georgia, "Times New Roman", Times, serif; } p { font-family: Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif;} p.serif { font-family: Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif;}

90. sIFR Combination of Flash, CSS, and JavaScript Checks if Flash is installed and replaces text Selectable, customizable, degrades gracefully Steep learning curve, cumbersome scripting Makes page load feel “clunky”

91. CUFÓN JavaScript only Uses VML (Vector Markup Language) for Internet Explorer and HTML5 Canvas for advanced browsers Fast loading Violates EULA agreements for some font files, text not selectable, no hover states

92. @Font-Face CSS3 declaration Standards-compliant, fast loading, easy to use Not all fonts designed for screen usage, especially at small sizes Maybe a little too easy to use

93. @font-face @font-face {font-family: Delicious;src: url('Delicious-Roman.otf');} h3 { font-family: Delicious, sans-serif; }

95. HistoryVocabularyContrastTechnologyTips

96. GUidelines Read the text before designing it Get away from “loremipsum” or dummy text as soon as possible Don’t use a font you don’t need Consolidate similar sizes and treatments Don’t stretch or squeeze

97. Legibility & Readability Optimal measure is 45-75 characters Use italic and bold for emphasis but avoid using for large blocks of text Beware of too much or too little contrast with background color All caps fine for titles and headlines, not recommended for sentences or long blocks of type

98. It deosn'tmttaer in wahtoredr the ltteers in a wrod are, olnytaht the frist and lsatltteres are at the rghitpcleas. Tihs is bcuseae we do not raederveylteter by ilstef, but the wrod as a wlohe.

99. A smidgen of type A SMIDGEN OF TYPE

101. Questions? Bill C. EnglishLead Designer, Tuitive@billcenglish