Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Advanced Typesetting for the Web @ ParisWeb 2012.

10a4285792e47c507ab4782b6716c0d1?s=47 Marko Dugonjić
October 18, 2012

Advanced Typesetting for the Web @ ParisWeb 2012.

With the rise of web fonts, we are finally able to deliver sophisticated typographic experiences to our users. However, devil is in the details, so let’s investigate how far can we go to tweak for improved legibility covering wide variety of devices.

You will learn how to choose typeface for function over form, about font and pixel size across devices, how to set-up macro and micro white-space and how to design line, leading and word space.

10a4285792e47c507ab4782b6716c0d1?s=128

Marko Dugonjić

October 18, 2012
Tweet

Transcript

  1. Advanced Typesetting for the Web Marko Dugonjić Paris Web 2012.

  2. @markodugonjic

  3. Creative Nights

  4. None
  5. Jared M. Spool “Designers should know how to code” ≠

    “Designers need to be expert coders.”
  6. None
  7. None
  8. READING EXPERIENCE

  9. Oliver Reichenstein Good typography does not look nice to please

    type nerds. Primarily, well set type reads well.
  10. None
  11. CONTENT

  12. 200 wpm

  13. WordPress reading time script http://bit.ly/MvLwOk

  14. Readability index

  15. Kandel & Moles Reading Ease 209 - 1.15(words/sentences) - 0.68(syllables/words)

    ————————————————————————— = reading ease for French
  16. Check readability online http://bit.ly/Nd1jI6

  17. 90.0–100.0 easily understood by an average 11-year-old student 60.0–70.0 easily

    understood by 13- to 15-year-old students 0.0–30.0 best understood by university graduates
  18. Article readability stats with PHP http://bit.ly/SVTFmd

  19. None
  20. CONTEXT

  21. None
  22. None
  23. PEOPLE

  24. return retour zurückkommen

  25. http://dyslexicfonts.com Your brain can sometimes do funny things to letters.

    OpenDyslexic tries to help prevent some of these things from happening. Letters have heavy weighted bottoms to add a kind of "gravity" to each letter, helping to keep your brain from rotating them around in ways that can make them look like other letters. Consistently weighted bottoms can also help reinforce the line of text. The unique shapes of each letter can help prevent flipping and swapping.
  26. None
  27. None
  28. None
  29. None
  30. CHOOSING A TYPEFACE

  31. None
  32. Julian Hansen Start out by choosing the kind of project

    that you’ll need your typeface for.
  33. type-together.com

  34. None
  35. None
  36. None
  37. Vitaly Friedman Elliot Jay Stocks Because there’s a lot going

    on visually on SM — screenshots, buttons and noisy ads — a sans-serif felt like a more sensible, uncluttered route for body copy.
  38. 1Illustration 1Illustration

  39. aegh! iIl1 aegh! iIl1 aegh! iIl1 Gill Sans Myriad Pro

    Adelle Hat tip: Jon Tan
  40. ms-studio.com

  41. Je n'achète pas ici!* *pardon my french

  42. None
  43. lucasfonts.com

  44. None
  45. COMBINING TYPEFACES

  46. None
  47. None
  48. Erik Spiekermann Designers like even grayness, which is the worst

    thing for a reader.
  49. None
  50. None
  51. None
  52. None
  53. TYPE SIZE

  54. 0,26mm 1,3mm 71cm 350cm

  55. None
  56. None
  57. As seen on iA

  58. 16px

  59. WORDS

  60. http://bit.ly/Nabf4X keming. (kěm'-ĭng). n. The result of improper kerning.

  61. text-rendering: optimizeLegibility;

  62. None
  63. Erik Spiekermann The line breaks. Make it 2 lines, range

    left. This doesn’t read as one item, but 3 separate ones. Kerning is overrated.
  64. YELLING IS NECESSARY SOMETIMES

  65. Type DELETE to confirm deletion.

  66. Expertsexchange 028759829819 Experts Exchange 028 759 829 819

  67. TEXT

  68. None
  69. 100 abc 70 abc

  70. None
  71. Factual information bits Quick reading TIGHTEN Novels, reading for pleasure

    Slow reading LOOSEN
  72. None
  73. None
  74. None
  75. None
  76. HEADLINES

  77. WATCH HERE, CANDIES! WATCH HERE, CANDIES!

  78. WATCH WATCH

  79. None
  80. TOO TIGHT

  81. TOO TIGHT

  82. TOO TIGHT

  83. None
  84. None
  85. None
  86. None
  87. None
  88. None
  89. font-size: 7.2em; line-height: 1.1em; letter-spacing: -.02em; word-spacing: .15em; text-rendering: optimizeLegibility;

  90. MAKE IT RESPONSIVE

  91. VIEWPORT-PERCENTAGE LENGHT vw, vh, vmin, vmax The viewport-percentage lengths are

    relative to the size of the initial containing block. When the height or width of the viewport is changed, they are scaled accordingly.
  92. :root { font-size: 2.5vw; /* 2.5% of viewport’s width */

    } h1 { font-size: 2rem; } p { font-size: 1rem; }
  93. Viewport Sized Typography http://bit.ly/MABc8Q

  94. None
  95. None
  96. None
  97. @media (viewport size) and (pixel density) /* and (proximity sensor)

    */ { /* sizing based on the reading distance */ /* dpi adjusted fonts */ /* hierarchy based on the information density */ /* contrast based on the number of typographic elements */ }
  98. None
  99. ACTION ITEMS

  100. explorationsintypography.com thinkingwithtype.com fontfeed.com typetester.org

  101. None
  102. #iseebadkerning

  103. Dan Cederholm Web design is getting f’ing complex. Biggest concern

    is for those just starting to learn.
  104. Merci! Marko Dugonjić @markodugonjic creativenights.com

  105. Credits Jared M. Spool, http://bit.ly/U1FRZl Trent Walton, http://trentwalton.com Elliot Jay

    Stocks, http://elliotjaystocks.com Oliver Reichenstein, http://bit.ly/MBjmUA Jerry Jordan, Phone Call from God, http://bit.ly/Nvla2u Comic Sans, http://bit.ly/XlEFyT Julian Hansen, http://bit.ly/RT3v5y Type Together, http://type-together.com Smashing Book #3, http://bit.ly/U1FzBA Jon Tan, Big Type, Little Type, http://bit.ly/PBcuMt Mark Simonson studio, http://ms-studio.com Lucas fonts, http://lucasfonts.com LEGO X-men, http://bit.ly/QT3rTq Erik Spiekermann, https://vimeo.com/49744848 Jesse Taggert, http://bit.ly/WoUi97 MailChimp, http://mailchimp.com/ Dan Cederholm, http://bit.ly/RRFImA Erik Spiekermann, E.M. Ginger, Stop Stealing Sheeps & Find Out How Type Works Chris Coyer, http://css-tricks.com/examples/ViewportTypography/