Typography and user experience (UX Scotland)

Typography is much more than choosing typefaces and the visual appearance of a page. It is the primary medium by which we communicate information to our users on the web. In this session, I will look at ways in which we can use typographic design to support people's understanding and improve their chances of finding content that is of interest to them.

This session will look at ways we can use typography to craft and create experiences. It will investigate why typography matters and what typography does.

Transcript

1. @mstandage mstandage.com Typography and user experience Using typography to enhance 
 user experience
2. @mstandage User experience, typography and information design Typography and user experience
3. Typography is writing with prefabricated letters @mstandage Typography and user experience – Gerrit Noordzij, Royal Academy of Arts in The Hague
9. 95% of the web is typography @mstandage ia.net/know-how/the-web-is-all-about-typography-period Typography and user experience
12. We interpret, divide up, and organise information @mstandage Ruder, Emil., Typographie: a manual of design., (Zurich: Verlag Niggli AG, 1968). Typography and user experience
13. How can we use typography to enhance user experience @mstandage Typography and user experience
14. Hierarchy 
 What are the most important pieces 
 of information to the reader? @mstandage Typography and user experience
15. gov.uk/bank-holidays
16. Proximity
 What are the relationships within 
 the information? @mstandage Typography and user experience
17. alistapart.com
18. @mstandage Differentiation
 What are the different types 
 of information? Typography and user experience
19. nytimes.com
20. fontface.ninja
21. Users won’t read your text thoroughly in a word-by-word manner @mstandage nngroup.com/articles/f-shaped-pattern-reading-web-content/ Typography and user experience
22. Integrating text and images improves meaningfulness @mstandage Typography in data visualisation Chandler, Paul, John Sweller., ‘Cognitive load theory and the format of instruction’ in Cognition 
 and instruction., (1991)
23. Typographic variables • typeface • margins, spacing and indentation • size • weight: bold, regular • style: italics, oblique • case: lowercase, uppercase, small caps • letter spacing • colour and opacity
24. Typefaces that make it work @mstandage Typography and user experience
25. Legibility is often a matter of typeface choice @mstandage Typography and user experience
26. A modern sans serif is often appropriate for screen design @mstandage Typography and user experience
29. Open counters @mstandage FS MillBank Typography and user experience
30. Character differentiation @mstandage FS MillBank Typography and user experience
31. Open terminals @mstandage FS MillBank Typography and user experience
32. Recognisable numerals @mstandage FS MillBank Typography and user experience
33. Well spaced @mstandage FS MillBank Typography and user experience
34. Large x-height @mstandage FS MillBank Typography and user experience
36. @mstandage
37. A legible typeface can become unreadable through poor setting Craig, James., William Bevington, Irene Koral Scala, Designing with type: the essential guide to typography., (New York City: Watson Guptil, 2006) @mstandage Typography and user experience
38. Where are things going next? @mstandage Typography and user experience
39. More typographic control is becoming available in the browser @mstandage Typography and user experience
40. Ligatures @mstandage blog.fonts.com/2016/06/to-ligature-or-not-to-ligature/ Typography and user experience
41. Kerning @mstandage Typography and user experience blog.typekit.com/2014/02/05/kerning-on-the-web/
42. Other nice features @mstandage webkit.org/blog/5735/css-font-features/ Typography and user experience
44. Variable fonts: one file that acts like multiple fonts @mstandage Typography and user experience alistapart.com/article/live-font-interpolation-on-the-web
46. To conclude @mstandage Typography in data visualisation
47. Typography aides and enhances understanding @mstandage Typography in data visualisation
48. Typography removes ambiguity and reduces misinterpretation @mstandage Typography in data visualisation
49. Choosing the right typeface is important @mstandage Typography in data visualisation
50. Typographic control on the web is only going to get better @mstandage Typography in data visualisation
51. @mstandage mstandage.com Thank you
52. @mstandage mstandage.com Typography and user experience Using typography to enhance 
 user experience