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

Interruptions, Introductions & Seductions (Kerning 2016)

Interruptions, Introductions & Seductions (Kerning 2016)

Web typography talk given at Kerning 2016.

4dc4891f8146f79ced911d665f2dedef?s=128

Richard Rutter

June 06, 2016
Tweet

Transcript

  1. ,Introductions, Interruptions & Seductions Richard Rutter, Clearleft Kerning 2016ɾFaenza, Italia

  2. book.webtypography.net

  3. None
  4. None
  5. Photo: Marc Thiele

  6. It is only logical to say that a web designer

    should get good training in typography.” Oliver Reichenstein, Web Design is 95% Typography https://ia.net/know-how/the-web-is-all-about-typography-period “
  7. Photo: Indra Kupferschmid

  8. None
  9. None
  10. None
  11. INTERR UPTION Immersion

  12. None
  13. None
  14. Good quality typography is responsible for greater engagement during reading.”

    Dr. Kevin Larson (Microsoft) and Dr. Rosalind W. Picard (MIT) “
  15. Good typography induces a good mood.” Dr. Kevin Larson (Microsoft)

    and Dr. Rosalind W. Picard (MIT) “
  16. Good typography puts you in a good mood!

  17. Body text sampler

  18. Even if people are not consciously aware of the type

    they’re reading, they’ll certainly be affected by it.” Tobias Frere-Jones, Helvetica (dir. Gary Huswitt, 2007). “
  19. bentonmodern.webtype.com

  20. You can influence the way people feel.

  21. I hate obtuse theoretical mathematics

  22. This is a story about someone who lived in Happyland.

    His name was Mr Happy and he was fat and round, and happy. One day Mr Happy went for a walk in the woods.
  23. None
  24. TEDxBedford

  25. helsenorge.no

  26. mkshft.org

  27. www.cleopatra-marina.gr

  28. None
  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. Beatrice Ward

  37. People who love ideas must have a love of words.

    They will take a vivid interest in the clothes that words wear.” Beatrice Warde, The Crystal Goblet “
  38. None
  39. Photo: Adam Twardoch

  40. Proxima Nova Proxima Nova Proxima Nova

  41. googlesciencefair.com

  42. None
  43. None
  44. None
  45. Strangelove

  46. None
  47. None
  48. bentonmodern.webtype.com

  49. None
  50. wellcomecollection.org/mindcraft

  51. None
  52. tuxedono2.com

  53. <h1 class="swsh"> .swsh { font-variant-alternates: swash(1); }

  54. <h1 class="swsh"> .swsh { font-variant-alternates: swash(1); @supports not (font-variant-alternates: swash(1))

    { body { font-feature-settings: "swsh" 1; } } }
  55. None
  56. None
  57. <h1 class="dlig"> .dlig { font-variant-ligatures: discretionary-ligatures; font-feature-settings:"dlig" 1; }

  58. None
  59. <h1 class="ss01"> .dlig { font-variant-alternates: styleset(1); font-feature-settings:"ss01" 1; }

  60. clagnut.com/sandbox/css3

  61. clagnut.com/sandbox/css3

  62. None
  63. None
  64. thegreatdiscontent.com

  65. None
  66. None
  67. None
  68. None
  69. None
  70. None
  71. sizecalc.com

  72. sizecalc.com

  73. None
  74. None
  75. 32 24 19 16 13 iOS scale 68 42 26

    16 10 Golden ratio scale 36 24 18 16 14 Classical (diatonic) scale
  76. None
  77. None
  78. None
  79. None
  80. h1 { font-size: 13vh; }

  81. None
  82. None
  83. None
  84. None
  85. None
  86. None
  87. None
  88. typecast.com

  89. book.webtypography.net

  90. None
  91. Photo: Indra Kupferschmid

  92. None
  93. Which website will you be designing today?

  94. “Have today’s designers “stopped dreaming?” Elliot Jay Stocks “Is web

    design losing “its soul?” Noah Stokes
  95. Don’t be reverential, dogmatic, or ordinary. Interrupt, introduce & seduce.

  96. Richard Rutter, Clearleft @clagnut Slides: webtypography.net/talks/kerning16