Schriftgröße (UX)

Definition: Schriftgröße im UX-Kontext bezeichnet die Größe von Textzeichen auf digitalen Oberflächen – gemessen in CSS-Einheiten (px, rem, em, vw, clamp()) – und beeinflusst direkt Lesbarkeit, Barrierefreiheit, kognitive Belastung und die Wahrnehmung von Hierarchie in einem Interface. Schriftgrößen-Mindeststandards: 16px für Body-Text (CSS-Pixel; entspricht Browserstandard; iOS Safari automatischer Zoom-Trigger unter 16px auf Input-Feldern); 14px Untergrenze für unterstützenden Text (Beschriftungen, Captions) auf Desktop; 11px absolute Untergrenze für Mikrotext (z.B. Copyright-Hinweise); auf Mobile generell 1–2px größer als Desktop-Äquivalent da Betrachtungsabstand geringer. CSS-Einheiten für Schriftgröße: px (Pixel; absolut; ignoriert Browser-Schriftgröße-Einstellungen des Nutzers; WCAG-kritisch); em (relativ zum Eltern-Element; kaskadiert; rechnerisch komplex); rem (Root-em; relativ zum html-Element; 1rem = Browserstandard von 16px; respektiert Nutzer-Schriftgrößeneinstellungen; bevorzugte Einheit für Schriftgrößen); vw/vi (Viewport Width/Inline; für responsive, viewport-basierte Schriftgrößen; schlecht kontrollierbar allein); clamp(min, preferred, max): css clamp(1rem, 1rem + 1vw, 1.25rem) – flexible Schriftgröße zwischen Minimum und Maximum; moderne Fluid-Typography-Methode. Typografische Hierarchie-Funktionen: Größenunterschiede kommunizieren Priorität (größer = wichtiger); erleichtern Scanning (Nutzer erfassen Struktur ohne zu lesen); signalisieren Zusammenhänge (gleiche Schriftgröße = gleiche Hierarchieebene); reduzieren kognitive Last durch klare visuelle Differenzierung.

Erläuterung

Die wissenschaftliche Grundlage für Mindest-Schriftgrößen auf Bildschirmen entstammt aus der Ophthalmologie und der Lesbarkeitswissenschaft. Der Snellen-Optotyp (Hermann Snellen; Augenarzt; Universität Utrecht; Utrecht; Niederlande; 1862) definierte den Standard für Sehschärfe-Messung: 1.0 Visus (normale Sehschärfe) erfordert die Fähigkeit Buchstaben mit einem Winkel von 1 Bogenminute zu unterscheiden; bei einem typischen Lesabstand von 60cm entspricht dies einer Mindestbuchstabenhöhe von circa 1,75mm; auf einem 96dpi-Monitor (Standard) entspricht das 6–7px; empirisch liegt die komfortable Mindestgröße jedoch höher. Tinker's klassische Lesbarkeitsforschung (Miles Tinker; University of Minnesota; Minneapolis; MN; «Legibility of Print», Iowa State University Press, 1963) etablierte 10–12pt als Optimum für Fließtext auf Papier; für Bildschirm-Rendering gelten höhere Mindestgrößen da Screen-Rendering weniger scharf ist als Druck (allerdings haben Retina/HiDPI-Displays die Differenz deutlich reduziert). Apple definierte in den ursprünglichen Macintosh Human Interface Guidelines (Apple Computer; Cupertino; CA; 1985; erste Veröffentlichung) 12pt als Mindestgröße für Bildschirmtext auf einem 72dpi-Monitor; die iOS Human Interface Guidelines (Apple; 2007 für iPhone; aktualisiert 2023) spezifizieren 17pt als Standard-Body-Text-Größe in iOS-Apps; Dynamic Type (seit iOS 7; 2013) erlaubt Nutzern Schriftgröße systemweit anzupassen – alle gut entwickelten iOS-Apps respektieren Dynamic Type. Google Material Design 3 (2021; Google; Mountain View; CA) definiert ein Type-Scale-System: Display Large (57sp), Display Medium (45sp), Display Small (36sp), Headline Large (32sp), Headline Medium (28sp), Headline Small (24sp), Title Large (22sp), Title Medium (16sp/Medium weight), Title Small (14sp), Label Large (14sp), Label Medium (12sp), Label Small (11sp), Body Large (16sp), Body Medium (14sp), Body Small (12sp); sp (scale-independent pixel) auf Android entspricht dp bei Standard-Schriftgröße aber skaliert mit Nutzer-Textgröße-Einstellung. WCAG 2.1 definierte spezifische Schriftgrößen-Anforderungen: WCAG 1.4.3 Contrast (Level AA): für «Large Text» (18pt/24px regulär oder 14pt/18,67px fett) gilt niedrigeres Kontrastverhältnis-Minimum von 3:1 (statt 4.5:1 für normalen Text); WCAG 1.4.4 Resize Text (Level AA): Text muss bis 200% Browser-Zoom vergrößerbar sein ohne Verlust von Inhalt oder Funktionalität; WCAG 1.4.12 Text Spacing (Level AA): keine Funktionsverluste wenn Nutzer Line-Height auf 1.5× Schriftgröße, Letter-Spacing auf 0.12em, Word-Spacing auf 0.16em oder Paragraph-Spacing auf 2× Schriftgröße anpasst. Der iOS-Zoom-Bug (seit frühen iOS-Versionen; immer noch relevant in iOS 16+): wenn ein Input-Feld eine font-size von weniger als 16px hat zoomt iOS Safari automatisch den Viewport beim Fokussieren des Feldes; verhindert durch: font-size: 16px minimum auf allen Input, Select, Textarea-Elementen; oder: Meta-Tag user-scalable=no (aber WCAG-Verstoß da Nutzerzoom verhindert).

