Web Typography: State of the Art

Presented at WriteTheDocs Europe, 31st Mar 2014.
Presented at Djangocon EU, 14th May 2014

Transcript

1. typography and the web the state of the art #writethedocs eu 2014
2. Idan Gazit Hello there! I’m @idangazit Please, Sit back. Relax. Enjoy yourself! ! All of the slides will be online.
3. core designer for visualizing data at a lovely web framework the popular platform-as-a-service
4. commons.wikimedia.org/wiki/File:Lateral_head_angiogram.jpg
6. Daniel Kahneman The general principle is that anything you can do to reduce cognitive strain will help you [be persuasive], so you should first maximize legibility.
7. typography SET A typefaces SET
8. Presenting Textual Information The Art & Science of
9. vs typeface kerning macro micro measure (aka “width”) leading (aka “spacing”) flow of type on page elupton.com/2009/10/science-of-typography/
10. 2 2 3
11. 2 2 3
12. 2 2 3
13. 2 2 3
14. http://retinart.net/graphic-design/secret-law-of-page-harmony/
16. LIKE, NEW INFORMATION HAS COME TO LIGHT, MAN
17. control
18. none nil nada zero zip zilch nothing naught no no control
19. @idangazit HI THERE, I’M flic.kr/p/6iLEF
20. @idangazit HI THERE, I’M flic.kr/p/89Utsr
21. typography and the web the state of the art #writethedocs eu 2014
22. print web March of Progress IN WEB TYPOGRAPHY THE
23. Sometimes hard to use. Pays dividends.
24. Sizing Type
25. ? ABSOLUTE ? RELATIVE
26. 16px ABSOLUTE 1em or 100% RELATIVE
28. 16px ABSOLUTE 1em or 100% RELATIVE =
29. The quick brown fox jumps over a lazy dog. The quick brown fox jumps over a lazy dog. TIMES GEORGIA M “1 EM”
30. <html> ∅ defaults to 1em <body> 1.2em <header> 3em <h1> 1.5em 5.4em (1 × 1.2 × 3 × 1.5) or 86.4px (5.4em × 16px/1em) =
31. That wasn’t too bad RIGHT?
32. pop quiz! OK, DOCUMENTARIANS
33. <html> body { font-size: 1em; } <body> <header> <h1> <article> <h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }
34. <html> body { font-size: 1em; } <body> <header> <h1> <article> <h1> header { font-size: 1.5em; } article { font-size: 1em; } ? ? h1 { font-size: 2em; }
35. <html> body { font-size: 1em; } <body> <header> <h1> <article <h1 header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em ? h1 { font-size: 2em; }
36. <html> body { font-size: 1em; } <body> <header <h1 <article> <h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }
37. <html> body { font-size: 1em; } <body> <header> <h1> <article> <h1> header { font-size: 1.5em; } article { font-size: 1em; } 1em × 1.5em × 2em = 3em 1em × 1em × 2em = 2em h1 { font-size: 2em; }
38. Root Ems “REMS” (to the rescue!)
39. EMS 1em 1em <html> 2em 2em <body> 1.5em 1.5em <header> 1.5em 1.5rem <h1> REMS
40. REMS 9+ github.com/chuckcarpenter/REM-unit-polyfill
41. Sometimes you want the cascade. Sometimes you don’t.
42. typography SET A typefaces SET
43. typography SET A typefaces SET
44. Foo <span class=“amp”>&amp;</span> Bar .amp { font-family: SomeFancyFont, sans; } Bar Foo&
45. font-family: Helvetica, Arial, sans-serif; La la la A’BC םולש abc123 ⊗≄∭∑ὐ <p> </p>
46. DATABASE a of FONTS
47. @font-face { family-name src unicode-range font-variant font-feature-settings font-stretch font-weight font-style } ! “FooBar” local(…), url(…) U+41-5A, U+C0-FF ! ! same as font-* rules ! !
48. @font-face { font-family: Alef; src: url(AlefNormal.woff); font-weight: normal; unicode-range: U+590-5FF; /* Hebrew! */ } ! /* Use Alef font only for Hebrew */ p { font-face: Alef, Times, serif;} Unicode ranges
49. @font-face { font-family: MathFont; src: url(MathFont.woff); font-weight: normal; unicode-range: U+1D6B0-1D71B; /* math */ } ! /* Consistent math symbols */ p { font-face: MathFont, Times, serif;} Unicode ranges
50. COOL, HUH?
51. CAREFUL.
52. @font-face { font-family: FooBar; src: url(FooBarNormal.woff); font-weight: normal; } ! p { font-face: FooBar; font-weight: bold } Faux-Bold alistapart.com/article/say-no-to-faux-bold Faux-Italic
53. FOUT the dreaded Flash Of Unstyled Text
55. FOUT the dreaded Flash Of Unstyled Text
56. FOUT the dreaded Flash Of Unstyled Text FONT the somewhat-better Flash Of No Text
57. <img src=“myimg.jpg” width=400 height=300>
58. 2s FOUT 2s FONT
59. 3s FONT, 1s FOUT 4s FONT Soon (~v35ish) Now (v33) >3 seconds
60. Adobe Blank blogs.adobe.com/typblography/2013/03/introducing-adobe-blank.html font-family: “My Custom Font”, “Adobe Blank”, sans-serif;
61. IE9 Data-URI fettblog.eu/blog/2012/11/16/preventing-fout-on-ie9/ @font-face { font-family: somefont; src: url(“data:application/x-font-woff;base64,AS8796ADS…”) }
62. Cache aggressively Don’t make users download the font more than once
63. CSS3 Font Loading http://dev.w3.org/csswg/css-font-loading/
64. flic.kr/p/auuCWk
65. Type Rendering
66. RASTERIZERS
67. OSX WINDOWS GDI WIN DIRECTWRITE CLEARTYPE GRAYSCALE
68. FONT OUTLINES POSTSCRIPT, TRUETYPE
69. POSTSCRIPT TRUETYPE IE 6-8 IE 6-8 on Windows XP IE 9+ FIREFOX CHROME OPERA nope. nope. DirectWrite DirectWrite GDI Grayscale GDI Grayscale GDI Grayscale GDI ClearType DirectWrite DirectWrite GDI ClearType GDI ClearType HTTP://WWW.SMASHINGMAGAZINE.COM/2012/04/24/A-CLOSER-LOOK-AT-FONT-RENDERING/
70. TEST YOUR INTENDED TYPEFACES. TEST THEM EVERYWHERE TO BE SAFE.
71. ENOUGH OF THIS DOOM AND GLOOM. TELL ME ABOUT MORE AWESOME STUFF.
72. Ligatures Ligat
73. Ligatures Ligat
74. The Four Numerals
75. in 1956 I bought… in 1956 I bought… OLDSTYLE LINING FIGURES
76. PROPORTIONAL TABULAR $131.96 $589.22 $131.96 $589.22 FIGURES
77. .ligatures { font-feature-settings: “liga”; } ! .lining-numerals { font-feature-settings: “lnum”; } ! .tabular-numerals { font-feature-settings: “tnum”; } Feature tag-value
78. font-feature-settings 10+ docs.webplatform.org/wiki/css/properties/font-feature-settings
79. whew. NOW YOU KNOW KUNG FU
80. IS OUR FUTURE BETTER?
81. CANIUSE.COM CAN I USE … ?
82. GO MAKE STUFF. BETTER.
83. @IDANGAZIT Don’t be shy. Thank you!