The State of Web Type

In his talk Bram Stein will explore advanced web typography using CSS, HTML, and – if necessary – JavaScript polyfills. He will dive deep into the current state of browser support for kerning, hyphenation, justification, and OpenType features. The talk will provide an overview of new typographic CSS features, how to use them and when to expect them.

Transcript

1. Sta THE STATE OF WEB TYPE BASELINE SERIF X-HEIGHT FF QUIXO @bram_stein #wbfntdy
2. The second half is not as boring as the first. “ ” ― My wife
3. The material was out of date. Even I know this stuff. I didn’t learn anything. “ ” ― Anonymous
4. Web fonts It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. ARIAL It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. TIMES NEW ROMAN
5. Web fonts FF QUIXO It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. FREIGHT SANS
6. @font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: My Font, Arial, Verdana, sans-serif; } Web fonts CSS
7. @font-face { font-family: Helvetica Neue; src: url(comicsans.ttf); } Helvetica Neue CSS Web fonts
8. @font-face { font-family: My Font; src: url(myfont.eot#?ie) format(“embedded-opentype”), url(myfont.woff) format(“woff”), url(myfont.ttf) format(“truetype”), url(myfont.otf) format(“opentype”), url(myfont.svg#myfont) format(“svg”); } CSS Web fonts
9. Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG
10. Formats Woof!
11. Formats Woof! Woof!
12. Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG
13. Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG
14. Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG
15. Formats TTF Ag OTF Ag EOT ?? WOFF ?? WOFF2 ?? SVG
16. Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF
17. Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF + GZIP
18. Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF + GZIP + Zopfli
19. Format IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera TrueType No Yes Yes Yes Yes Yes Yes Yes OpenType No Yes Yes Yes Yes Yes Yes Yes EOT Yes Yes Yes Yes n/a n/a n/a n/a WOFF No Yes Yes Yes Yes Yes Yes Yes WOFF2 No No No No Yes No No Yes Formats
20. Format IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera TrueType No Yes Yes Yes Yes Yes Yes Yes OpenType No Yes Yes Yes Yes Yes Yes Yes EOT Yes Yes Yes Yes n/a n/a n/a n/a WOFF No Yes Yes Yes Yes Yes Yes Yes WOFF2 No No No No Yes No No Yes Formats
21. Format IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera TrueType No Yes Yes Yes Yes Yes Yes Yes OpenType No Yes Yes Yes Yes Yes Yes Yes EOT Yes Yes Yes Yes n/a n/a n/a n/a WOFF No Yes Yes Yes Yes Yes Yes Yes WOFF2 No No No No Yes No No Yes Formats
22. Format IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera TrueType No Yes Yes Yes Yes Yes Yes Yes OpenType No Yes Yes Yes Yes Yes Yes Yes EOT Yes Yes Yes Yes n/a n/a n/a n/a WOFF No Yes Yes Yes Yes Yes Yes Yes WOFF2 No No No No Yes No No Yes Formats
23. @font-face { font-family: My Font; src: url(myfont.woff2) format(‘woff2’), url(myfont.woff) format(‘woff’); } Formats CSS
24. @font-face { font-family: My Font; src: url(myfont.woff2) format(‘woff2’), url(myfont.woff) format(‘woff’), url(myfont.otf) format(‘opentype’); } Formats CSS
25. @font-face { font-family: My Font; src: url(myfont.woff) format(‘woff’); font-style: normal; font-weight: normal; font-stretch: normal; font-variant: normal; font-feature-settings: normal; unicode-range: U+0-10FFFF; } CSS Web fonts
26. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
27. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
28. ULTRA… 200 300 400 500 600 700 800 900 EXTRA- CON. CONDENSE D SEMI-CON. NORMAL SEMI-EXP. EXPANDED EXTRA-EXP. ULTRA-EXP. ULTRA… 200 300 400 500 600 700 800 900 EXTRA- CON. CONDENSE D SEMI-CON. NORMAL SEMI-EXP. EXPANDED EXTRA-EXP. ULTRA-EXP. ULTRA… 200 300 400 500 600 700 800 900 EXTRA… CONDE… Aa Aa Aa Aa Aa Aa SEMI-… Aa Aa Aa Aa Aa Aa NORM… Aa Aa Aa Aa Aa Aa SEMI-… EXPAN… Aa Aa Aa Aa Aa Aa EXTRA… ULTRA… FONT-STRETCH FONT-WEIGHT FONT-STYLE Kepler by Robert Slimbach Web fonts
29. ULTRA… 200 300 400 500 600 700 800 900 EXTRA- CON. CONDENSE D SEMI-CON. NORMAL SEMI-EXP. EXPANDED EXTRA-EXP. ULTRA-EXP. ULTRA… 200 300 400 500 600 700 800 900 EXTRA- CON. CONDENSE D SEMI-CON. NORMAL SEMI-EXP. EXPANDED EXTRA-EXP. ULTRA-EXP. ULTRA… 200 300 400 500 600 700 800 900 EXTRA… CONDE… Aa Aa Aa Aa Aa Aa SEMI-… Aa Aa Aa Aa Aa Aa NORMAL Aa Aa Aa Aa Aa Aa SEMI-… EXPAN… Aa Aa Aa Aa Aa Aa EXTRA… ULTRA… FONT-STRETCH FONT-WEIGHT FONT-STYLE Kepler by Robert Slimbach Web fonts
30. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
31. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
32. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
33. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-style Yes Yes Yes Yes Yes Yes Yes Yes font-weight Yes Yes Yes Yes Yes Yes Yes Yes font-stretch No Yes Yes Yes No Yes No No font-variant No No No No No No No No font-feature-settings No No No No No Yes No No unicode-range No Partial Partial Partial Yes No Partial Yes Web fonts
34. 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS 800 MS 900 MS FONT LOADING
35. body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading
36. body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading
37. @font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: My Font, Arial, Verdana, sans-serif; } CSS Font Loading
38. @font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading
39. Font Loading HTML CSS 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS LOAD
40. Font Loading HTML CSS 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS FONTS READY FONT A FONT B LOAD
41. Font Loading 1. The font family is not recognised and a fallback font is applied; 2. The font family is recognised but not yet loaded, and will be applied when it has finished downloading; 3. The font family is recognised and has already been loaded and will be applied immediately.
42. Font Loading 1. The font family is not recognised and a fallback font is applied; 2. The font family is recognised but not yet loaded, and will be applied when it has finished downloading; 3. The font family is recognised and has already been loaded and will be applied immediately.
43. Font Loading 1. The font family is not recognised and a fallback font is applied; 2. The font family is recognised but not yet loaded, and will be applied when it has finished downloading; 3. The font family is recognised and has already been loaded and will be applied immediately.
44. Font Loading 1. The font family is not recognised and a fallback font is applied; 2. The font family is recognised but not yet loaded, and will be applied when it has finished downloading; 3. The font family is recognised and has already been loaded and will be applied immediately.
45. Font Loading 1. The font family is not recognised and a fallback font is applied; 2. The font family is recognised but not yet loaded, and will be applied when it has finished downloading; 3. The font family is recognised and has already been loaded and will be applied immediately.
46. Font Loading ← → ↻
47. Font Loading http://www.example.com ← → ↻ Loading example.com…
48. Font Loading http://www.example.com ← → ↻ Loading example.com… It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers.
49. Font Loading http://www.example.com ← → ↻ Loaded example.com It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers.
50. Font Loading ← → ↻
51. Font Loading http://www.example.com ← → ↻ Loading example.com…
52. Font Loading http://www.example.com ← → ↻ Loading example.com…
53. Font Loading http://www.example.com ← → ↻ Loaded example.com It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers.
54. Font Loading Flash Of Unstyled Text (FOUT) Flash Of Invisible Text (FOIT) http://www.example.com ← → ↻ http://www.example.com ← → ↻ It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. http://www.example.com ← → ↻ It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. http://www.example.com ← → ↻ http://www.example.com ← → ↻ http://www.example.com ← → ↻ It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers.
55. Font Loading IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Font Loading FOUT FOUT FOUT FOUT FOIT FOIT FOIT FOIT Timeout n/a n/a n/a n/a 3 sec. 3 sec. ∞ 3 sec.
56. Font Loading IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Font Loading FOUT FOUT FOUT FOUT FOIT FOIT FOIT FOIT Timeout n/a n/a n/a n/a 3 sec. 3 sec. ∞ 3 sec.
57. Font Loading IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Font Loading FOUT FOUT FOUT FOUT FOIT FOIT FOIT FOIT Timeout n/a n/a n/a n/a 3 sec. 3 sec. ∞ 3 sec.
58. Font Loading IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Font Loading FOUT FOUT FOUT FOUT FOIT FOIT FOIT FOIT Timeout n/a n/a n/a n/a 3 sec. 3 sec. ∞ 3 sec.
59. Web Font Loader Web Font Loader https://github.com/typekit/webfontloader <script src=“webfontloader.js”></script> HTML
60. Web Font Loader WebFont.load({ …, fontactive: function (family, variation) { // Font has loaded }, active: function () { // All fonts have loaded } }); JAVASCRIPT
61. Web Font Loader <html class=“wf-loading”> … </html> HTML html { font-family: sans-serif; } CSS
62. Web Font Loader <html class=“wf-myfont-active”> … </html> HTML html.wf-myfont-active { font-family: My Font, sans-serif; } CSS
63. var myfont = new FontFace(‘My Font’, ‘url(font.woff)’, {}); ! document.fonts.add(myfont); ! document.fonts.load(‘16px My Font’).then(function () { // Font has loaded }, function () { // Font failed to load }); CSS Font Loading JAVASCRIPT
64. IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading
65. IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading
66. IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading
67. FontLoader polyfill https://github.com/bramstein/fontloader CSS Font Loading Specification http://www.w3.org/TR/css-font-loading/ CSS Font Loading
68. AVAST OPENTYPE FEATURES fi1⁄2ffl1s 70 70 8 6 FRAC LIGA LIGA ORDN
69. OpenType fi → fi st → st (CSS) → (CSS) 789 → 789 W3C → w3c Q → Q LIGATURES: LIGA DISCRETIONARY LIGATURES: DLIG OLD STYLE NUMERALS: ONUM SMALL-CAPS: SMCP CASE-SENSITIVE FORMS: CASE STYLISTIC ALTERNATES: SALT Kepler by Robert Slimbach
70. span { font-variant: common-ligatures, small-caps; } ! ul.menu { font-variant: no-common-ligatures; } OpenType CSS
71. span { font-feature-settings: “liga” on, “smcp” on; } ! ul.menu { font-feature-settings: “liga” off; } OpenType CSS
72. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes Sort of Yes liga n/a n/a Yes Yes Yes Yes Yes Yes dlig n/a n/a Yes Yes Yes Yes No Yes calt n/a n/a Yes Yes Yes Yes Yes Yes onum n/a n/a Yes Yes Yes Yes No Yes smcp n/a n/a Yes Yes Yes Yes No Yes salt n/a n/a Yes Yes Yes Yes No Yes OpenType
73. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes Sort of Yes liga n/a n/a Yes Yes Yes Yes Yes Yes dlig n/a n/a Yes Yes Yes Yes No Yes calt n/a n/a Yes Yes Yes Yes Yes Yes onum n/a n/a Yes Yes Yes Yes No Yes smcp n/a n/a Yes Yes Yes Yes No Yes salt n/a n/a Yes Yes Yes Yes No Yes OpenType
74. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes Sort of Yes liga n/a n/a Yes Yes Yes Yes Yes Yes dlig n/a n/a Yes Yes Yes Yes No Yes calt n/a n/a Yes Yes Yes Yes Yes Yes onum n/a n/a Yes Yes Yes Yes No Yes smcp n/a n/a Yes Yes Yes Yes No Yes salt n/a n/a Yes Yes Yes Yes No Yes OpenType
75. Kerning AWAY 291x493 411x493 291x493 271x493
76. body { font-kerning: auto; } h1, h2, h3 { font-kerning: normal; } ul.menu { font-kerning: none; } Kerning CSS
77. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-kerning No No No No No No Yes No Kerning
78. body { font-feature-settings: “kern” on; } Kerning CSS
79. body { font-feature-settings: “kern” on; font-kerning: normal; } Kerning CSS
80. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes No Yes font-kerning No No No No No No Yes No Kerning
81. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes No Yes font-kerning No No No No No No Yes No Kerning
82. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-feature-settings No No Yes Yes Yes Yes No Yes font-kerning No No No No No No Yes No Kerning
83. I call our world Flatland, not because we call it so, but to make its nature clearer to you, my happy readers, who are privileged to live in Space. Imag- ine a vast sheet of paper on which straight Lines, Triangles, Squares, Penta- JRQV+H[DJRQVDQGRWKHU̧JXUHVLQVWHDGRIUHPDLQLQJ̧[HGLQWKHLUSODF- es, move freely about, on or in the surface, but without the power of rising above or sinking below it, very much like shadows — only hard and with luminous edges — and you will then have a pretty cor- rect notion of my country and coun- trymen. Alas, a few years ago, I should have said “my universe;” but now my mind has been opened to higher views of things. In such a country, you will perceive at once that it is impossible that there should be anything of what you call a “solid” kind; but I dare say you will suppose that we could at least distinguish by VLJKWWKH7ULDQJOHV6TXDUHVDQGRWKHU̧JXUHVPRYLQJDERXWDV,KDYHGH- HYPHENATION JUSTIFICATION
84. h1 { text-align: right; } .menu { text-align: center; } p { text-align: justify; } Justification CSS
85. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. 420 310 200 Justification
86. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. 420 310 200 Justification
87. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. 420 310 200 Justification
88. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. 420 310 200 Justification
89. Justification In olden times when wishing still helped one, Greedy algorithm
90. Justification In olden times when wishing still helped one, there lived a king whose daughters were all Greedy algorithm
91. In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful Justification Greedy algorithm
92. In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… Justification Greedy algorithm
93. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
94. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
95. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
96. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
97. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
98. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
99. Justification In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that In olden times when wishing still helped one, there lived a king whose daughters were all beautiful; and the youngest was so beautiful that the sun itself, which… there lived a king whose daughters were all In olden times when wishing still helped one, beautiful; and the youngest was so beautiful that the sun itself, which… In olden times when wishing still helped one, In olden times when wishing still helped one, there lived a king whose daughters were all there lived a king whose daughters were all beautiful In olden times when wishing still helped one, Knuth & Plass algorithm
100. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Justification algorithm Greedy Greedy Greedy Greedy Greedy Greedy Greedy Greedy Justification
101. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. 420 310 200 Justification
102. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solu- tion of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated ques- tion, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-in- vestigated question, “What is the origin of light?” and the solu- tion of it has been re- peatedly attempted, with no other result than to crowd our lu- natic asylums with the would-be solvers. 420 310 200 Justification
103. It was in old days, with our learned men, an interesting and oft-investigated question, “What is the origin of light?” and the solu- tion of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-investigated ques- tion, “What is the origin of light?” and the solution of it has been repeatedly attempted, with no other result than to crowd our lunatic asylums with the would-be solvers. It was in old days, with our learned men, an interesting and oft-in- vestigated question, “What is the origin of light?” and the solu- tion of it has been re- peatedly attempted, with no other result than to crowd our lu- natic asylums with the would-be solvers. 420 310 200 Justification
104. BEFORE AFTER Justification
105. <p lang=“en”>…</p> HTML p { hyphens: auto; } Hyphenation CSS
106. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Yes Yes Yes Yes Hyphenation
107. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of Hyphenation
108. $(‘p, a, span’).hyphenate(‘en-us’); Hyphenation Hyphenator.js https://code.google.com/p/hyphenator Hypher https://github.com/bramstein/hypher JAVASCRIPT
109. It was in old days, with our learned men, an in- teresting and oft-inves- tigated question, “What is the origin of light?” and the solution of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solv- ers. Hyphenation
110. It was in old days, with our learned men, an in- teresting and oft-inves- tigated question, “What is the origin of light?” and the solution of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solv- ers. CONSECUTIVE LINES WITH HYPHENATION Hyphenation
111. p { hyphenate-limit-lines: 1; } ! p.small-column { hyphenate-limit-lines: no-limit; } Hyphenation CSS
112. It was in old days, with our learned men, an in- teresting and oft-inves- tigated question, “What is the origin of light?” and the solution of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solv- ers. HYPHENATION OF LAST WORD Hyphenation
113. p { hyphenate-limit-last: always; } ! p { hyphenate-limit-last: none; } Hyphenation CSS
114. It was in old days, with our learned men, an in- teresting and oft-inves- tigated question, “What is the origin of light?” and the solution of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solv- ers. HYPHENATION AFTER 2 CHARACTERS HYPHENATION AFTER 2 CHARACTERS Hyphenation
115. p { hyphenate-limit-chars: auto auto auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS
116. p { hyphenate-limit-chars: 7 auto auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS
117. p { hyphenate-limit-chars: 7 3 auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS
118. p { hyphenate-limit-chars: 7 3 5; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS
119. It was in old days, with our learned men, an in- teresting and oft-inves- tigated question, “What is the origin of light?” and the solution of it has been repeatedly at- tempted, with no other result than to crowd our lunatic asylums with the would-be solv- ers. Hyphenation HYPHENS HYPHEN HYPHEN
120. p { hyphenate-character: auto; } Hyphenation hy-phen-ation CSS
121. p { hyphenate-character: “\u2605”; } Hyphenation hy★phen★ation CSS
122. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of hyphenate-limit-lines No No Yes Yes No No No No hyphenate-limit-last No No Yes Yes No No No No hyphenate-limit-chars No No Yes Yes No No No No hyphenate-character No No No No Yes Yes Yes Yes Hyphenation
123. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of hyphenate-limit-lines No No Yes Yes No No No No hyphenate-limit-last No No Yes Yes No No No No hyphenate-limit-chars No No Yes Yes No No No No hyphenate-character No No No No Yes Yes Yes Yes Hyphenation
124. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of hyphenate-limit-lines No No Yes Yes No No No No hyphenate-limit-last No No Yes Yes No No No No hyphenate-limit-chars No No Yes Yes No No No No hyphenate-character No No No No Yes Yes Yes Yes Hyphenation
125. Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of hyphenate-limit-lines No No Yes Yes No No No No hyphenate-limit-last No No Yes Yes No No No No hyphenate-limit-chars No No Yes Yes No No No No hyphenate-character No No No No Yes Yes Yes Yes Hyphenation
126. Web Design is 95% Typography “ ” ― Oliver Reichenstein
127. accelerator accesskey align-content align-items align-self alignment-baseline all animation animation-delay animation-direction animation-duration DQLPDWLRQ̧OOPRGH animation-iteration-count animation-name animation-play-state animation-timing-function app-region appearance aspect-ratio audio-level backface-visibility background background-attachment background-blend-mode background-clip background-color background-composite background-image background-origin background-position background-position-x background-position-y background-repeat background-repeat-x background-repeat-y background-size baseline-shift behavior binding block-progression border border-after border-after-color border-after-style border-after-width border-before border-before-color border-before-style border-before-width border-bottom border-bottom-color border-bottom-colors border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end border-end-color border-end-style border-end-width ERUGHU̧W border-horizontal-spacing border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-colors border-left-style border-left-width border-radius border-right border-right-color border-right-colors border-right-style border-right-width border-spacing border-start border-start-color border-start-style border-start-width border-style border-top border-top-color border-top-colors border-top-left-radius border-top-right-radius border-top-style border-top-width border-vertical-spacing border-width bottom box-align box-decoration-break box-direction ER[̨H[ ER[̨H[JURXS box-lines box-ordinal-group box-orient box-pack ER[UH̨HFW box-shadow box-sizing break-after break-before break-inside buffered-rendering caption-side clear clip clip-path clip-rule color color-correction color-interpolation FRORULQWHUSRODWLRQ̧OWHUV FRORUSUŖOH color-rendering column-axis column-break-after column-break-before column-break-inside column-count FROXPQ̧OO column-gap column-progression column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns FRPSRVLWLRQ̧OOFRORU composition-frame-color content content-zoom-chaining content-zoom-limit content-zoom-limit-max content-zoom-limit-min content-zoom-snap content-zoom-snap-points content-zoom-snap-type content-zooming counter-increment counter-reset cursor cursor-visibility dashboard-region direction display display-align dominant-baseline empty-cells enable-background ̧OO ̧OORSDFLW\ ̧OOUXOH ̧OWHU ̨H[ ̨H[DOLJQ ̨H[EDVLV ̨H[GLUHFWLRQ ̨H[̨RZ ̨H[JURZ ̨H[LWHPDOLJQ ̨H[OLQHSDFN ̨H[QHJDWLYH ̨H[RUGHU ̨H[SDFN ̨H[SRVLWLYH ̨H[SUHIHUUHGVL]H ̨H[VKULQN ̨H[ZUDS ̨RDW ̨RDWHGJH ̨RRGFRORU ̨RRGRSDFLW\ ̨RZIURP ̨RZLQWR font font-family font-feature-settings font-kerning font-language-override font-size font-size-adjust font-size-delta font-smoothing font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight force-broken-image-icon glyph-orientation-horizontal glyph-orientation-vertical grid-after grid-auto-columns JULGDXWR̨RZ grid-auto-rows grid-before grid-column grid-column-align grid-column-span grid-columns grid-end grid-row grid-row-align grid-row-span grid-rows grid-start height high-contrast-adjust highlight hyphenate-character hyphenate-limit-after hyphenate-limit-before hyphenate-limit-chars hyphenate-limit-lines hyphenate-limit-zone hyphens image-orientation image-region image-rendering ime-align ime-mode input-format input-required interpolation-mode justify-content kerning OD\RXW̨RZ layout-grid layout-grid-char layout-grid-line layout-grid-mode layout-grid-type left letter-spacing lighting-color line-align line-box-contain line-break line-clamp line-grid line-height line-increment line-snap link link-source list-style list-style-image list-style-position list-style-type locale logical-height logical-width margin margin-after margin-after-collapse margin-before margin-before-collapse margin-bottom margin-bottom-collapse margin-collapse margin-end margin-left margin-right margin-start margin-top margin-top-collapse marker marker-end marker-mid marker-offset marker-start marks marquee marquee-dir marquee-direction marquee-increment marquee-loop marquee-repetition marquee-speed marquee-style mask mask-attachment mask-box-image mask-box-image-outset mask-box-image-repeat mask-box-image-slice mask-box-image-source mask-box-image-width mask-clip mask-composite mask-image mask-origin mask-position mask-position-x mask-position-y mask-repeat mask-repeat-x mask-repeat-y mask-size mask-type match-nearest-mail- blockquote-color max-height max-logical-height max-logical-width max-width max-zoom min-height min-logical-height min-logical-width min-width min-zoom mix-blend-mode nav-down nav-index nav-left nav-right nav-up nbsp-mode REMHFW̧W object-position opacity order orient orientation orphans osx-font-smoothing outline outline-color outline-offset outline-radius outline-radius-bottomleft outline-radius-bottomright outline-radius-topleft outline-radius-topright outline-style outline-width RYHŲRZ RYHŲRZVFUROOLQJ RYHŲRZVW\OH RYHŲRZZUDS RYHŲRZ[ RYHŲRZ\ padding padding-after padding-before padding-bottom padding-end padding-left padding-right padding-start padding-top page page-break-after page-break-before page-break-inside paint-order perspective perspective-origin perspective-origin-x perspective-origin-y pointer-events position print-color-adjust quotes region-break-after region-break-before region-break-inside region-fragment resize right rtl-ordering ruby-align ruby-overhang ruby-position scroll-chaining scroll-limit scroll-limit-x-max scroll-limit-x-min scroll-limit-y-max scroll-limit-y-min scroll-rails scroll-snap-points-x scroll-snap-points-y scroll-snap-type scroll-snap-x scroll-snap-y scroll-translation scrollbar-arrow-color scrollbar-base-color scrollbar-dark-shadow-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color scrollbar3d-light-color scrollbar3dlight-color shape-image-threshold shape-margin shape-outside shape-rendering size solid-color solid-opacity speak src stack-sizing stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width VW\OH̨RDW svg-shadow tab-size table-baseline table-layout tap-highlight-color text-align text-align-last text-anchor text-autospace text-combine text-combine-horizontal text-decoration text-decoration-color text-decoration-line text-decoration-style text-decorations-in-effect text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style WH[W̧OOFRORU text-indent text-justify text-justify-trim text-kashida text-kashida-space text-line-through text-line-through-color text-line-through-mode text-line-through-style text-line-through-width text-orientation WH[WRYHŲRZ text-overline text-overline-color text-overline-mode text-overline-style text-overline-width text-rendering text-security text-shadow text-size-adjust text-stroke text-stroke-color text-stroke-width text-transform text-underline text-underline-color text-underline-mode text-underline-position text-underline-style text-underline-width top touch-action touch-callout touch-select transform transform-origin transform-origin-x transform-origin-y transform-origin-z transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi unicode-range user-drag user-focus user-input user-modify user-select user-zoom vector-effect vertical-align YLHZSRUW̧OO YLHZSRUW̧OORSDFLW\ visibility white-space widows width will-change window-shadow word-break word-spacing word-wrap ZUDS̨RZ wrap-margin wrap-through writing-mode z-index
128. accelerator accesskey align-content align-items align-self alignment-baseline all animation animation-delay animation-direction animation-duration DQLPDWLRQ̧OOPRGH animation-iteration-count animation-name animation-play-state animation-timing-function app-region appearance aspect-ratio audio-level backface-visibility background background-attachment background-blend-mode background-clip background-color background-composite background-image background-origin background-position background-position-x background-position-y background-repeat background-repeat-x background-repeat-y background-size baseline-shift behavior binding block-progression border border-after border-after-color border-after-style border-after-width border-before border-before-color border-before-style border-before-width border-bottom border-bottom-color border-bottom-colors border-bottom-left-radius border-bottom-right-radius border-bottom-style border-bottom-width border-collapse border-color border-end border-end-color border-end-style border-end-width ERUGHU̧W border-horizontal-spacing border-image border-image-outset border-image-repeat border-image-slice border-image-source border-image-width border-left border-left-color border-left-colors border-left-style border-left-width border-radius border-right border-right-color border-right-colors border-right-style border-right-width border-spacing border-start border-start-color border-start-style border-start-width border-style border-top border-top-color border-top-colors border-top-left-radius border-top-right-radius border-top-style border-top-width border-vertical-spacing border-width bottom box-align box-decoration-break box-direction ER[̨H[ ER[̨H[JURXS box-lines box-ordinal-group box-orient box-pack ER[UH̨HFW box-shadow box-sizing break-after break-before break-inside buffered-rendering caption-side clear clip clip-path clip-rule color color-correction color-interpolation FRORULQWHUSRODWLRQ̧OWHUV FRORUSUŖOH color-rendering column-axis column-break-after column-break-before column-break-inside column-count FROXPQ̧OO column-gap column-progression column-rule column-rule-color column-rule-style column-rule-width column-span column-width columns FRPSRVLWLRQ̧OOFRORU composition-frame-color content content-zoom-chaining content-zoom-limit content-zoom-limit-max content-zoom-limit-min content-zoom-snap content-zoom-snap-points content-zoom-snap-type content-zooming counter-increment counter-reset cursor cursor-visibility dashboard-region direction display display-align dominant-baseline empty-cells enable-background ̧OO ̧OORSDFLW\ ̧OOUXOH ̧OWHU ̨H[ ̨H[DOLJQ ̨H[EDVLV ̨H[GLUHFWLRQ ̨H[̨RZ ̨H[JURZ ̨H[LWHPDOLJQ ̨H[OLQHSDFN ̨H[QHJDWLYH ̨H[RUGHU ̨H[SDFN ̨H[SRVLWLYH ̨H[SUHIHUUHGVL]H ̨H[VKULQN ̨H[ZUDS ̨RDW ̨RDWHGJH ̨RRGFRORU ̨RRGRSDFLW\ ̨RZIURP ̨RZLQWR font font-family font-feature-settings font-kerning font-language-override font-size font-size-adjust font-size-delta font-smoothing font-stretch font-style font-synthesis font-variant font-variant-alternates font-variant-caps font-variant-east-asian font-variant-ligatures font-variant-numeric font-variant-position font-weight force-broken-image-icon glyph-orientation-horizontal glyph-orientation-vertical grid-after grid-auto-columns JULGDXWR̨RZ grid-auto-rows grid-before grid-column grid-column-align grid-column-span grid-columns grid-end grid-row grid-row-align grid-row-span grid-rows grid-start height high-contrast-adjust highlight hyphenate-character hyphenate-limit-after hyphenate-limit-before hyphenate-limit-chars hyphenate-limit-lines hyphenate-limit-zone hyphens image-orientation image-region image-rendering ime-align ime-mode input-format input-required interpolation-mode justify-content kerning OD\RXW̨RZ layout-grid layout-grid-char layout-grid-line layout-grid-mode layout-grid-type left letter-spacing lighting-color line-align line-box-contain line-break line-clamp line-grid line-height line-increment line-snap link link-source list-style list-style-image list-style-position list-style-type locale logical-height logical-width margin margin-after margin-after-collapse margin-before margin-before-collapse margin-bottom margin-bottom-collapse margin-collapse margin-end margin-left margin-right margin-start margin-top margin-top-collapse marker marker-end marker-mid marker-offset marker-start marks marquee marquee-dir marquee-direction marquee-increment marquee-loop marquee-repetition marquee-speed marquee-style mask mask-attachment mask-box-image mask-box-image-outset mask-box-image-repeat mask-box-image-slice mask-box-image-source mask-box-image-width mask-clip mask-composite mask-image mask-origin mask-position mask-position-x mask-position-y mask-repeat mask-repeat-x mask-repeat-y mask-size mask-type match-nearest-mail- blockquote-color max-height max-logical-height max-logical-width max-width max-zoom min-height min-logical-height min-logical-width min-width min-zoom mix-blend-mode nav-down nav-index nav-left nav-right nav-up nbsp-mode REMHFW̧W object-position opacity order orient orientation orphans osx-font-smoothing outline outline-color outline-offset outline-radius outline-radius-bottomleft outline-radius-bottomright outline-radius-topleft outline-radius-topright outline-style outline-width RYHŲRZ RYHŲRZVFUROOLQJ RYHŲRZVW\OH RYHŲRZZUDS RYHŲRZ[ RYHŲRZ\ padding padding-after padding-before padding-bottom padding-end padding-left padding-right padding-start padding-top page page-break-after page-break-before page-break-inside paint-order perspective perspective-origin perspective-origin-x perspective-origin-y pointer-events position print-color-adjust quotes region-break-after region-break-before region-break-inside region-fragment resize right rtl-ordering ruby-align ruby-overhang ruby-position scroll-chaining scroll-limit scroll-limit-x-max scroll-limit-x-min scroll-limit-y-max scroll-limit-y-min scroll-rails scroll-snap-points-x scroll-snap-points-y scroll-snap-type scroll-snap-x scroll-snap-y scroll-translation scrollbar-arrow-color scrollbar-base-color scrollbar-dark-shadow-color scrollbar-darkshadow-color scrollbar-face-color scrollbar-highlight-color scrollbar-shadow-color scrollbar-track-color scrollbar3d-light-color scrollbar3dlight-color shape-image-threshold shape-margin shape-outside shape-rendering size solid-color solid-opacity speak src stack-sizing stop-color stop-opacity stroke stroke-dasharray stroke-dashoffset stroke-linecap stroke-linejoin stroke-miterlimit stroke-opacity stroke-width VW\OH̨RDW svg-shadow tab-size table-baseline table-layout tap-highlight-color text-align text-align-last text-anchor text-autospace text-combine text-combine-horizontal text-decoration text-decoration-color text-decoration-line text-decoration-style text-decorations-in-effect text-emphasis text-emphasis-color text-emphasis-position text-emphasis-style WH[W̧OOFRORU text-indent text-justify text-justify-trim text-kashida text-kashida-space text-line-through text-line-through-color text-line-through-mode text-line-through-style text-line-through-width text-orientation WH[WRYHŲRZ text-overline text-overline-color text-overline-mode text-overline-style text-overline-width text-rendering text-security text-shadow text-size-adjust text-stroke text-stroke-color text-stroke-width text-transform text-underline text-underline-color text-underline-mode text-underline-position text-underline-style text-underline-width top touch-action touch-callout touch-select transform transform-origin transform-origin-x transform-origin-y transform-origin-z transform-style transition transition-delay transition-duration transition-property transition-timing-function unicode-bidi unicode-range user-drag user-focus user-input user-modify user-select user-zoom vector-effect vertical-align YLHZSRUW̧OO YLHZSRUW̧OORSDFLW\ visibility white-space widows width will-change window-shadow word-break word-spacing word-wrap ZUDS̨RZ wrap-margin wrap-through writing-mode z-index
129. Web Design is 18.6% Typography “ ”
130. Web fonts, justification, hyphenation, balanced text, drop caps, OpenType features, colour fonts, text rendering, font loading, kerning, lettering, character alignment, fitting text, widows, orphans, math layout, etc.
131. THE STATE OF WEB TYPE www.stateofwebtype.com &
132. Thank you THE STATE OF WEB TYPE www.stateofwebtype.com Tablet Gothic by TypeTogether FF Quixo by Frank Grießhammer Input by David Jonathan Ross & Twitter: @bram_stein