Typografische Hierarchie, rem und Fluid Typography

Typografische Hierarchie und Schriftgrößen-System: Empfohlene Schriftgrößen-Hierarchie (Desktop; rem-Basis 16px = 1rem): H1: 2.5rem–3rem (40–48px); oft Display-Font; prominenteste Ebene; H2: 1.75rem–2rem (28–32px); Seiten-Haupt-Überschriften; H3: 1.25rem–1.5rem (20–24px); Abschnitts-Überschriften; H4: 1rem–1.125rem (16–18px); Unter-Abschnitte; Body Text: 1rem–1.125rem (16–18px); optimale Lesbarkeit; Caption/Label: 0.75rem–0.875rem (12–14px); Unterstützungs-Text; nie für primären Inhalt; Micro Text: 0.6875rem (11px); Copyright; rechtliche Hinweise; Anpassung für Mobile (alle Größen generell leicht reduzieren): H1 auf Mobile: 1.75rem–2rem; Body bleibt 1rem (Minimum); Tailwind CSS Type-Scale: text-xs (12px), text-sm (14px), text-base (16px), text-lg (18px), text-xl (20px), text-2xl (24px), text-3xl (30px), text-4xl (36px), text-5xl (48px); Modular-Scale-Konzept (Robert Bringhurst; «The Elements of Typographic Style», Hartley & Marks, 1992; Tim Brown; A List Apart; 2011): Schriftgrößen auf einen Maßstabsfaktor (z.B. Goldener Schnitt 1.618; Quinte 1.5; Quarte 1.333) aufbauen; harmonische Proportionen; typescale.com für interaktive Modular-Scale-Berechnung
rem vs. em vs. px und Nutzer-Zugänglichkeit: px-Problem: font-size: 16px ignoriert die Browser-Schriftgrößen-Einstellung des Nutzers; wenn Nutzer in Chrome «Schriftgröße: Groß» (Standard: 20px statt 16px) wählt: px-Schriften ignorieren das; WCAG 1.4.4 technisch verletzt wenn px-Schriften bei Browser-Zoom nicht skalieren (bei transform-Scaling kein Problem; bei text-only-Zoom schon); rem-Lösung: html { font-size: 100%; } – respektiert Browser-Einstellung des Nutzers; 1rem = Nutzer-Standard (typisch 16px); 1.5rem = 24px; font-size: 62.5% auf html + 1.6rem = 16px ist ein verbreiteter Hack aber bricht Nutzer-Zoom; besser: keine font-size auf html setzen; reines rem nutzen; em-Einsatz: font-size: em für Komponenten die relativ zur aktuellen Schriftgröße skalieren sollen (button padding: 0.5em – skaliert mit Button-Schriftgröße); für Schriftgröße selbst: rem bevorzugt da keine Kaskadierung-Komplexität; vw/vi-Einheiten: font-size: 4vw – auf mobilen Geräten proportional; aber: auf sehr kleinen/großen Viewports unkontrolliert; immer in Kombination mit clamp()
CSS clamp() und Fluid Typography: Fluid Typography Grundprinzip (Mike Riethmuller; 2016; «Precise control over responsive typography»; A List Apart): Schriftgröße wächst linear mit Viewport-Breite zwischen definiertem Minimum und Maximum; CSS clamp() (W3C CSS Values Level 4; Chrome 79+; Firefox 75+; Safari 13.1+; 2020): font-size: clamp(1rem, 0.75rem + 1.5vw, 1.5rem); Minimum: 1rem (16px); Preferred: 0.75rem + 1.5vw (linear wachsend mit Viewport); Maximum: 1.5rem (24px); Berechnungsformel für clamp: preferred = minSize + (maxSize - minSize) * (1vw / (maxViewport - minViewport) * 100); Online-Tools: fluid-type-scale.com; clamp.font-size.app; modernCSS.dev/fluid-typography; Fluid-Type-Scale für gesamte Hierarchie: :root { --step--2: clamp(0.69rem, calc(0.67rem + 0.12vw), 0.78rem); --step--1: clamp(0.83rem, calc(0.79rem + 0.19vw), 0.94rem); --step-0: clamp(1rem, calc(0.94rem + 0.31vw), 1.13rem); --step-1: clamp(1.2rem, calc(1.12rem + 0.44vw), 1.5rem); --step-2: clamp(1.44rem, calc(1.32rem + 0.62vw), 1.88rem); }; Utopia (James Gilyead/Trys Mudford; 2021; utopia.fyi): interaktiver Fluid-Type-Scale-Generator für konsistente Typografie-Systeme

