Slide 1

Slide 1 text

@mostlypainless

Slide 2

Slide 2 text

@mostlypainless Lesetypografie für das Web Martin Hallmann · Timo Dinkler

Slide 3

Slide 3 text

@mostlypainless Martin @mostlypainless Timo @timoken

Slide 4

Slide 4 text

@mostlypainless Die Gestalt des Webs

Slide 5

Slide 5 text

@mostlypainless

Slide 6

Slide 6 text

@mostlypainless Ag 7 H C

Slide 7

Slide 7 text

@mostlypainless Layout Hacks: HTML Tables

Slide 8

Slide 8 text

@mostlypainless Layout Hacks: Float

Slide 9

Slide 9 text

@mostlypainless Layout Hacks: Float

Slide 10

Slide 10 text

@mostlypainless 12 Column Grid 1024px 960 px 12 × 60px + 20px 16 × 45px + 20px

Slide 11

Slide 11 text

@mostlypainless Spaltenlayout- Konstruktoren Flex Grid

Slide 12

Slide 12 text

@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/

Slide 13

Slide 13 text

@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

Slide 14

Slide 14 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3 4 5 6 7

Slide 15

Slide 15 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 16

Slide 16 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 17

Slide 17 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 18

Slide 18 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 19

Slide 19 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 20

Slide 20 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 21

Slide 21 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 22

Slide 22 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 23

Slide 23 text

@mostlypainless CSS Grid https://css-tricks.com/snippets/css/complete-guide-grid/ 1 2 3

Slide 24

Slide 24 text

@mostlypainless Deine Experience wird nie so erlebt, wie Du erwartet hattest

Slide 25

Slide 25 text

@mostlypainless Magisches Papier

Slide 26

Slide 26 text

@mostlypainless Magisches Papier

Slide 27

Slide 27 text

@mostlypainless Magisches Papier

Slide 28

Slide 28 text

@mostlypainless Magisches Papier

Slide 29

Slide 29 text

@mostlypainless Magisches Papier

Slide 30

Slide 30 text

@mostlypainless Magisches Papier

Slide 31

Slide 31 text

@mostlypainless Magisches Papier

Slide 32

Slide 32 text

@mostlypainless Magisches Papier

Slide 33

Slide 33 text

@mostlypainless 10 Minuten Break-Out

Slide 34

Slide 34 text

@mostlypainless Möglichkeiten

Slide 35

Slide 35 text

@mostlypainless Globale Verteilung: Endgeräte Desktop vs Mobile vs Tablet Market Share Worldwide - April 2020 Mobile 53.81% Desktop 43.27% Tablet 2.92%

Slide 36

Slide 36 text

@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

Slide 37

Slide 37 text

@mostlypainless 24px Grid Oleg Popov

Slide 38

Slide 38 text

@mostlypainless 24px Grid 1 ÷ 1.5 24 6 × 4 16 4 × 4 Oleg Po

Slide 39

Slide 39 text

@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

Slide 40

Slide 40 text

@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)

Slide 41

Slide 41 text

@mostlypainless 1 × baseline Außenabstand n × baseline Inhalt Begrenzungsrahmen 1 × baseline Außenabstand Jede Dimension ist ein Vielfaches des Grundlinien- abstands

Slide 42

Slide 42 text

@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

Slide 43

Slide 43 text

@mostlypainless

Slide 44

Slide 44 text

@mostlypainless

Slide 45

Slide 45 text

@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

Slide 46

Slide 46 text

@mostlypainless

Slide 47

Slide 47 text

@mostlypainless

Slide 48

Slide 48 text

@mostlypainless

Slide 49

Slide 49 text

@mostlypainless

Slide 50

Slide 50 text

@mostlypainless

Slide 51

Slide 51 text

@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

Slide 52

Slide 52 text

@mostlypainless 1 ÷

Slide 53

Slide 53 text

@mostlypainless

Slide 54

Slide 54 text

@mostlypainless 100% Spaltenbreite

Slide 55

Slide 55 text

@mostlypainless

Slide 56

Slide 56 text

@mostlypainless n × baseline

Slide 57

Slide 57 text

@mostlypainless n × baseline 100% Spaltenbreite

Slide 58

Slide 58 text

@mostlypainless Don‘t panic

Slide 59

Slide 59 text

@mostlypainless Don‘t panic

Slide 60

Slide 60 text

@mostlypainless Don‘t panic

Slide 61

Slide 61 text

@mostlypainless Don‘t panic

Slide 62

Slide 62 text

@mostlypainless Don‘t panic

Slide 63

Slide 63 text

@mostlypainless Don‘t panic

Slide 64

Slide 64 text

@mostlypainless Don‘t panic

Slide 65

Slide 65 text

@mostlypainless Select Input

Slide 66

Slide 66 text

@mostlypainless Select Input Label Label Warnung, Fehlermeldung Infotext

Slide 67

Slide 67 text

@mostlypainless Select Input Label Warnung, Fehlermeldung Infotext

Slide 68

Slide 68 text

@mostlypainless Responsive Typography Aj Aj Aj

Slide 69

Slide 69 text

@mostlypainless Aj Aj Aj Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS

Slide 70

Slide 70 text

@mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS

Slide 71

Slide 71 text

@mostlypainless Lorem XL Lorem LG Lorem MD Lorem SM Lorem XS

Slide 72

Slide 72 text

@mostlypainless Fluid Typography

Slide 73

Slide 73 text

@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

Slide 74

Slide 74 text

@mostlypainless Aj Aj Responsive Typography Fluid Typography

Slide 75

Slide 75 text

@mostlypainless Aj Aj

Slide 76

Slide 76 text

@mostlypainless Aj Aj

Slide 77

Slide 77 text

@mostlypainless Aj Aj

Slide 78

Slide 78 text

@mostlypainless Aj Aj

Slide 79

Slide 79 text

@mostlypainless Aj Aj

Slide 80

Slide 80 text

@mostlypainless Aj Aj

Slide 81

Slide 81 text

@mostlypainless Aj Aj

Slide 82

Slide 82 text

@mostlypainless Aj Aj

Slide 83

Slide 83 text

@mostlypainless Aj Aj

Slide 84

Slide 84 text

@mostlypainless Aj Aj

Slide 85

Slide 85 text

@mostlypainless Aj Aj

Slide 86

Slide 86 text

@mostlypainless Aj Aj

Slide 87

Slide 87 text

@mostlypainless Aj Aj

Slide 88

Slide 88 text

@mostlypainless Aj Aj

Slide 89

Slide 89 text

@mostlypainless Fluides Grid bit.ly/baseline-grid

Slide 90

Slide 90 text

@mostlypainless Fluides Layout Nils Binder, @supremebeing09 https://opentitan.org/

Slide 91

Slide 91 text

@mostlypainless Proportions- Systeme 1÷1.618 Fluid Grid justfeelsrighttm Bento Box

Slide 92

Slide 92 text

@mostlypainless Besser als Print?

Slide 93

Slide 93 text

@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

Slide 94

Slide 94 text

@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

Slide 95

Slide 95 text

@mostlypainless Vielen Dank Martin Hallmann @mostlypainless