UX Meetup #23: Besser als Print – Lesetypografie für das Web (Martin Hallmann und Timo Dinkler, Accenture Interactive)

Design ist sexy, und das Web bietet enorme Möglichkeiten, damit das so ist und bleibt. Im Fokus steht das Nutzungserlebnis, das sich auch durch Makro- und Mikrotypografie für eine Vielzahl von Geräten feingranular gestalten lässt.

Martin Hallmann und Timo Dinkler, UX/UI Designer bzw. UX Manager bei Accenture Interactive, laden ein auf eine Exkursion zu Grundlinienrastern und gerätespezifischer Lesetypografie und zeigen, wie freie Designkonzepte jenseits der geläufigen 12-Spalten-Layouts gelingen. Sie verbinden mit ihrem Vortrag Design und Frontend und reden dabei auch über CSS und Schriftgestaltung.

Transcript

1. @mostlypainless
2. @mostlypainless Lesetypografie für das Web Martin Hallmann · Timo Dinkler
3. @mostlypainless Martin @mostlypainless Timo @timoken
4. @mostlypainless Die Gestalt des Webs
5. @mostlypainless
6. @mostlypainless Ag 7 H C
7. @mostlypainless Layout Hacks: HTML Tables
8. @mostlypainless Layout Hacks: Float
9. @mostlypainless Layout Hacks: Float
10. @mostlypainless 12 Column Grid 1024px 960 px 12 × 60px + 20px 16 × 45px + 20px
11. @mostlypainless Spaltenlayout- Konstruktoren Flex Grid
12. @mostlypainless CSS Flexbox 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 https://marina-ferreira.github.io/tutorials/css/flexbox/
13. @mostlypainless CSS Flexbox https://marina-ferreira.github.io/tutorials/css/flexbox/ 1 222 33333 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3
14. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3 4 5 6 7
15. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
16. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
17. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
18. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
19. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
20. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
21. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
22. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
23. @mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3
24. @mostlypainless Deine Experience wird nie so erlebt, wie Du erwartet hattest
25. @mostlypainless Magisches Papier
26. @mostlypainless Magisches Papier
27. @mostlypainless Magisches Papier
28. @mostlypainless Magisches Papier
29. @mostlypainless Magisches Papier
30. @mostlypainless Magisches Papier
31. @mostlypainless Magisches Papier
32. @mostlypainless Magisches Papier
33. @mostlypainless 10 Minuten Break-Out
34. @mostlypainless Möglichkeiten
35. @mostlypainless Globale Verteilung: Endgeräte Desktop vs Mobile vs Tablet Market Share Worldwide - April 2020 Mobile 53.81% Desktop 43.27% Tablet 2.92%
36. @mostlypainless 360 375 414 640 667 896 800 768 601 962 1024 1280 1366 1536 1920 360 375 414 601 640 667 864 962 1080 1280 800 896 1024
37. @mostlypainless 24px Grid Oleg Popov
38. @mostlypainless 24px Grid 1 ÷ 1.5 24 6 × 4 16 4 × 4 Oleg Po
39. @mostlypainless 24px Grid 1 (24 ÷ 6 ÷ 2) 2 (24 ÷ 6 ÷ 4) 4 (24 ÷ 6) 16 (24 ÷ 1.5) 24 12 (24 ÷ 2) 8 (24 ÷ 3) 1 ÷ 1.5 24 6 × 4 16 4 × 4 Ole
40. @mostlypainless Ole 16 4 × 4 24 6 × 4 1 ÷ 1.5 24px Grid 1 (24 ÷ 6 ÷ 2) 2 (24 ÷ 6 ÷ 4) 4 (24 ÷ 6) 16 (24 ÷ 1.5) 24 12 (24 ÷ 2) 8 (24 ÷ 3) 48 (24 × 2) 72 (24 × 3)
41. @mostlypainless 1 × baseline Außenabstand n × baseline Inhalt Begrenzungsrahmen 1 × baseline Außenabstand Jede Dimension ist ein Vielfaches des Grundlinien- abstands
42. @mostlypainless 1.5 × baseline Außenabstand 4 × baseline Inhalt 1.5 × baseline Außenabstand Gebrochene Vielfache werden aufaddiert 6 × baseline Begrenzungsrahmen 0.5 × baseline Innenabstand 0.5 × baseline Innenabnstand
43. @mostlypainless
44. @mostlypainless
45. @mostlypainless Wenn Du heute morgen schon sechs unmöglic Dinge getan hast, warum dann nicht als sieben zum Frühstück ins Milliways, das Restaurant am des Universums? York, wars and so on—whilst all the dolphins ha done was muck about in the water having a go time. But conversely, the dolphins had always believed that they were far more intelligent tha man—for precisely the same reasons. I'd far rather be happy than right any day. 6 I'd far rather be happy than right any day. I'd far rather be happy than right any day. × 1.618 × 1.618
46. @mostlypainless
47. @mostlypainless
48. @mostlypainless
49. @mostlypainless
50. @mostlypainless
51. @mostlypainless I'd far rather be happy than right any day. I'd far rather be happy than right any day. I'd far rather be happy than right I'd far rather be happy I'd far rather be happy Absatz-/Fließtext 16/24px H4 Überschrift 4. Ordnung 20/24px H3 Überschrift 3. Ordnung 32/48px H2 Überschrift 2. Ordnung 56/72px H1 Überschrift 1. Ordnung 68/72px
52. @mostlypainless 1 ÷
53. @mostlypainless
54. @mostlypainless 100% Spaltenbreite
55. @mostlypainless
56. @mostlypainless n × baseline
57. @mostlypainless n × baseline 100% Spaltenbreite
58. @mostlypainless Don‘t panic
59. @mostlypainless Don‘t panic
60. @mostlypainless Don‘t panic
61. @mostlypainless Don‘t panic
62. @mostlypainless Don‘t panic
63. @mostlypainless Don‘t panic
64. @mostlypainless Don‘t panic
65. @mostlypainless Select Input
66. @mostlypainless Select Input Label Label Warnung, Fehlermeldung Infotext
67. @mostlypainless Select Input Label Warnung, Fehlermeldung Infotext
68. @mostlypainless Responsive Typography Aj Aj Aj
69. @mostlypainless Aj Aj Aj Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS
70. @mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS
71. @mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS
72. @mostlypainless Fluid Typography
73. @mostlypainless cm, mm, Q Zentimeter, Millimeter, Quarter-Millimeter 1cm = 96px ÷ 2.54 (96DPI) Einheit Name CSS Maßeinheiten Übersicht in, pc, pt, px Inch, Picas, Points, Pixels 1in = 2.54cm = 96px 1pc = 1/6 of 1in, 1pt = 1/72 of 1in, 1px = 1/96 of 1in em, rem em = Schriftgrösse des übergeordneten Objekts rem = Schriftgrösse des Ursprungs-Objekts ex, ch, lh x-Höhe, Breite des Glyph „0“ (Null), Zeilenhöhe vw, vh, vmin, vmax 1% der Viewport-Breite/-Höhe 1% der kleineren/grösseren Viewport-Dimension
74. @mostlypainless Aj Aj Responsive Typography Fluid Typography
75. @mostlypainless Aj Aj
76. @mostlypainless Aj Aj
77. @mostlypainless Aj Aj
78. @mostlypainless Aj Aj
79. @mostlypainless Aj Aj
80. @mostlypainless Aj Aj
81. @mostlypainless Aj Aj
82. @mostlypainless Aj Aj
83. @mostlypainless Aj Aj
84. @mostlypainless Aj Aj
85. @mostlypainless Aj Aj
86. @mostlypainless Aj Aj
87. @mostlypainless Aj Aj
88. @mostlypainless Aj Aj
89. @mostlypainless Fluides Grid bit.ly/baseline-grid
90. @mostlypainless Fluides Layout Nils Binder, @supremebeing09 https://opentitan.org/
91. @mostlypainless Proportions- Systeme 1÷1.618 Fluid Grid justfeelsrighttm Bento Box
92. @mostlypainless Besser als Print?
93. @mostlypainless Ralf de Jong & Friedrich Forssman Detailtypografie Nachschlagewerk für alle Fragen zu Schrift und Satz ISBN 978-3-87439-642-4 Friedrich Forssman & Hans Peter Willberg Lesetypografie Das Standardwerk für Dozentinnen und Studierende und Praktikerinnen ISBN 978-3-87439-800-8 Antonia M. Cornelius Buchstaben im Kopf Was Kreative über das Lesen wissen sollten, um Leselust zu gestalten ISBN 978-3-87439-895-4
94. @mostlypainless https://www.figma.com/blog/ announcing-auto-layout/ https://help.figma.com/hc/en-us/ articles/360040450513-Create- Layout-Grids-with-Grids-Columns- and-Rows https://medium.com/sketch-app-sources/ auto-layout-introducing-stacks-flexbox- for-sketch-c8a11422c7b5 https://medium.com/sketch-app-sources/ css-grid-einf%C3%BChrung-in-5-minuten- verstehen-und-in-sketch-umsetzen- 9e9e8a16b07e
95. @mostlypainless Vielen Dank Martin Hallmann @mostlypainless