2017 The Impact of Typography in UX/UI

Modern interaction design - see Flat Design - is more than ever based on letters.

This talk highlights strong examples and explains how to achieve an aesthetic and powerful set of typography for any project, and how to handle it in the digital workflow.

Transcript

1. T Y P O G R A P H Y I N U X / U I K R U N C H T I M E I NT E RACT IV E
2. „ T Y P O G R A P H Y I N U X / U I WEBDESIGN IS 95% TYPOGRAPHY Oliver Reichenstein, iA Labs (2006)
3. T Y P O G R A P H Y I N U X / U I Webdesign 95% typography
4. Spotify
5. Spotify
6. Spotify
7. Bloomberg
8. Bloomberg
9. Bloomberg
10. Bloomberg
11. Verizon
12. Verizon
13. Verizon
14. Verizon
15. Verizon
16. Verizon
17. Verizon
18. Verizon
19. Verizon
20. Verizon
21. T Y P O G R A P H Y I N U X / U I How to achieve
23. T Y P O G R A P H Y I N U X / U I Key criteria • Harmony • Aesthetics • Readability • Orientation • Brand identity
24. T Y P O G R A P H Y I N U X / U I Key criteria • Harmony (or not) • Aesthetics (or not) • Readability (or not) • Orientation (or not) • Brand identity (or not)
25. Verizon
26. T Y P O G R A P H Y I N U X / U I Harmony • Typeface selection is everything Chicken Tasty Den grossen Leckeren gib es jetzt auch mit feinem Pouletfleisch Neu!
27. „ T Y P O G R A P H Y I N U X / U I EINE SELTENERE QUALITÄTSSCHRIFT IST EIN WIRKUNGSVOLLES BRANDINGSINTRUMENT. Frank Rausch, Raureif, PAGE 03.17
28. T Y P O G R A P H Y I N U X / U I Harmony • Contrast
29. T Y P O G R A P H Y I N U X / U I Harmony • Hierarchy
31. Typographic scale
32. Typographic scale
33. T Y P O G R A P H Y I N U X / U I Harmony • Secondary fonts
34. T Y P O G R A P H Y I N U X / U I Aesthetics • Current looks
35. T Y P O G R A P H Y I N U X / U I Aesthetics • Space to breathe
36. T Y P O G R A P H Y I N U X / U I Aesthetics • Space to breathe
37. T Y P O G R A P H Y I N U X / U I Aesthetics • Coherent line-heights
38. T Y P O G R A P H Y I N U X / U I Readability • 30-40 characters per line
39. T Y P O G R A P H Y I N U X / U I Readability • Smoothness
40. T Y P O G R A P H Y I N U X / U I Readability • „Floor fades“
41. T Y P O G R A P H Y I N U X / U I Readability • Again, space to breathe
45. T Y P O G R A P H Y I N U X / U I Orientation • Guide the eyes across the page
46. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
47. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
48. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
49. „ T Y P O G R A P H Y I N U X / U I THE SMALLER THE SCREEN THE MORE IMPORTANT THE CHOSEN FONT. Bas Jacobs, Underware Type Foundry
50. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
51. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
52. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
53. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
54. T Y P O G R A P H Y I N U X / U I Brand identity • Strong character
55. T Y P O G R A P H Y I N U X / U I Why is it important?
56. T Y P O G R A P H Y I N U X / U I Why is it important? • User acceptance • Engagement • Retention • Brand image • Workflow
57. Alexander Meinhardt krunchtime.org KRUN C H T I M E I NT E R ACT I V E