The State of Web Type

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
September 11, 2014

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.

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

September 11, 2014
Tweet

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