Web Typography

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

Transcript

1. Web Typography
   p bram_stein
   

   View Slide

2. Bad Typography
   

   View Slide

3. Bad Typography
   

   View Slide

4. Bad Typography
   

   View Slide

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

   View Slide

6. View Slide

7. View Slide

8. 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 Slide

9. View Slide

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

    View Slide

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

    View Slide

12. 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 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
    TrueType/OpenType
    

    View Slide

14. 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 Slide

15. 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 Slide

16. 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 Slide

17. 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 Slide

18. @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 Slide

19. 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 Slide

20. View Slide

21. View Slide

22. View Slide

23. View Slide

24. fi ffi
    
    ffi
    1234567890
    /, / ½, ¼
    Good morning G 
    Font Features
    (Case) Case
    

    View Slide

25. 
    ffi
    ½, ¼
    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 Slide

26. 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 Slide

27. ..
    ..
    

    View Slide

28. Justification
    text-align: justify;
    Done?
    

    View Slide

29. ..
    ..
    

    View Slide

30. ..
    ..
    

    View Slide

31. ..
    ..
    

    View Slide

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

    View Slide

33. ..
    ..
    

    View Slide

34. 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 Slide

35. 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 Slide

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

    View Slide

37. 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 Slide

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

    View Slide

39. 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 Slide

40. 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 Slide

41. 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 Slide

42. 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 Slide

43. Line breaking
    In olden times when wishing still helped
    

    View Slide

44. 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 Slide

45. Line breaking
    text-justify: newspaper;
    

    View Slide

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

    View Slide

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

    View Slide

48. Web Typography
    p bram_stein
    bram@bramstein.com
    

    View Slide