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.

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 IEINE 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
KRUNCHTI M E I NTE RACTIVE