Typography and user experience (UX Camp Brighton)

D628cae497f1f6c18186701f6acac301?s=47 mstandage
March 25, 2017

Typography and user experience (UX Camp Brighton)

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.

D628cae497f1f6c18186701f6acac301?s=128

mstandage

March 25, 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. 95% of the web is typography @mstandage ia.net/know-how/the-web-is-all-about-typography-period Typography and

    user experience
  5. None
  6. None
  7. We interpret, divide up, and organise information @mstandage Ruder, Emil.,

    Typographie: a manual of design., (Zurich: Verlag Niggli AG, 1968). Typography and user experience
  8. How can we use typography to enhance user experience @mstandage

    Typography and user experience
  9. Hierarchy 
 What are the most important pieces 
 of

    information to the reader? @mstandage Typography and user experience
  10. gov.uk/bank-holidays

  11. Proximity
 What are the relationships within 
 the information? @mstandage

    Typography and user experience
  12. alistapart.com

  13. @mstandage Differentiation
 What are the different types 
 of information?

    Typography and user experience
  14. nytimes.com

  15. fontface.ninja

  16. 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
  17. Typographic variables • typeface • margins, spacing and indentation •

    size • weight: bold, regular • style: italics, oblique • case: lowercase, uppercase, small caps • letter spacing • colour and opacity
  18. Typefaces that make it work @mstandage Typography and user experience

  19. Legibility is often a matter of typeface choice @mstandage Typography

    and user experience
  20. A modern sans serif is often appropriate for screen design

    @mstandage Typography and user experience
  21. None
  22. None
  23. Open counters @mstandage FS MillBank Typography and user experience

  24. Character differentiation @mstandage FS MillBank Typography and user experience

  25. Open terminals @mstandage FS MillBank Typography and user experience

  26. Recognisable numerals @mstandage FS MillBank Typography and user experience

  27. Well spaced @mstandage FS MillBank Typography and user experience

  28. Large x-height @mstandage FS MillBank Typography and user experience

  29. 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
  30. @mstandage mstandage.com Thank you

  31. @mstandage mstandage.com Typography and user experience Using typography to enhance

    
 user experience