WCAG-Anforderungen und Mobile-Schriftgrößen

WCAG-Schriftgrößen-Anforderungen: WCAG 1.4.3 Contrast (Level AA): «Large Text» Definition: 18pt (24px) und größer für normale Schrift; 14pt (18.67px) und größer für fette Schrift; Large Text: Mindest-Kontrastverhältnis 3:1 (statt 4.5:1 für Normal-Text); ermöglicht subtilere Farben für große Überschriften; WCAG 1.4.6 Enhanced Contrast (Level AAA): Large Text: 4.5:1; Normal Text: 7:1; WCAG 1.4.4 Resize Text (Level AA): Text muss bis 200% Browser-Zoom ohne Inhaltsverlust funktionieren; keine festen Container-Höhen die bei Zoom überlaufen; rem/em-Schriften skalieren mit Browser-Zoom; px-Schriften skalieren bei «Gesamtseiten-Zoom» (aber nicht bei «Nur Text»-Zoom im Firefox); WCAG 1.4.12 Text Spacing (Level AA): kein Inhaltsverlust wenn folgende Styles angewendet: line-height: 1.5× font-size; letter-spacing: 0.12em; word-spacing: 0.16em; paragraph spacing: 2× font-size; Test: Bookmarklet «Text Spacing Bookmarklet» (Adrian Roselli; adrroselli.com) wendet diese Styles an; Interface muss funktionieren; WCAG 1.4.10 Reflow (Level AA): bei 320px Viewport-Breite kein horizontales Scrollen; Text darf nicht überlaufen; overflow: hidden auf Text-Elementen versteckt bei Zoom Content; besser: min-height statt fester height; padding statt fester Dimensionen
Mobile-Schriftgrößen und iOS-Zoom-Bug: iOS-Zoom-Bug Details: bei Input, Select, Textarea mit font-size unter 16px: iOS Safari zoomt Viewport auf 100% wenn Element fokussiert wird; zoomt nicht automatisch zurück beim Verlassen; Lösung 1 (empfohlen): font-size: 16px; font-size: 1rem; auf allen interaktiven Formularelemente; Lösung 2: font-size: max(16px, 1em) – nimmt den größeren Wert; Lösung 3 (NICHT empfehlenswert; WCAG-Verstoß): <meta name="viewport" content="user-scalable=no"> verhindert Nutzerzoom vollständig; Schriftgrößen-Anpassungen für Mobile: Body generell 16px (nicht kleiner); Navigations-Labels: 14–16px (nicht kleiner); Toast/Snackbar-Text: 14–16px; sehr kleine Texte (11–13px) komplett vermeiden; Android: Dynamic Font Size via sp-Einheiten; iOS: Dynamic Type respektieren; CSS-Media-Query für Nutzer-Präferenz: @media (prefers-text-size: increase) ist noch kein Standard; stattdessen: relative Einheiten (rem) respektieren Betriebssystem-Textgröße-Einstellungen auf Desktop-Browsern

Praxistipp: Zwei Schriftgrößen-Regeln die Sie sofort umsetzen sollten: (1) Setzen Sie auf alle Input-, Select- und Textarea-Elemente font-size: 1rem (mindestens 16px) – sonst zoomt iOS Safari beim Antippen ungewollt in das Formular. (2) Nutzen Sie rem statt px für alle Schriftgrößen – das einzige gute Argument für px war «ich kenne die genaue Pixelgröße» aber mit rem und Modular Scale haben Sie genauso gute Kontrolle und respektieren zusätzlich die Nutzer-Browser-Einstellungen für barrierefreie Schriftgrößen.