Web Typography Fundamentals: From Gutenberg to Google v1

4,031 views

Published on

Published in: Design
0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
4,031
On SlideShare
0
From Embeds
0
Number of Embeds
167
Actions
Shares
0
Downloads
85
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide
  • Introduction to how to look at understand and usePart of world around usMake aware of how designers use and see type
  • kid looked at handwritingcomics
  • artist has touched everything storynot just books & magazines
  • every foodhousehold productnot just communication but art direction & branding
  • lets you know where you are goingbillboardsstreet signstraffic signsbuilding signage
  • lets you know where you are at
  • exquisite timelessbecomes part of the culture
  • first known “handwriting” cuneiformSumerian tablet 3000 BC Mesopotamia – modern iraqledger sheet
  • phaistos disk2ndmillenium BC, island of cretemade by pressing hieroglyphic seals into soft clayfirst instance of “movable type”, but invention didn’t take off
  • Egyptian book of the dead 1500 – 1000 BC
  • Qin dynasty edict on bronze200 BC
  • France, Bible, 13th c
  • A&EGrew up goldsmithingMainz, Germany ~ 1450L-shaped adjustable
  • oil-based ink to stick to metal typesbased on press used for cloth and grapes
  • moveabletypebackwards
  • Gutenberg bible1455 finished180 copiescolor parts added by hand42 lines
  • oxford library – 140 copieshigher education, science, religion, renaissancetypography is born
  • early purpose of type was copyingillusion of superhuman speed, stamina, and precision to human handInterprets content like a musician interprets a score
  • One of the last crafts to be mechanized, one of the first crafts to be computerized95% of the information on the web is written language, so designer should learn how to shape written informationTYPE as UI: Icons with names, form fields with examples, buttons with labels, step by step instructions in a process, a clear explanation of your refund policy. These are all interface design.
  • craigslistexample of text asuidon’t read every line of type
  • structure in place but unusable
  • news site
  • pictures & icons but no contextad but what is it for?
  • application
  • tabs but no contextform but what does it do?
  • BRINGHURST BOOK
  • make aware of typography on the atomic levelcharacter of blocks of copy made from elements of individual letterstrue mastery of typography begins at the lettercan use letter as a primary design element
  • anthropomorphicfigure/ground relationship is importantnegative space (helvetica)
  • units of measurementem originally width of capital M
  • space between letterskerning tablescornerlsj logo
  • affects overall texture resolve widows and orphansstill negative space
  • line easy to followimportant for legibility
  • effects legibility at body copy sizeseffects leadingx because of 4 slabs
  • modern = class. of serif. stroke variation, horizontal serifsblackletter = 12th centuryeurope (gothic, old english)
  • # of characters in a line of texton web defined by width of boxes
  • Understand our surrounding through contrastReading is possible because of contrast (ink on paper) : reduce contrast reduce legibilityLike notes of a musical scale (chords)Drawing metaphor (light and dark)DAIR BOOK
  • scarcely a job where a large letter or word cannot be used to striking effectOnly effective when used with discretion. can’t use if too much is large
  • go big
  • Thickness of lines that compose lettersNo middle ground in the contrast of weight
  • All the same widthvs varying widths
  • Italicvs roman vs capital
  • Colors are either cold, warm, or neutralIf using a small bit of red, contrast with a large bit of cold color
  • all black with touch of redretro feelnewspaper headlines in red
  • off color for emphasisleads eye through page
  • Eyes used to orienting on a horizontal horizonSense of balance is disturbed by slanted lines90 degree intersection of slanted units creates relationship
  • slanted title leads eye downverticalnav interesting
  • Structure of a letter determines its texture, weight determines its coarsenessThink in terms of hard and soft (slick and rough)Can alter with letter-spacing and line spacing
  • interpretative dance with typeall same font (no structure)look at direction, color, weight
  • lack of contrastblending of elements to give a uniform impressiontonal value
  • Use contrast to divide up the screen and tell the users where they should be lookingUse contrast to create typographic anchors to move the users eye across and down the screen (vertical rhythm)
  • structure, weight
  • form, size, color
  • size
  • color
  • 3 are rarely used because they are illegible at smaller sizes
  • Georgia vs Times
  • Typekit
  • Legibility = distinguishing one letter from anotherReadability = comprehending large blocks of text
  • 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 />

    ×