Sta THE STATE OF WEB TYPE BASELINE SERIF X-HEIGHT FF QUIXO @bram_stein #wbfntdy

The second half is not as boring as the first. “ ” ― My wife

The material was out of date. Even I know this stuff. I didn’t learn anything. “ ” ― Anonymous

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

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

@font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: My Font, Arial, Verdana, sans-serif; } Web fonts CSS

@font-face { font-family: Helvetica Neue; src: url(comicsans.ttf); } Helvetica Neue CSS Web fonts

@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

Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG

Formats Woof!

Formats Woof! Woof!

Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG

Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG

Formats TTF Ag OTF Ag EOT Ag WOFF Ag WOFF2 Ag SVG

Formats TTF Ag OTF Ag EOT ?? WOFF ?? WOFF2 ?? SVG

Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF

Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF + GZIP

Formats TTF Ag OTF Ag EOT WOFF WOFF2 SVG TTF OTF TTF OTF TTF OTF + GZIP + Zopfli

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

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

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

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

@font-face { font-family: My Font; src: url(myfont.woff2) format(‘woff2’), url(myfont.woff) format(‘woff’); } Formats CSS

@font-face { font-family: My Font; src: url(myfont.woff2) format(‘woff2’), url(myfont.woff) format(‘woff’), url(myfont.otf) format(‘opentype’); } Formats CSS

@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

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

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

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

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

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

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

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

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

100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS 800 MS 900 MS FONT LOADING

body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading

body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading

@font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: My Font, Arial, Verdana, sans-serif; } CSS Font Loading

@font-face { font-family: My Font; src: url(myfont.woff); } ! body { font-family: Arial, Verdana, sans-serif; } CSS Font Loading

Font Loading HTML CSS 100 MS 200 MS 300 MS 400 MS 500 MS 600 MS 700 MS LOAD

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

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.

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.

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.

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.

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.

Font Loading ← → ↻

Font Loading http://www.example.com ← → ↻ Loading example.com…

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.

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.

Font Loading ← → ↻

Font Loading http://www.example.com ← → ↻ Loading example.com…

Font Loading http://www.example.com ← → ↻ Loading example.com…

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.

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.

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.

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.

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.

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.

Web Font Loader Web Font Loader https://github.com/typekit/webfontloader HTML

Web Font Loader WebFont.load({ …, fontactive: function (family, variation) { // Font has loaded }, active: function () { // All fonts have loaded } }); JAVASCRIPT

Web Font Loader … HTML html { font-family: sans-serif; } CSS

Web Font Loader … HTML html.wf-myfont-active { font-family: My Font, sans-serif; } CSS

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

IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading

IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading

IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera CSS Font Loading No No No No Yes No No Yes CSS Font Loading

FontLoader polyfill https://github.com/bramstein/fontloader CSS Font Loading Specification http://www.w3.org/TR/css-font-loading/ CSS Font Loading

AVAST OPENTYPE FEATURES fi1⁄2ffl1s 70 70 8 6 FRAC LIGA LIGA ORDN

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

span { font-variant: common-ligatures, small-caps; } ! ul.menu { font-variant: no-common-ligatures; } OpenType CSS

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

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

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

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

Kerning AWAY 291x493 411x493 291x493 271x493

body { font-kerning: auto; } h1, h2, h3 { font-kerning: normal; } ul.menu { font-kerning: none; } Kerning CSS

Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera font-kerning No No No No No No Yes No Kerning

body { font-feature-settings: “kern” on; } Kerning CSS

body { font-feature-settings: “kern” on; font-kerning: normal; } Kerning CSS

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

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

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

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

h1 { text-align: right; } .menu { text-align: center; } p { text-align: justify; } Justification CSS

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

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

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

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

Justification In olden times when wishing still helped one, Greedy algorithm

Justification In olden times when wishing still helped one, there lived a king whose daughters were all Greedy algorithm

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

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

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

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

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

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

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

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

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

Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera Justification algorithm Greedy Greedy Greedy Greedy Greedy Greedy Greedy Greedy Justification

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

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

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

BEFORE AFTER Justification

…

HTML p { hyphens: auto; } Hyphenation CSS

Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Yes Yes Yes Yes Hyphenation

Properties IE8 IE9 IE10 IE11 Chrome Firefox Safari Opera hyphens No No Yes Yes Sort of Yes Yes Sort of Hyphenation

$(‘p, a, span’).hyphenate(‘en-us’); Hyphenation Hyphenator.js https://code.google.com/p/hyphenator Hypher https://github.com/bramstein/hypher JAVASCRIPT

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

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

p { hyphenate-limit-lines: 1; } ! p.small-column { hyphenate-limit-lines: no-limit; } Hyphenation CSS

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

p { hyphenate-limit-last: always; } ! p { hyphenate-limit-last: none; } Hyphenation CSS

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

p { hyphenate-limit-chars: auto auto auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS

p { hyphenate-limit-chars: 7 auto auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS

p { hyphenate-limit-chars: 7 3 auto; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS

p { hyphenate-limit-chars: 7 3 5; } hy•phen•ation is need•ed for jus•ti•fi•ca•tion Hyphenation CSS

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

p { hyphenate-character: auto; } Hyphenation hy-phen-ation CSS

p { hyphenate-character: “\u2605”; } Hyphenation hy★phen★ation CSS

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

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

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

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

Web Design is 95% Typography “ ” ― Oliver Reichenstein

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

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

Web Design is 18.6% Typography “ ”

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.

THE STATE OF WEB TYPE www.stateofwebtype.com &

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