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. 3.

    The material was out of date. Even I know this

    stuff. I didn’t learn anything. “ ” ― Anonymous
  2. 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
  3. 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
  4. 6.

    @font-face { font-family: My Font; src: url(myfont.woff); } ! body

    { font-family: My Font, Arial, Verdana, sans-serif; } Web fonts CSS
  5. 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
  6. 17.
  7. 18.

    Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF

    OTF TTF OTF TTF OTF + GZIP + Zopfli
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  14. 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
  15. 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
  16. 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
  17. 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
  18. 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
  19. 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
  20. 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
  21. 34.

    100 MS 200 MS 300 MS 400 MS 500 MS

    600 MS 700 MS 800 MS 900 MS FONT LOADING
  22. 37.

    @font-face { font-family: My Font; src: url(myfont.woff); } ! body

    { font-family: My Font, Arial, Verdana, sans-serif; } CSS Font Loading
  23. 38.

    @font-face { font-family: My Font; src: url(myfont.woff); } ! body

    { font-family: Arial, Verdana, sans-serif; } CSS Font Loading
  24. 39.

    Font Loading HTML CSS 100 MS 200 MS 300 MS

    400 MS 500 MS 600 MS 700 MS LOAD
  25. 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
  26. 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.
  27. 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.
  28. 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.
  29. 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.
  30. 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.
  31. 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.
  32. 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.
  33. 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.
  34. 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.
  35. 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.
  36. 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.
  37. 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.
  38. 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.
  39. 60.

    Web Font Loader WebFont.load({ …, fontactive: function (family, variation) {

    // Font has loaded }, active: function () { // All fonts have loaded } }); JAVASCRIPT
  40. 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
  41. 64.

    IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font

    Loading No No No No Yes No No Yes CSS Font Loading
  42. 65.

    IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font

    Loading No No No No Yes No No Yes CSS Font Loading
  43. 66.

    IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font

    Loading No No No No Yes No No Yes CSS Font Loading
  44. 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
  45. 71.

    span { font-feature-settings: “liga” on, “smcp” on; } ! ul.menu

    { font-feature-settings: “liga” off; } OpenType CSS
  46. 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
  47. 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
  48. 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
  49. 76.

    body { font-kerning: auto; } h1, h2, h3 { font-kerning:

    normal; } ul.menu { font-kerning: none; } Kerning CSS
  50. 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
  51. 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
  52. 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
  53. 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
  54. 84.

    h1 { text-align: right; } .menu { text-align: center; }

    p { text-align: justify; } Justification CSS
  55. 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
  56. 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
  57. 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
  58. 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
  59. 90.

    Justification In olden times when wishing still helped one, there

    lived a king whose daughters were all Greedy algorithm
  60. 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
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. 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
  69. 100.

    Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Justification

    algorithm Greedy Greedy Greedy Greedy Greedy Greedy Greedy Greedy Justification
  70. 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
  71. 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
  72. 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
  73. 106.

    Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens

    No No Yes Yes Yes Yes Yes Yes Hyphenation
  74. 107.

    Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens

    No No Yes Yes Sort of Yes Yes Sort of Hyphenation
  75. 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
  76. 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
  77. 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
  78. 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
  79. 115.
  80. 116.

    p { hyphenate-limit-chars: 7 auto auto; } hy•phen•ation is need•ed

    for jus•ti•fi•ca•tion Hyphenation CSS
  81. 117.

    p { hyphenate-limit-chars: 7 3 auto; } hy•phen•ation is need•ed

    for jus•ti•fi•ca•tion Hyphenation CSS
  82. 118.

    p { hyphenate-limit-chars: 7 3 5; } hy•phen•ation is need•ed

    for jus•ti•fi•ca•tion Hyphenation CSS
  83. 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
  84. 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
  85. 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
  86. 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
  87. 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
  88. 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
  89. 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
  90. 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.
  91. 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