1. The Future of Responsive Typography

    An Event Apart Seattle — March 31, 2014
  2. @NickSherman

    • Font Bureau
    • Webtype
    • Fonts In Use
    • Type Directors Club
    • Hamilton Wood Type & Printing Museum
    • Pizza!
  3. First Things First

  4. BIG
  5. Everything is amazing.

    • Anti-aliasing
    • @font-face
    • WOFF
    • UFO
    • Wider adoption of standards
    • Sitting in chairs in the sky
    • Publishing!
  6. However …

  7. Problem №1

    Typographic basics

  8. Paragraph Widths

  9. The basic character in a type design is determined by the uniform design characteristics of all letters in the alphabet. However, this alone does not determine the standard of the typeface and the quality of composition set with it. The appearance is something complex which forms itself out of many details, like form, pro­portion, ductus, rhythm, etc. If everything harmonizes, the total result will be more than the sum of its components. The only reliable basis for the design of a type is a positive feeling for form and style. In order to be able to realize the concept of a typeface the further development until the final type production requires a large amount of knowledge and experience.

  10. p {max-width: 40em;}
  11. The basic character in a type design is determined by the uniform design characteristics of all letters in the alphabet. However, this alone does not determine the standard of the typeface and the quality of composition set with it. The appearance is something complex which forms itself out of many details, like form, pro­portion, ductus, rhythm, etc. If everything harmonizes, the total result will be more than the sum of its components. The only reliable basis for the design of a type is a positive feeling for form and style. In order to be able to realize the concept of a typeface the further development until the final type production requires a large amount of knowledge and experience.

  12. Kerning & Ligatures

  13. Waffle
  14. * {text-rendering: optimizeLegibility;}
  15. Waffle
    Waffle
  16. Font Smoothing

  17. “The entire digital revolution is based on rounding.”
    —David Berlow
  18. h1, h2, h3 { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }


  19. Other issues

    • Subpixel spacing
    • OpenType features
    • Hyphenation
    • Justification
    • Line balancing
    • Rendering bugs
  20. Problem №2

    Media query functionality

  21. Physical Resolution

  22. “… too much existing content relies on the assumption of 96dpi, and breaking that assumption breaks the content.”
    CSS Values and Units Module Level 3,
    W3C Candidate Recommendation 30 July 2013

    http://www.w3.org/TR/css3-values/#absolute-lengths
  23. Logic Versus Practicality

    or,

    An Aside on Fixing Things

  24. If something needs fixing, avoid breaking other things while you fix it.

    But still fix it!

  25. https://twitter.com/NickSherman/status/320655148240224257
  26. 6.14 in × 2.61 in
  27. 6.14 in × 2.61 in
    67 in
  28. http://bit.ly/rawDPIy
  29. Relative Size

  30. http://sizecalc.com
  31. http://sizecalc.com
  32. http://webdesign.maratz.com/lab/responsivetypography/
  33. Other queries

  34. #aspect-ratio-test { background-color: red; } @media (aspect-ratio: 4/3) { #aspect-ratio-test { background-color: green; } }
  35. #projection-test { background-color: red; } @media projection { #projection-test { background-color: green; } }
  36. Problem №3

    Our fonts are static

  37. Century Expanded
  38. Century Expanded
  39. Benton Modern vs. Benton Modern RE at 9px in Mac OS X
  40. http://www.fontbureau.com/ReadingEdge/
  41. “If you design a single
    font, it’s an island. If
    you design more than one, you’re designing
    the relation­ships, the recipe.”
    —Erik van Blokland
  42. Donald Knuth’s Metafont
  43. http://www.youtube.com/watch?v=Io6CF7TJWe4
  44. http://prototypo.io
  45. Sitka
  46. The Glass Floor

    or,

    The Irony of 100–900

  47. Toward a Variable Font Format

  48. Static fonts
  49. Variable fonts
  50. Variable fonts
  51. Static vs. Variable Fonts

    As static fonts As variable fonts
    Weights 3 Virtually infinite
    Widths 3 Virtually infinite
    Masters 9 4
    Files 9 1
    Total Data @ 120 kB/master 1,080 kB 480 kB
    Download time @ 500 kB/s 2.16 sec 0.96 sec
    Ping time @ 100 ms/file 0.9 sec 0.1 sec
    Total time 2.96 sec 1.06 sec
  52. “Detect & Serve”

  53. http://alistapart.com/
  54. Font-To-Width

    (FTW!)
  55. http://font-to-width.com
  56. The Future

  57. Thanks.

    • @NickSherman

    • nick@nicksherman.com