The State of Web Type

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

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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
   

   View Slide

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

   View Slide

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

   View Slide

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
   

   View Slide

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

   View Slide

10. Formats
    Woof!
    

    View Slide

11. Formats
    Woof! Woof!
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

46. Font Loading
    ← → ↻
    

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

50. Font Loading
    ← → ↻
    

    View Slide

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

    View Slide

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

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

75. Kerning
    AWAY
    291x493 411x493 291x493 271x493
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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
    

    View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

104. BEFORE AFTER
     Justification
     

     View Slide

105. …
     HTML
     p {
     hyphens: auto;
     }
     Hyphenation
     CSS
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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

     View Slide

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

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

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
     

     View Slide

126. Web Design is 95% Typography
     “ ”
     ― Oliver Reichenstein
     

     View Slide

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
     

     View Slide

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
     

     View Slide

129. Web Design is 18.6% Typography
     “ ”
     

     View Slide

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.
     

     View Slide

131. THE STATE OF
     WEB TYPE
     www.stateofwebtype.com
     &
     

     View Slide

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
     

     View Slide