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.

Transcript

1. Advanced Typesetting for the Web Marko Dugonjić Paris Web 2012.
2. @markodugonjic
3. Creative Nights
5. Jared M. Spool “Designers should know how to code” ≠ “Designers need to be expert coders.”
8. READING EXPERIENCE
9. Oliver Reichenstein Good typography does not look nice to please type nerds. Primarily, well set type reads well.
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
20. CONTEXT
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.
30. CHOOSING A TYPEFACE
32. Julian Hansen Start out by choosing the kind of project that you’ll need your typeface for.
33. type-together.com
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
43. lucasfonts.com
45. COMBINING TYPEFACES
48. Erik Spiekermann Designers like even grayness, which is the worst thing for a reader.
53. TYPE SIZE
54. 0,26mm 1,3mm 71cm 350cm
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;
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
69. 100 abc 70 abc
71. Factual information bits Quick reading TIGHTEN Novels, reading for pleasure Slow reading LOOSEN
76. HEADLINES
77. WATCH HERE, CANDIES! WATCH HERE, CANDIES!
78. WATCH WATCH
80. TOO TIGHT
81. TOO TIGHT
82. TOO TIGHT
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
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 */ }
99. ACTION ITEMS
100. explorationsintypography.com thinkingwithtype.com fontfeed.com typetester.org
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/