Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Helen V. Holmes: Type is your Right

362 views

Published on

Mozilla's View Source 2016 in Berlin

Published in: Design
  • Be the first to comment

Helen V. Holmes: Type is your Right

  1. 1. content
  2. 2. CONTENT
  3. 3. + images type + layout =content +
  4. 4. BEAUTIFUL
  5. 5. WHAT DOESITMEAN TOHAVE BEAUTIFUL WEBTYPE? 1 ❝ ❞
  6. 6. HOW DOI MAKEITALL PERFORMANT? 2 ❝ ❞
  7. 7. What is beautiful web typography?
  8. 8. Written word is hella old
  9. 9. For example, apps tend to have similar navigations. Here, they all have bottom navigations with icons.
  10. 10. For example, apps tend to have similar navigations. Here, they all have bottom navigations with icons.
  11. 11. 1. Typography and what’s legible go hand-in-hand.
  12. 12. 1. Typography and what’s legible go hand-in-hand. 2. Typography is influenced by handwriting.
  13. 13. 1. Typography and what’s legible go hand-in-hand. 2. Typography is influenced by handwriting. 3. Typography is molded by technical revolution.
  14. 14. @seblester
  15. 15. @seblester
  16. 16. @seblester
  17. 17. @seblester
  18. 18. “The first typefaces were directly models on forms of calligraphy. Typefaces, however, are not bodily gestures—they are manufactured images design for infinite repetition.” —Ellen Lupton, Thinking with Type
  19. 19. font-feature-settings: "kern", "liga", "clig", "calt";
  20. 20. http://clagnut.com/sandbox/css3/
  21. 21. FONT BOOK—MAC CHARACTER MAP—WINDOWS GLYPHS PANEL ADOBE INDESIGN
  22. 22.  ❝ whoa ❞
  23. 23. You know about OpenType features You know how to turn them on You have opinions on what you need/want You have a typeface you want to load 1. 2. 3. 4.
  24. 24. loading…
  25. 25. loading…
  26. 26. CONTENT IS KING
  27. 27. “… Readable content trumps custom fonts.” —Chris Manning, The @font-face Dilemma
  28. 28. @import 'https://fonts.googleapis.com/css?family=Roboto';
  29. 29. <link href="https://fonts.googleapis.com/css? family=Roboto" rel="stylesheet">
  30. 30. FOUTFLASH OF UNSTYLED TEXT
  31. 31. FOITFLASH OF INVISIBLE TEXT
  32. 32. FOUT FOIT>
  33. 33. PREVENTING THE FOIT
  34. 34. Helvetica Arial Georgia Verdana San Francisco Tahoma Segoe UI
  35. 35. Calendas Plus
  36. 36. MINIMIZING THE FOUT
  37. 37. —Jason Santa Maria, On Web Typography “The thing I try to avoid most in my designs is not FOUT but a jarring shift in the layout when a webfont finishes loading. This shift is usually due to sizing discrepancies between your layout and system fonts, and your webfont.”
  38. 38. —Tim Brown, @nicewebtype “The style doesn’t matter so much, it’s that it has to flow the same way.”
  39. 39. But wait! We can do more!
  40. 40. But wait! We can do more!
  41. 41. roman / normal italic bold bold italic
  42. 42. FOFTFLASH OF FAUX TEXT
  43. 43. FOFT!FOIT! FOUT!
  44. 44. roman / normal italic bold bold italic STAGE ONE STAGE TWO
  45. 45. Proxima Nova
  46. 46. FOIT
  47. 47. FOIT
  48. 48. INSTEAD OF PERFORMANCE DICTATING DESIGN, HOW CANWEBUILDGREATDESIGNSTHATAREPERFORMANT?
  49. 49. @helenvholmes
  50. 50. ARTICLES —Tim Brown, Caring About OpenType Features —Zach Leatherman, Better @font-face with Font Load Events —Zach Leatherman, A Comprehensive Guide to Font Loading Strategies —Zach Leatherman, Critical Web Fonts —Zach Leatherman,Flash of Faux Text—Still More on Font Loading —Chris Coyier, FOUT, FOIT, FOFT —Chris Manning, The @font-face Dilemma —Kenneth Ormandy, Efficient Web Type Circa 1556 —Ricardo Filipe, Typography — Deep Into OpenType Features —MyFonts, How do I see all the characters in a font? —Matthew Butterwick, Butterick’s Practical Typography —Marcin Wichary, Using System UI Fonts In Web Design: A Quick Practical Guide OPEN SOURCE EMOJIS —Firefox OS, Sabrina Smelko, mozilla/fxemoji TOOLING —OpenType Sandbox, clagnut.com/sandbox/css3/ —Kenneth Ormany’s normalize-opentype.css, kennethormandy/nomalize-opentype.css —Kenneth Ormany’s utility-opentype.css, kennethormandy/utility-opentype —Bram Stein’s FontFaceObserver, fontfaceobserver.com/ —Zach Leatherman’s FontFaceOnload polyfill, zachleat/fontfaceonload TYPE COLOPHON —Adobe Text Pro, Adobe —Arial, Monotype Imaging —Avenir, Mergenthaler Linotype Company —Calendas Plus, Atipo Foundry —Courier, Monotype —Didot, Hoefler & Co. —Georgia, Microsoft Typography —Germanica, Paul Lloyd —Gotham, Hoefler & Co. —Harriet, OkayType —Helvetica, Haas Type Foundry —Hoefler Text, Hoefler & Co. —Impact, Stephenson Blake —Knockout, Hoefler & Co. —League Spartan, The League of Moveable Type —Majesti Banner, Lost Type Co-Op —Mrs. Eaves, Emigré —Proxima Nova, Mark Simonson Studio —Neue Haas Unica, Monotype —San Francisco, Apple —Verdana, Microsoft Typography —Whitney, Hoefler & Co.
  51. 51. ARTICLES —Tim Brown, Caring About OpenType Features —Zach Leatherman, Better @font-face with Font Load Events —Zach Leatherman, A Comprehensive Guide to Font Loading Strategies —Zach Leatherman, Critical Web Fonts —Zach Leatherman,Flash of Faux Text—Still More on Font Loading —Chris Coyier, FOUT, FOIT, FOFT —Chris Manning, The @font-face Dilemma —Kenneth Ormandy, Efficient Web Type Circa 1556 —Ricardo Filipe, Typography — Deep Into OpenType Features —MyFonts, How do I see all the characters in a font? —Matthew Butterwick, Butterick’s Practical Typography —Marcin Wichary, Using System UI Fonts In Web Design: A Quick Practical Guide OPEN SOURCE EMOJIS —Firefox OS, Sabrina Smelko, mozilla/fxemoji TOOLING —OpenType Sandbox, clagnut.com/sandbox/css3/ —Kenneth Ormany’s normalize-opentype.css, kennethormandy/nomalize-opentype.css —Kenneth Ormany’s utility-opentype.css, kennethormandy/utility-opentype —Bram Stein’s FontFaceObserver, fontfaceobserver.com/ —Zach Leatherman’s FontFaceOnload polyfill, zachleat/fontfaceonload TYPE COLOPHON —Adobe Text Pro, Adobe —Arial, Monotype Imaging —Avenir, Mergenthaler Linotype Company —Calendas Plus, Atipo Foundry —Courier, Monotype —Didot, Hoefler & Co. —Georgia, Microsoft Typography —Germanica, Paul Lloyd —Gotham, Hoefler & Co. —Harriet, OkayType —Helvetica, Haas Type Foundry —Hoefler Text, Hoefler & Co. —Impact, Stephenson Blake —Knockout, Hoefler & Co. —League Spartan, The League of Moveable Type —Majesti Banner, Lost Type Co-Op —Mrs. Eaves, Emigré —Proxima Nova, Mark Simonson Studio —Neue Haas Unica, Monotype —San Francisco, Apple —Verdana, Microsoft Typography —Whitney, Hoefler & Co.

×