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

@mostlypainless

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

@mostlypainless Martin @mostlypainless Timo @timoken

@mostlypainless Die Gestalt des Webs

@mostlypainless

@mostlypainless Ag 7 H C

@mostlypainless Layout Hacks: HTML Tables

@mostlypainless Layout Hacks: Float

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

@mostlypainless Spaltenlayout- Konstruktoren Flex Grid

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

@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

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

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

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

@mostlypainless Magisches Papier

@mostlypainless 10 Minuten Break-Out

@mostlypainless Möglichkeiten

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

@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

@mostlypainless 24px Grid Oleg Popov

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

@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

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

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

@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

@mostlypainless

@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

@mostlypainless

@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

@mostlypainless 1 ÷

@mostlypainless

@mostlypainless 100% Spaltenbreite

@mostlypainless

@mostlypainless n × baseline

@mostlypainless n × baseline 100% Spaltenbreite

@mostlypainless Don‘t panic

@mostlypainless Select Input

@mostlypainless Select Input Label Label Warnung, Fehlermeldung Infotext

@mostlypainless Select Input Label Warnung, Fehlermeldung Infotext

@mostlypainless Responsive Typography Aj Aj Aj

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

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

@mostlypainless Fluid Typography

@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

@mostlypainless Aj Aj Responsive Typography Fluid Typography

@mostlypainless Aj Aj

@mostlypainless Fluides Grid bit.ly/baseline-grid

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

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

@mostlypainless Besser als Print?

@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

@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

@mostlypainless Vielen Dank Martin Hallmann @mostlypainless

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

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

More Decks by UX Metropole Ruhr

Other Decks in Design

Featured

Transcript