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

Introductions, Interruptions & Seductions (makingWeb_2.16)

4dc4891f8146f79ced911d665f2dedef?s=47 Richard Rutter
September 22, 2016

Introductions, Interruptions & Seductions (makingWeb_2.16)

Web typography talk given at MakingWeb conference in Oslo, 2016.

4dc4891f8146f79ced911d665f2dedef?s=128

Richard Rutter

September 22, 2016
Tweet

Transcript

  1. ,Introductions, Interruptions & Seductions Richard Rutter, Clearleft MakingWEB_2.16ɾOslo, Norway

  2. book.webtypography.net

  3. None
  4. None
  5. Richard Rutter, Clearleft @clagnut rich@clearleft.com Slides: speakerdeck.com/clagnut

  6. Photo: Marc Thiele

  7. 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 “
  8. Photo: Indra Kupferschmid

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

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

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

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

  18. Body text sampler Depot New Regular Renegade Divers has been

    operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. PF Beau Sans Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Akagi Medium Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Shaker Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. FS Me Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Adele Sans Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Runda Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Franklin Gothic Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. LFT Etica Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands. Effra Regular Renegade Divers has been operating since 1998. We offer a range of liveaboard PADI-registered diving holidays. Our main destination for PADI training is the Red Sea. We also offer the best Maldives liveaboards and other leading dive vessels in the Indian Ocean, Indonesia, and the Galapagos Islands.
  19. 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). “
  20. bentonmodern.webtype.com

  21. You can influence the way people feel.

  22. I hate obtuse theoretical mathematics

  23. 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.
  24. None
  25. TEDxBedford

  26. helsenorge.no

  27. mkshft.org

  28. www.cleopatra-marina.gr

  29. None
  30. None
  31. None
  32. None
  33. None
  34. None
  35. None
  36. None
  37. None
  38. None
  39. dconstruct.org

  40. Beatrice Ward

  41. 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 “
  42. None
  43. None
  44. Good design is about firstly making people want to read,

    then about telling stories.” Mark Porter, former Creative Director at the Guardian “
  45. None
  46. Photo: Adam Twardoch

  47. None
  48. None
  49. Proxima Nova Proxima Nova Proxima Nova

  50. googlesciencefair.com

  51. None
  52. None
  53. None
  54. None
  55. Strangelove

  56. None
  57. None
  58. bentonmodern.webtype.com

  59. None
  60. wellcomecollection.org/mindcraft

  61. None
  62. tuxedono2.com

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

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

    { body { font-feature-settings: "swsh" 1; } } }
  65. None
  66. None
  67. <h1 class="dlig"> .dlig { font-variant-ligatures: discretionary-ligatures; font-feature-settings:"dlig" 1; }

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

  70. clagnut.com/sandbox/css3

  71. clagnut.com/sandbox/css3

  72. None
  73. None
  74. thegreatdiscontent.com

  75. None
  76. None
  77. None
  78. None
  79. None
  80. None
  81. sizecalc.com

  82. sizecalc.com

  83. None
  84. None
  85. None
  86. 32 24 19 16 13 iOS scale 68 42 26

    16 10 Golden ratio scale 36 24 18 16 14 Classic Renaissance typography scale
  87. None
  88. None
  89. None
  90. h1 { font-size: 13vh; }

  91. None
  92. None
  93. But… performance? 1. Payload file size 2. Rendering timing

  94. WOFF2 provides improved compression and thus lower use of network

    bandwidth, while still allowing fast decompression even on mobile devices. ” WOFF File Format 2.0, W3C Candidate Recommendation “
  95. None
  96. Strongman Hafþór Júlíus Björnsson is launching his own brand of

    vodka.
  97. Strongman Hafþór Júlíus Björnsson is launching his own brand of

    vodka.
  98. None
  99. Aventurier

  100. filamentgroup.com/lab/font-events.html

  101. css-tricks.com/font-display-masses/

  102. @font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; src:

    url("OpenSans.woff2") format("woff2"), url("OpenSans.woff") format("woff"); font-display: swap; }
  103. auto default swap fallback text is shown immediately until the

    webfont loads fallback text invisible for <100ms then shown with fallback font until webfont loads optional like fallback but browser decides whether a webfont should be used at all (depends on connection speed)
  104. zachleat.com/web/comprehensive-webfonts/

  105. zachleat.com/web/comprehensive-webfonts/

  106. Credit: New Statesman

  107. Photo: Indra Kupferschmid

  108. None
  109. Which website will you be designing today?

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

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

  112. Richard Rutter, Clearleft @clagnut rich@clearleft.com Slides: speakerdeck.com/clagnut