Marketing Glossar

2.413 Fachbegriffe aus 22 Bereichen des Online Marketings

Typografie (UI)

Definition: Typografie im UI-Design (auch: UI-Typografie, Interface-Typografie, Screen-Typografie) bezeichnet die Gestaltung von Schrift in digitalen Interfaces mit dem Ziel Lesbarkeit, visuelle Hierarchie, Markenidentität und kognitive Führung zu optimieren – durch systematische Entscheidungen über Schriftarten, Schriftgrößen-Hierarchie (Type-Scale), Schriftgewichte, Zeilenabstand (Line-Height), Zeilenlänge (Measure), Buchstabenabstand (Letter-Spacing/Tracking) und Absatzabstand. Typografie-Parameter und Richtwerte: Schriftgröße Body-Text (16px/1rem Minimum; 17–18px optimal für lange Lesetexte; iOS Dynamic Type Standard 17pt; Google Material Design Body Large 16sp); Zeilenabstand (line-height: 1,4–1,6× Schriftgröße für Body-Text; 1,2–1,3× für Headlines; größer als 1,6 = zu locker; kleiner als 1,3 = zu eng für lange Texte); Zeilenlänge/Measure (50–75 Zeichen pro Zeile nach Robert Bringhurst; optimal ca. 65–66 Zeichen; CSS max-width: 65ch auf Text-Container); Buchstabenabstand/Tracking (Body-Text: 0 oder minimal negativ bei großen Schriften; Headlines ab 24px: leicht negative letter-spacing -0.02em bis -0.05em; All-Caps-Text: immer positives letter-spacing +0.05em bis +0.1em); Typografische Hierarchie: Größenunterschiede zwischen Ebenen sollten mindestens 25–30% betragen um klar wahrnehmbar zu sein (Modular Scale).

Erläuterung

Jan Tschichold (Leipzig; Deutschland; danach Basel; Schweiz; «Die neue Typographie», Verlag des Bildungsverbandes der Deutschen Buchdrucker, 1928; «Asymmetric Typography», Reinhold Publishing, 1967) revolutionierte die Typografie-Theorie durch die Propagierung des funktionalen Ansatzes: Typografie soll dem Leser dienen nicht dem Designer; Klarheit und Funktion über Dekoration; Tschicholds Prinzipien – Weiß-Raum als aktives Gestaltungselement; Asymmetrie; klare Hierarchie durch Größenkontrast – sind direkte Vorläufer moderner UI-Typografie-Prinzipien. Robert Bringhurst (Vancouver; Kanada; Typograf und Dichter; «The Elements of Typographic Style», Hartley & Marks Publishers, 1992; vierte Auflage 2012) verfasste das einflussreichste moderne Typografie-Referenzwerk: Bringhurst definierte die 50–75-Zeichen-Zeilenlängen-Empfehlung empirisch aus Leserlichkeitsforschung; er dokumentierte Proportions-Regeln für Zeilenabstand (2–3 Punkte größer als Schriftgröße bei 12pt-Schrift); Modular-Scale-Prinzip (Schriftgrößen harmonisch aufeinander aufbauend); «Typographie is the craft of endowing human language with a durable visual form» – seine Definition kommuniziert dass Screen-Typografie dieselben Prinzipien hat wie Print-Typografie, nur andere technische Constraints. Die Lesbarkeitsdebatte Serif vs. Sans-Serif: Miles Tinker (University of Minnesota; Minneapolis; MN; «Legibility of Print», Iowa State University Press, 1963) und Matthew Lickiss (1990er Bildschirm-Lesbarkeitsstudien) zeigten in Print-Umgebungen Serifenschriften schneller lesbar als serifenlose (Serifen erleichtern horizontale Augenbewegung); im Screen-Kontext (niedrigauflösende Bildschirme; 72–96dpi; 1990er–2000er): serifenlose Schriften besser lesbar wegen Pixel-Rendering-Qualität; auf modernen Retina/HiDPI-Displays (200+dpi): der Unterschied ist minimiert; Entscheidung heute: Markenidentität und Ästhetik wichtiger als Lesbarkeitsunterschied; beiden Schriftfamilien sind auf modernen Displays gut lesbar. Erik Spiekermann (Berlin; Deutschland; Meta Design; FontShop; typeface.com; «Stop Stealing Sheep and Find Out How Type Works», Adobe Press, 1993) und Matthew Carter (Carter & Cone Type; Cambridge; MA; Designer von Georgia und Verdana für Microsoft 1996; Tahoma) entwickelten Screen-optimierte Schriften: Verdana (Microsoft; Matthew Carter; 1996) war erste Schrift die explizit für niedrig-aufgelöste Bildschirme designed wurde; große x-Höhe; weite Buchstabenabstände; Georgia (Carter 1993; Microsoft 1996) war erste Serifen-Schrift für Bildschirme optimiert. Rasmus Andersson (Schweden; «Inter» Open Source Schrift; 2017; rsms.me/inter) entwickelte Inter als meistgenutzte Open-Source-Interface-Schrift: Inter ist für Bildschirme optimiert (große x-Höhe; klare Buchstabenformen; hervorragendes Rendering bei kleinen Größen); wurde Standard-UI-Schrift für viele Design-Systeme und Produkte (Linear; Notion; GitHub; Vercel; viele Startup-Produkte); Figma nutzte Inter als Standard-Schrift. Die Variable-Fonts-Revolution (OpenType Font Variations Spezifikation; Apple/Google/Microsoft/Adobe; September 2016; OpenType 1.8) ermöglichte eine Schriftdatei mit kontinuierlichen Variationsachsen statt separate Dateien für jedes Gewicht: eine Variable-Font-Datei ersetzt 8–12 statische Schrift-Dateien; Implementierung: font-variation-settings: «wght» 550 für Gewicht; «wdth» 90 für Breite; CSS font-weight akzeptiert jetzt Werte von 1–1000 statt nur 100er-Stufen; kleinere HTTP-Requests; Google Fonts bietet über 200 Variable Fonts (2024); Roboto Flex; Inter; Playfair Display Variable als populäre Beispiele.

Type-Scale, Hierarchie und System-Typografie

CSS-Typografie-Techniken und Fluid Typography

Praxistipp: Drei sofort umsetzbare Typografie-Verbesserungen mit dem größten Wirkungsgrad: (1) Setzen Sie max-width: 65ch auf alle Text-Container – Zeilenlängen über 80 Zeichen machen langes Lesen signifikant anstrengender; (2) Kontrollieren Sie Ihr line-height: Body-Text unter 1,4 ist zu eng; über 1,7 zu locker; 1,5 ist ein solider Ausgangspunkt für deutsche Lesetexte; (3) Testen Sie Ihre Schriftgrößen auf echten Geräten in echter Umgebung: viele Designer überprüfen Typografie auf großen Retina-Monitoren und vergessen dass ein erheblicher Teil der Nutzer auf mittelgroßen Smartphone-Displays mit reduzierter Helligkeit bei schlechten Lichtverhältnissen liest – dort kann selbst 16px Body-Text an Lesbarkeit verlieren.