Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Typography

Bram Stein
December 03, 2012

Web Typography

Slides for my Web Typography talk given at the Kings of Code conference 2012.

Bram Stein

December 03, 2012
Tweet

More Decks by Bram Stein

Other Decks in Design

Transcript

  1. Web Typography
    p bram_stein

    View full-size slide

  2. Bad Typography

    View full-size slide

  3. Bad Typography

    View full-size slide

  4. Bad Typography

    View full-size slide

  5. Bad Typography
    http://fontpolice.tumblr.com/

    View full-size slide

  6. header h3 {
    font-weight: normal;
    font-style: italic;
    font-size: 20px;
    }
    p {
    margin: 0;
    }
    p + p {
    text-indent: 1.5em;
    }
    article {
    margin: 110px auto;
    width: 510px;
    }
    section {
    color: #444;
    font-size: 20px;
    }
    section + section {
    margin-bottom: 1.5em;
    }
    header {
    margin-bottom: 1.5em;
    }

    View full-size slide

  7. o p s w v x 3 0
    !
    Quadraat
    Web Fonts

    View full-size slide

  8. @font-face {
    font-family: 'MyFont';
    src: url(myfont.woff) format('woff');
    }
    @font-face
    p {
    font-family: 'MyFont', sans-serif;
    }

    View full-size slide

  9. 6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1
    WOFF

    View full-size slide

  10. 6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1
    TrueType/OpenType

    View full-size slide

  11. Embedded OpenType
    6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1

    View full-size slide

  12. SVG
    6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1

    View full-size slide

  13. 6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1
    WOFF + TTF/OTF + EOT + SVG

    View full-size slide

  14. Bulletproof @font-face syntax
    @font-face {
    font-family: 'MyFont';
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.otf') format('opentype'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#font') format('svg');
    }

    View full-size slide

  15. @font-face {
    font-family: 'MyFont';
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.otf') format('opentype'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#font') format('svg');
    }
    Bulletproof @font-face syntax

    View full-size slide

  16. Bulletproof @font-face syntax
    @font-face {
    font-family: 'MyFont';
    src: url('myfont.eot?#iefix') format('embedded-opentype'),
    url('myfont.woff') format('woff'),
    url('myfont.otf') format('opentype'),
    url('myfont.ttf') format('truetype'),
    url('myfont.svg#font') format('svg');
    }

    View full-size slide

  17. fi ffi
    

    1234567890
    /, / ½, ¼
    Good morning G 
    Font Features
    (Case) Case

    View full-size slide

  18. 

    ½, ¼
    G 
    Font Features
    Case
    font-feature-settings: "case" 1;
    font-feature-settings: "smcp" 1;
    font-feature-settings: "frac" 1;
    font-feature-settings: "onum" 1;
    font-feature-settings: "liga" 1;

    View full-size slide

  19. Font features
    6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1

    View full-size slide

  20. ..
    ..

    View full-size slide

  21. Justification
    text-align: justify;
    Done?

    View full-size slide

  22. ..
    ..

    View full-size slide

  23. ..
    ..

    View full-size slide

  24. ..
    ..

    View full-size slide

  25. CSS Hyphenation
    p {
    hyphens: auto;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    -ms-hyphens: auto;
    }

    ...

    View full-size slide

  26. ..
    ..

    View full-size slide

  27. CSS Hyphenation
    6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1

    View full-size slide

  28. CSS Hyphenation
    jQuery(function ($) {
    $('p').hyphenate('en-us');
    });
    Hyphenator.js
    http://code.google.com/p/hyphenator/
    Hypher (Node.js, jQuery & Ender)
    https://github.com/bramstein/hypher

    View full-size slide

  29. text-align: dir [char]?
    .
    .
    .
    .
    .
    .
    .
    .
    text-align: center; text-align: center ".";

    View full-size slide

  30. 6 15 19 4.0 12.0 2.2 4.2–4.3
    7 16 20 5.0 12.1 2.3 5.0–5.1
    8 17 21 5.1 12.5 3.0 6.0
    9 18 22 6.0 4.0
    10 23 4.1
    text-align: dir [char]?

    View full-size slide

  31. jQuery(function ($) {
    $('table td').textAlign('.');
    });
    jQuery Text Align plugin
    https://github.com/bramstein/text-align
    text-align: dir [char]?

    View full-size slide

  32. Line breaking
    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 has seen so much, was
    astonished whenever it shone in her
    face.
    In olden times when wishing still helped

    View full-size slide

  33. In olden times when wishing still
    helped one, there lived a king whose
    Line breaking
    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 has seen so much, was
    astonished whenever it shone in her
    face.
    daughters

    View full-size slide

  34. In olden times when wishing still
    helped one, there lived a king whose
    daughters were all beautiful; and the
    Line breaking
    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 has seen so much, was
    astonished whenever it shone in her
    face.
    youngest

    View full-size slide

  35. 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 has seen so much, was
    astonished whenever it shone in her
    face.
    Line breaking
    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 has seen so much, was
    astonished whenever it shone in her
    face.

    View full-size slide

  36. Line breaking
    In olden times when wishing still helped

    View full-size slide

  37. Line breaking
    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
    has seen so much, was astonished
    whenever it shone in her face.

    View full-size slide

  38. Line breaking
    text-justify: newspaper;

    View full-size slide

  39. Line breaking
    Typeset: TeX line breaking algorithm in JavaScript
    https://github.com/bramstein/typeset

    View full-size slide

  40. Use web fonts.
    Use font features.
    Use hyphenation.
    Do not create bad typography.
    It is really not necessary.

    View full-size slide

  41. Web Typography
    p bram_stein
    [email protected]

    View full-size slide