Schriftgröße und Lesbarkeit beschreiben das Zusammenspiel aus Font-Size, Zeilenhöhe, Zeilenlänge und Kontrast, das Texte auf Bildschirmen für möglichst viele Menschen gut lesbar macht.
Rubrik: Mediendesign & digitale Medien · Unterrubrik: Accessibility · Niveau: Einsteiger Synonyme / Auch bekannt als: Font-Size, Readability, Mikrotypografie, Typografische Lesbarkeit
Was ist Schriftgröße und Lesbarkeit?
Schriftgröße und Lesbarkeit umfassen alle typografischen Parameter, die bestimmen, wie mühelos ein Text aufgenommen werden kann — von der Pixel- oder rem-Größe der Buchstaben bis zur Zeilenlänge und dem Hell-Dunkel-Verhältnis zum Hintergrund. Sie sind eine Kernanforderung der Barrierefreiheit und entscheiden mit darüber, ob ein digitales Produkt zugänglich ist oder nicht.
Erklärung
Auf Bildschirmen gelten andere Regeln als im Print. Während im Buch 9–11 Punkt Standard sind, beginnt im Web die untere Grenze für Fließtext bei 16 Pixel (oder 1 rem). Die Nielsen Norman Group, das W3C und der Bundesfachverband für Mediengestaltung empfehlen für Fließtext mindestens 16 px, besser 18 px. Für Überschriften skaliert man typischerweise mit einem modularen Verhältnis (z. B. 1,25 oder 1,333 — die sogenannte „Type Scale").
Lesbarkeit hängt aber nicht nur an der Schriftgröße. Die Zeilenhöhe (line-height) sollte zwischen 1,4 und 1,6 liegen, die Zeilenlänge (measure) zwischen 45 und 75 Zeichen — das entspricht auf Desktop etwa 600–700 px Textspalten. Der Farbkontrast muss nach WCAG 2.1 mindestens 4,5 : 1 für Fließtext und 3 : 1 für große Schrift (ab 18 pt bzw. 14 pt bold) betragen.
Wichtig für moderne Webentwicklung: Schriftgrößen relativ angeben (rem, em, %), nicht in festen Pixel — sonst können Nutzerinnen mit Sehbeeinträchtigung die Schrift im Browser nicht skalieren. WCAG 1.4.4 verlangt, dass Text bis 200 % vergrößerbar bleibt, ohne Funktion oder Inhalt zu verlieren. Responsive Typografie mit clamp() ist heute Best Practice.
Beispiele
- Beispiel 1: Fließtext auf lazi-akademie.de — 18 px Basis, line-height 1.6, max-width 65ch. Liest sich auch auf 4K-Monitoren angenehm.
- Beispiel 2: Medium.com — 21 px Body-Text, sehr weite Zeilenhöhe — bewusst auf Lese-Komfort optimiert.
- Beispiel 3: Online-Banking-App für ältere Zielgruppe — Standardgröße 20 px, „großer Text"-Modus auf 26 px umstellbar.
- Beispiel 4: GitHub-Code-Blöcke — Monospace 14 px, mit höherem Kontrast kompensiert, weil Quelltext zeichenweise gelesen wird.
- Beispiel 5: Mobile Hero-Headline mit
font-size: clamp(2rem, 5vw, 3.5rem)— skaliert flüssig zwischen Smartphone und Desktop.
In der Praxis
Im Studio-Alltag bewährt sich: Body-Text 16–18 px (Mobile darf einen Tick kleiner sein, aber nie unter 14 px), Headline-Hierarchie mit klarer Modulation, line-height 1.5–1.6, Zeilenlänge per max-width: 65ch begrenzt. Tools wie Type-Scale.com helfen beim Aufbau einer konsistenten Hierarchie. Webfonts immer auf Hinting prüfen — schlecht gehintete Schriften wirken bei 14 px matschig. Variable Fonts erlauben heute, Strichstärke und optische Größe dynamisch anzupassen. Wer Tabellen oder Datenvisualisierungen baut, sollte zusätzlich auf tabellarische Ziffern (font-variant-numeric: tabular-nums) achten.
Vergleich & Abgrenzung
Lesbarkeit (engl. „readability") und Erkennbarkeit (engl. „legibility") werden oft verwechselt. Legibility beschreibt, ob einzelne Zeichen klar unterscheidbar sind — das ist primär ein Schriftwahl-Thema. Readability beschreibt, wie mühelos ganze Absätze gelesen werden — das ist ein Layout- und Typografie-Thema.
| Merkmal | Lesbarkeit (Readability) | Erkennbarkeit (Legibility) |
|---|---|---|
| Ebene | Absatz, Spalte | Einzelner Buchstabe |
| Einflussfaktoren | Größe, Zeilenhöhe, Spaltenbreite, Kontrast | Schriftcharakter, Schnitt, Hinting |
| Entscheidet sich bei | Layout-Festlegung | Schriftwahl |
Häufige Fragen (FAQ)
Wie groß sollte die Mindest-Schriftgröße im Web sein? 16 Pixel beziehungsweise 1 rem für Fließtext gelten als de-facto-Standard. Kleiner sollte Body-Text nur in begründeten Ausnahmen werden (z. B. Captions, Bildunterschriften), und auch dort nicht unter 14 px. Auf Mobile gilt dasselbe.
Welche Schriftarten sind besonders gut lesbar? Für Fließtext eignen sich humanistische Sans-Serifs wie Inter, Open Sans, Source Sans 3 oder serife Schriften wie Source Serif Pro und Merriweather. Wichtig sind großzügige x-Höhe, offene Punzen und ausreichend Strichstärke bei kleinen Größen.
Weiterführend
- W3C (2024): Web Content Accessibility Guidelines (WCAG) 2.2 — Resize Text. w3.org/TR/WCAG22
- Nielsen Norman Group (2023): Legibility, Readability, and Comprehension. nngroup.com
- Rutter, Richard (2022): Web Typography. webtypography.net
