O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

Web Typography, A Long Dark

Typography, all of it.

  • Entre para ver os comentários

Web Typography, A Long Dark

  1. Web Typography A Long Dark Rant
  2. 95% of the information on the web is written language http://ia.net/blog/the-web-is-all-about-typography-period/
  3. Typography is the visual expression of language
  4. We are all typographers Yes, you, internet people
  5. Ryan LaBouve UX • Designer • Typographer me @RyanLaBouve
  6. @RyanLaBouve
  7. HolyArchers @RyanLaBouve
  8. Soon to be Dad @RyanLaBouve
  9. @RyanLaBouve
  10. Why I’m personally interested in typography Tim Brown’s More Perfect Typography After watching this I knew I was supposed to be a designer. http://vimeo.com/17079380
  11. 3 Goals Today • Show the impact of typography • Show where typography is from and where its’ going • Give you practical ways to practice (on as many platforms as possible)
  12. Obstacles • Type is hard • There are no rules • There are a lot of variables
  13. Worth It • Happier Users • Represents Content Better • Works on more platforms
  14. All typographic knowledge Knowledge you need for proficiency What you need to know to be good Good News
  15. Our Project http://publicdomainreview.org/collections/george-withers-emblem-book-1635/ Before After
  16. History
  17. Where do letters come from?
  18. The history of typography reflects a continual tension between hand and machine. Organic and the geometric, the human body and the abstract system. These tensions, which marked the birth of printed letters over five hundred years ago, continue to energize typography today. —Ellen Lupton in Thinking With Type “ ”
  19. Modern Writing Systems Arabic (Abjad) Hangul (Syllabic) Latin (Alphabetic) French Spanish Italian English Dutch German Irish Welsh Czech Polish Chinese (Logographic)
  20. Ancient Egyptian Abbreviated History of Our Alphabet Phoenician Greek (logographic with alphabetic elements) 4000 BC Latin 1200 BC 800 BC 700 BC (Essentially the “latin” or “roman” alphabet)
  21. Early Latin Writing Uncial (400)Roman Capitals (Trajan)
  22. Blackletter (12th-15th)Carolingian (9th)
  23. Invention of Movable Type
  24. Evolution of Type
  25. Gutenberg’s Textura (1450) Garamond (1530) Old StyleTextura http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  26. Transitional Caslon (1720) Bodoni (1798) Modern http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  27. Humanist Sans Gill Sans (1926) Egyptian/Slab Serif 1815 http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  28. Geometric Sans FuturaHelvetica Transitional Sans-serif http://newwebtypography.com/blog/2014/02/towards-a-more-perfect-webfont-type-classification/
  29. Digital Type
  30. Bitmap Fonts Word Processing
  31. Now Everyone’s a Typography Bleeding Cowboy Lobster Payparus
  32. Digital fonts, human origins
  33. Demo https://github.com/ryanlabouve/type-talk-demo
  34. Content + Reset
  35. Add Markup
  36. Organize
  37. Define Containers
  38. Choosing Typeface
  39. Choosing Typeface
  40. Choosing Typeface
  41. Typographic Scale
  42. Proofread, Edit, Augment
  43. Typographic Hierarchy
  44. Before/After
  45. Mechanics
  46. Quick Technical Disclaimer
  47. Examples assume level of html/css knowledge #webTypography
  48. Additional Resources Pixels vs EM vs REM (and vh, vw) Mapping Typography to CSS (don’t fear web typography) HTML/CSS Typography Primer http://j.eremy.net/confused-about-rem-and-em/ http://adamschwartz.co/magic-of-css/chapters/5-typography/ http://www.dontfeartheinternet.com/css/don%E2%80%99t-fear-web- typography http://css-tricks.com/viewport-sized-typography/
  49. Including web fonts http://css-tricks.com/snippets/css/using-font-face/ Self Hosting Generating Fonts for the Web http://www.fontsquirrel.com/tools/webfont-generator Using a Service https://developers.google.com/fonts/docs/getting_started
  50. font-family font-weight font-font size letter-spacing max-width line-height Which Font How Bold/Light Font Size Letter Spacing Measure Leading CSS IRL
  51. Anatomy of a Typeface
  52. • X-height • Stroke contrast • Reading Test ! Legibility
  53. Choosing a Typeface • Appropriate for Context • Font Quality • Legibility • Affordable?
  54. Display vs Body Poster vs Reading OR Appropriate for Context
  55. Appropriate for Context
  56. via Typekit.com Appropriate for Context
  57. What kind of party? Appropriate for Context
  58. Appropriate for Context ________ Party
  59. Appropriate for Context Cocktail Party
  60. ________ Party Appropriate for Context
  61. Slumber Party Appropriate for Context
  62. Appropriate for Context ___ Party
  63. Appropriate for Context LAN Party
  64. Appropriate for Context ___ Party
  65. Appropriate for Context D&D Party
  66. Slumber Party Appropriate for Context LAN Party D&D Party Cocktail Party
  67. Set some type; in context Read it. Like it? Appropriate for Context
  68. Good Inspiration What do other designers use? Quality
  69. Font In Use http://fontsinuse.com/
  70. Typespiration http://typespiration.com/
  71. Superfamilies Typefaces with large families Quality
  72. weights & Styles Weight & Styles
  73. Character Support Do you need something that supports other languages? Quality
  74. https://www.google.com/fonts/specimen/PT+Sans PT Sans, Characters
  75. Affordable? Purchasing/Procuring Fonts
  76. Free Web Fonts
  77. http://losttype.com/ theleagueofmoveabletype.com
  78. Not Free Web Fonts but awesome ^
  79. Foundries Buy from individuals. Possibly host yourself
  80. Services Aggregate Fonts Usually Host for You
  81. For this Demo Free Legible Book Club Party
  82. https://www.google.com/fonts
  83. Narrowed it down
  84. Paragraphs
  85. Typesetting Tricks
  86. 1. Leading 2. Measure 3. Kerning 4. Tracking 5. Word Spacing 6. Hyphenation
  87. Leading The Space between Lines CSS: line-height 120%-140% of font size 1
  88. MeasureLength of Lines of Text CSS: max-width 45-80 Character 2
  89. K erning Spaces between letters http://xkcd.com/1015/ http://letteringjs.com/ http://www.kernjs.com/ http://kerningjs.com/ 3
  90. T r a c k i n g even spacing between every character CSS: letter-spacing4
  91. Word Spacing Avoid messing with wordspacing CSS: word-spacing5
  92. Hyphenation & Justification Lacking on the web 6
  93. Tempo The sum of leading, measure, kerning, tracking, word-spacing, and H&J Narrow, Faster Tempo Wide, Slower Tempo
  94. Nothing Done
  95. Measure
  96. Leading, Letter spacing, Tracking…
  97. Hierarchy
  98. Hierarchy is simply creating CONTRAST
  99. Contrast Use size, color, and space to differentiate content
  100. Typographic Scale Like a music scale. Creates harmony.
  101. Organization Group similar content. Make more important content more prominent
  102. Edit Correct grammar & remove unnecessary content practicaltypography.com Additional Resources smartquotesforsmartpeople.com
  103. Strategies
  104. Media Queries + Relative Unites Responsive Typography 101
  105. Why does our demo currently fail?
  106. Phones.
  107. Solution
  108. PX -> (R)EM Use relative units
  109. /* Target / Context = Result */
  110. Change font-size on body(%), rest of document resizes mmmmmm…. relative units
  111. Use media queries to establish breakpoints and make adjustments
  112. Adjust via breakpoints
  113. font-size: 100% >1100px
  114. 90% <1100px (Moved Aside to Bottom) <840px
  115. 90% Before Now <590
  116. Target Specific Problems
  117. Headlines are Still too Big Fix with Media Queries
  118. Before Now
  119. All kinds of things Future of WebType
  120. http://fittextjs.com/http://letteringjs.com/ Javascript Steps In
  121. Molten Leading http://nicewebtype.com/notes/2012/02/03/molten-leading-or-fluid-line- height/
  122. Face Detection http://webdesign.maratz.com/lab/responsivetypography/realtime/
  123. Dynamic Resizing
  124. http://modularscale.com/scale/?px1=25&px2=1024&ra1=1.25&ra2=0 Abril Text+Titling The End