$30 off During Our Annual Pro Sale. View Details »

The State of Web Type

Bram Stein
September 11, 2014

The State of Web Type

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

Bram Stein

September 11, 2014
Tweet

More Decks by Bram Stein

Other Decks in Design

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