Interruptions, Introductions & Seductions (Kerning 2016)

Web typography talk given at Kerning 2016.

Transcript

1. ,Introductions, Interruptions & Seductions
   Richard Rutter, Clearleft
   Kerning 2016ɾFaenza, Italia
2. book.webtypography.net
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
11. INTERR
    UPTION
    Immersion
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.
24. TEDxBedford
25. helsenorge.no
26. mkshft.org
27. www.cleopatra-marina.gr
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 “
39. Photo: Adam Twardoch
40. Proxima Nova Proxima Nova Proxima Nova
41. googlesciencefair.com
45. Strangelove
48. bentonmodern.webtype.com
50. wellcomecollection.org/mindcraft
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; } }
    }
57. <h1 class="dlig"> .dlig { font-variant-ligatures: discretionary-ligatures; font-feature-settings:"dlig" 1;
    }
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
64. thegreatdiscontent.com
71. sizecalc.com
72. sizecalc.com
75. 32 24 19 16 13 iOS scale 68 42 26 16 10 Golden ratio scale 36 24 18 16 14 Classical (diatonic) scale
80. h1 { font-size: 13vh; }
88. typecast.com
89. book.webtypography.net
91. Photo: Indra Kupferschmid
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