Typography and user experience (UX Scotland)

D628cae497f1f6c18186701f6acac301?s=47 mstandage
June 07, 2017

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.

D628cae497f1f6c18186701f6acac301?s=128

mstandage

June 07, 2017
Tweet

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
  4. None
  5. None
  6. None
  7. None
  8. None
  9. 95% of the web is typography @mstandage ia.net/know-how/the-web-is-all-about-typography-period Typography and

    user experience
  10. None
  11. None
  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
  27. None
  28. None
  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

  35. None
  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

  43. None
  44. Variable fonts: one file that acts like multiple fonts @mstandage

    Typography and user experience alistapart.com/article/live-font-interpolation-on-the-web
  45. None
  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