Your SlideShare is downloading. ×
0
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Web Typography, A Long Dark
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Web Typography, A Long Dark

9,830

Published on

Typography, all of it.

Typography, all of it.

Published in: Design
1 Comment
226 Likes
Statistics
Notes
No Downloads
Views
Total Views
9,830
On Slideshare
0
From Embeds
0
Number of Embeds
29
Actions
Shares
0
Downloads
456
Comments
1
Likes
226
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 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

×