Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
Web Typography Fundamentals<br />From Gutenberg to Google<br />
Hi There.<br />Bill C. EnglishLead Designer, Tuitive@billcenglish<br />
HistoryVocabularyContrastTechnologyTips<br />
What Is Typography?<br />Design or selection of letter forms to be organized into words and sentences and printed or displ...
What is Good Typography?<br />Stresses legibility and communication<br />Draws attention to itself, then relinquishes the ...
Web design is 95% typography.<br />Source: http://informationarchitects.jp/the-web-is-all-about-typography-period/<br />
What is Good Web Typography?<br />Optimize readability, accessibility, usability, and overall graphic balance<br />Succeed...
HistoryVocabularyContrastTechnologyTips<br />
crossbar<br />stroke<br />stem<br />
arms<br />bowl<br />counter<br />leg<br />tail<br />
point<br />The smallest of the typographical measuring units. 1 point equals 1/72 inch. There are 12 points in a Pica. <br...
font<br />A complete character set of a single size of a particular typeface (ex: Arial 10pt).<br />type·face<br />One or ...
kerning<br />
tracking<br />letter-spacing {}<br />
baseline<br />
descender<br />
x-height<br />
cap-line<br />cap-height<br />
ascender<br />
serif<br />
serif<br />sans-serif<br />
modern<br />blackletter<br />monospaced<br />slab-serif<br />dingbats<br />script<br />
measure<br />
leading<br />line-height {}<br />
flush left, ragged right<br />text-align { left; }<br />center-justified<br />text-align { center; }<br />flush right, rag...
flush left, flush right<br />text-align { justify; }<br />force justified<br />
widow<br />rag<br />orphan<br />
HistoryVocabularyContrastTechnologyTips<br />
Size<br />
WEight<br />
Structure<br />
Form<br />
A Contrast In Form<br />a contrast in form<br />A CONTRAST IN FORM<br />
Color<br />
Direction<br />
Texture<br />
Concord<br />Removal of contrast to give elements a uniform impression<br />Type blocks are designed to achieve an equal l...
Visual Hierarchy<br />Divide up the screen and tell users what is most important<br />Create typographic “anchors” to move...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />Ameri...
HistoryVocabularyContrastTechnologyTips<br />
Web Safe Fonts<br />Arial<br />Arial Black<br />Comic Sans<br />Courier New<br />Georgia<br />Times New Roman<br />Trebuch...
MAC<br />PC<br />
The C Fonts<br />Calibri<br />Cambria<br />Candara<br />Consolas<br />Constantia<br />Corbel<br />
Font Stacks<br />p { font-family: Arial, Helvetica, sans-serif;}<br />p.serif { font-family: Georgia, "Times New Roman", T...
Font Stacks<br />p { font-family: Arial, Helvetica, sans-serif; }<br />p.serif { font-family: Georgia, "Times New Roman", ...
sIFR<br />Combination of Flash, CSS, and JavaScript<br />Checks if Flash is installed and replaces text<br />Selectable, c...
CUFÓN<br />JavaScript only<br />Uses VML (Vector Markup Language) for Internet Explorer and HTML5 Canvas for advanced brow...
@Font-Face<br />CSS3 declaration<br />Standards-compliant, fast loading, easy to use<br />Not all fonts designed for scree...
@font-face<br />@font-face {font-family: Delicious;src: url('Delicious-Roman.otf');}<br />h3 { font-family: Delicious, san...
HistoryVocabularyContrastTechnologyTips<br />
GUidelines<br />Read the text before designing it<br />Get away from “loremipsum” or dummy text as soon as possible<br />D...
Legibility & Readability<br />Optimal measure is 45-75 characters<br />Use italic and bold for emphasis but avoid using fo...
It deosn'tmttaer in wahtoredr the ltteers in a wrod are, olnytaht the frist and lsatltteres are at the rghitpcleas. Tihs i...
A smidgen of type<br />A SMIDGEN OF TYPE<br />
Questions?<br />Bill C. EnglishLead Designer, Tuitive@billcenglish<br />
Nächste SlideShare
Wird geladen in …5
×

Web Typography Fundamentals: From Gutenberg to Google v1

5.346 Aufrufe

Veröffentlicht am

Veröffentlicht in: Design
  • Loggen Sie sich ein, um Kommentare anzuzeigen.

Web Typography Fundamentals: From Gutenberg to Google v1

  1. 1. Web Typography Fundamentals<br />From Gutenberg to Google<br />
  2. 2. Hi There.<br />Bill C. EnglishLead Designer, Tuitive@billcenglish<br />
  3. 3.
  4. 4.
  5. 5.
  6. 6.
  7. 7.
  8. 8. HistoryVocabularyContrastTechnologyTips<br />
  9. 9.
  10. 10.
  11. 11.
  12. 12.
  13. 13.
  14. 14.
  15. 15.
  16. 16.
  17. 17.
  18. 18.
  19. 19. What Is Typography?<br />Design or selection of letter forms to be organized into words and sentences and printed or displayed electronically<br />
  20. 20. What is Good Typography?<br />Stresses legibility and communication<br />Draws attention to itself, then relinquishes the attention it has drawn<br />Gives letters a “living energy”<br />More than just picking out fonts<br />
  21. 21. Web design is 95% typography.<br />Source: http://informationarchitects.jp/the-web-is-all-about-typography-period/<br />
  22. 22.
  23. 23.
  24. 24.
  25. 25.
  26. 26.
  27. 27.
  28. 28. What is Good Web Typography?<br />Optimize readability, accessibility, usability, and overall graphic balance<br />Succeed despite limited font choices and poor screen resolution<br />Treats the text as a user interface, not a canvas<br />
  29. 29. HistoryVocabularyContrastTechnologyTips<br />
  30. 30. crossbar<br />stroke<br />stem<br />
  31. 31. arms<br />bowl<br />counter<br />leg<br />tail<br />
  32. 32. point<br />The smallest of the typographical measuring units. 1 point equals 1/72 inch. There are 12 points in a Pica. <br />em<br />Square unit of measurement equal to the point size of the current font.<br />en<br />One half of an em.<br />
  33. 33. font<br />A complete character set of a single size of a particular typeface (ex: Arial 10pt).<br />type·face<br />One or more fonts designed with stylistic unity (ex: Arial).<br />
  34. 34. kerning<br />
  35. 35. tracking<br />letter-spacing {}<br />
  36. 36. baseline<br />
  37. 37. descender<br />
  38. 38. x-height<br />
  39. 39. cap-line<br />cap-height<br />
  40. 40. ascender<br />
  41. 41. serif<br />
  42. 42. serif<br />sans-serif<br />
  43. 43. modern<br />blackletter<br />monospaced<br />slab-serif<br />dingbats<br />script<br />
  44. 44. measure<br />
  45. 45. leading<br />line-height {}<br />
  46. 46. flush left, ragged right<br />text-align { left; }<br />center-justified<br />text-align { center; }<br />flush right, ragged left<br />text-align { right; }<br />
  47. 47. flush left, flush right<br />text-align { justify; }<br />force justified<br />
  48. 48. widow<br />rag<br />orphan<br />
  49. 49. HistoryVocabularyContrastTechnologyTips<br />
  50. 50. Size<br />
  51. 51.
  52. 52.
  53. 53. WEight<br />
  54. 54.
  55. 55.
  56. 56. Structure<br />
  57. 57.
  58. 58.
  59. 59.
  60. 60. Form<br />
  61. 61. A Contrast In Form<br />a contrast in form<br />A CONTRAST IN FORM<br />
  62. 62.
  63. 63. Color<br />
  64. 64.
  65. 65.
  66. 66. Direction<br />
  67. 67.
  68. 68.
  69. 69.
  70. 70. Texture<br />
  71. 71.
  72. 72.
  73. 73.
  74. 74. Concord<br />Removal of contrast to give elements a uniform impression<br />Type blocks are designed to achieve an equal level of lightness and darkness<br />
  75. 75.
  76. 76. Visual Hierarchy<br />Divide up the screen and tell users what is most important<br />Create typographic “anchors” to move the users eye across and down the screen<br />
  77. 77. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  78. 78. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  79. 79. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  80. 80. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  81. 81. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  82. 82. Athletes confused by Olympic social media rules<br />By Mark McClusky,Wired<br />February 5, 2010 4:57 p.m. EST<br />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<br />
  83. 83.
  84. 84. HistoryVocabularyContrastTechnologyTips<br />
  85. 85. Web Safe Fonts<br />Arial<br />Arial Black<br />Comic Sans<br />Courier New<br />Georgia<br />Times New Roman<br />Trebuchet MS<br />Verdana<br />
  86. 86. MAC<br />PC<br />
  87. 87. The C Fonts<br />Calibri<br />Cambria<br />Candara<br />Consolas<br />Constantia<br />Corbel<br />
  88. 88. Font Stacks<br />p { font-family: Arial, Helvetica, sans-serif;}<br />p.serif { font-family: Georgia, "Times New Roman", Times, serif;}<br />
  89. 89. Font Stacks<br />p { font-family: Arial, Helvetica, sans-serif; }<br />p.serif { font-family: Georgia, "Times New Roman", Times, serif; }<br />p { font-family: Geneva, “Lucida Sans”, “Lucida Grande”, “Lucida Sans Unicode”, Verdana, sans-serif;}<br />p.serif { font-family: Palatino, “Palatino Linotype”, Georgia, Times, “Times New Roman”, serif;}<br />
  90. 90. sIFR<br />Combination of Flash, CSS, and JavaScript<br />Checks if Flash is installed and replaces text<br />Selectable, customizable, degrades gracefully<br />Steep learning curve, cumbersome scripting<br />Makes page load feel “clunky”<br />
  91. 91. CUFÓN<br />JavaScript only<br />Uses VML (Vector Markup Language) for Internet Explorer and HTML5 Canvas for advanced browsers<br />Fast loading<br />Violates EULA agreements for some font files, text not selectable, no hover states<br />
  92. 92. @Font-Face<br />CSS3 declaration<br />Standards-compliant, fast loading, easy to use<br />Not all fonts designed for screen usage, especially at small sizes<br />Maybe a little too easy to use<br />
  93. 93. @font-face<br />@font-face {font-family: Delicious;src: url('Delicious-Roman.otf');}<br />h3 { font-family: Delicious, sans-serif; }<br />
  94. 94.
  95. 95. HistoryVocabularyContrastTechnologyTips<br />
  96. 96. GUidelines<br />Read the text before designing it<br />Get away from “loremipsum” or dummy text as soon as possible<br />Don’t use a font you don’t need<br />Consolidate similar sizes and treatments<br />Don’t stretch or squeeze<br />
  97. 97. Legibility & Readability<br />Optimal measure is 45-75 characters<br />Use italic and bold for emphasis but avoid using for large blocks of text<br />Beware of too much or too little contrast with background color<br />All caps fine for titles and headlines, not recommended for sentences or long blocks of type<br />
  98. 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.<br />
  99. 99. A smidgen of type<br />A SMIDGEN OF TYPE<br />
  100. 100.
  101. 101. Questions?<br />Bill C. EnglishLead Designer, Tuitive@billcenglish<br />

×