Web Typography

A6ab7669f1496fb8df8197f55ec6f390?s=47 Bram Stein
December 03, 2012

Web Typography

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

A6ab7669f1496fb8df8197f55ec6f390?s=128

Bram Stein

December 03, 2012
Tweet

Transcript

  1. Web Typography p bram_stein

  2. Bad Typography

  3. Bad Typography

  4. Bad Typography

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

  6. None
  7. None
  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; }
  9. None
  10. o p s w v x 3 0 ! Quadraat

    Web Fonts
  11. @font-face { font-family: 'MyFont'; src: url(myfont.woff) format('woff'); } @font-face p

    { font-family: 'MyFont', sans-serif; }
  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
  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
  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
  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
  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
  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'); }
  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
  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'); }
  20. None
  21. None
  22. None
  23. None
  24. fi ffi  ffi 1234567890 /, / ½, ¼ Good

    morning G  Font Features (Case) Case
  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;
  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
  27. .. ..

  28. Justification text-align: justify; Done?

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

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

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

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

    -ms-hyphens: auto; } <body lang="en"> ... </body>
  33. .. ..

  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
  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
  36. text-align: dir [char]? . . . . . . .

    . text-align: center; text-align: center ".";
  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]?
  38. jQuery(function ($) { $('table td').textAlign('.'); }); jQuery Text Align plugin

    https://github.com/bramstein/text-align text-align: dir [char]?
  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
  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
  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
  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.
  43. Line breaking In olden times when wishing still helped

  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.
  45. Line breaking text-justify: newspaper;

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

  47. Use web fonts. Use font features. Use hyphenation. Do not

    create bad typography. It is really not necessary.
  48. Web Typography p bram_stein bram@bramstein.com