Schriftgröße muss für Screen und Print unterschiedlich bemessen werden – dasselbe Pt-Maß erzeugt auf einem Bildschirm eine andere physische Größe als auf Papier, bedingt durch Auflösungsunterschiede und Leseabstand.
Rubrik: Grundlagen der Gestaltung · Unterrubrik: Typografie · Niveau: Fortgeschritten
Synonyme / Auch bekannt als: Schriftgrad, font-size, Zeichengröße, Textgröße
Was bestimmt die «richtige» Schriftgröße?
Die Schriftgröße ist kein absoluter Wert, sondern eine Relation aus drei Faktoren:
- Physische Größe des Textes auf dem Ausgabemedium (mm auf Papier, mm auf Screen)
- Leseabstand zum Ausgabemedium (Buch: 30–40 cm; Monitor: 50–70 cm; TV: 2–4 m)
- Auflösung des Ausgabemediums (dpi im Druck, ppi auf Screen)
Diese drei Parameter sind in Print und Screen grundlegend verschieden – weshalb eine 1:1-Übernahme von pt-Werten aus InDesign nach CSS fast immer suboptimale Ergebnisse liefert.
Erklärung: Die technischen Grundlagen
Print: Punkte und physische Größe
Im Print ist die Einheit pt (DTP-Punkt) direkt an eine physische Größe gebunden:
- 1 pt = 0,353 mm
- 12 pt = 4,233 mm (1 Pica)
- 72 pt = 25,4 mm (1 Zoll)
Bei 600 dpi Laserdruck (Standard Office) oder 1200–2400 dpi Offset-Belichter sind alle Details einer Schrift – Serifen-Haarlinie, Kehlung, Punzen – präzise reproduzierbar. Ein 10-pt-Text ist auf Papier ca. 3,5 mm hoch (Versalhöhe ca. 2,5 mm) und aus 35–40 cm Leseabstand problemlos lesbar.
Print-Fließtext-Empfehlungen:
- Buchtext: 9–12 pt
- Zeitungstext: 8–9,5 pt
- Fußnoten: 7,5–8,5 pt
- Bildunterschriften: 7–9 pt
- Minimum für ältere Leser (ab 50): 11–12 pt
Screen: Pixel und Geräteabhängigkeit
Auf Screens ist die Basis-Einheit das CSS-Pixel (px). Achtung: Das CSS-Pixel ist keine physische Einheit, sondern eine logische Einheit, die je nach Gerät-DPI auf unterschiedlich viele physische Pixel gemappt wird.
Device Pixel Ratio (DPR):
- Standard-Monitor (96 ppi): DPR = 1 → 1 CSS px = 1 physischer Pixel
- MacBook Retina (192 ppi): DPR = 2 → 1 CSS px = 2 × 2 = 4 physische Pixel
- iPhone 14 (460 ppi): DPR = 3 → 1 CSS px = 3 × 3 = 9 physische Pixel
Das bedeutet: Ein Text mit font-size: 16px sieht auf einem Retina-Display schärfer aus als auf einem Standard-Monitor, ist aber in CSS-Pixeln gleich groß.
Umrechnungsformel pt → px: `` px = pt × (Screen-PPI / 72) `` Bei 96 dpi Standard-Monitor: px = pt × (96/72) = pt × 1,333
- 12 pt → 16 px
- 10 pt → 13,3 px
Screen-Fließtext-Empfehlungen:
| Kontext | Schriftgröße | line-height |
|---|---|---|
| Desktop-Webseite | 16–18 px | 1.5–1.65 |
| Mobile | 15–17 px | 1.5–1.6 |
| Tablet | 16–18 px | 1.5–1.6 |
| Web-App / Interface | 14–16 px | 1.4–1.5 |
| E-Reader (EPUB) | 16–20 px | 1.5–1.7 |
| TV / Lean-back | min. 30 px | 1.4–1.5 |
| Barrierefreiheit (WCAG AA) | ≥ 18 pt / 16 px (regular) | — |
Browser-Standard: Die meisten Browser setzen font-size: 16px als Basis. Nutzer können dies in ihren Browser-Einstellungen ändern (Barrierefreiheit). Deshalb: relative Einheiten (rem, em) statt Pixel bevorzugen.
Relative vs. absolute Einheiten im Web
| Einheit | Art | Beschreibung |
|---|---|---|
| px | Absolut (CSS) | Logische Pixel; nicht skaliert mit Nutzereinstellungen |
| pt | Absolut | Nur für Print-CSS sinnvoll |
| rem | Relativ zu root | Skaliert mit Browser-Grundgröße (Barrierefreiheit!) |
| em | Relativ zu Elternelement | Sinnvoll für padding/margin, nicht für font-size im Körpertext |
| % | Relativ | Wie em, relativ zum Elternelement |
| vw/vh | Viewport-relativ | Für Fluid Typography mit clamp() |
Beispiele: 5 Praxisanwendungen
- InDesign → Web-Konvertierung: Buchlayout mit 10 pt Fließtext → entspricht ≈ 13,3 px auf Standard-Monitor. Da Screen-Text mehr Raum braucht als Print: auf 16 px hochsetzen. Skalierungsfaktor Print-zu-Web: ca. 1,5–1,7 ×.
- Responsive Fluid Typography:
```css / Skaliert von 16px (mobil) bis 20px (desktop) / body { font-size: clamp(1rem, calc(0.75rem + 1.25vw), 1.25rem); line-height: 1.6; }
/ Überschriften: clamp-Skalierung / h1 { font-size: clamp(1.75rem, calc(1.25rem + 3vw), 3.5rem); line-height: 1.1; } ```
- App-Größenhierarchie (iOS/Android):
Apple Human Interface Guidelines empfehlen für iOS:
- Title 1: 28 pt (Display)
- Headline: 17 pt
- Body: 17 pt (Standard)
- Footnote: 13 pt
- Caption 1: 12 pt
Android Material Design: Body Large 16 sp (sp = scale-independent pixel).
- E-Book (EPUB mit CSS):
``css body { font-size: 1.1em; /* Relativ zu E-Reader-Standard */ line-height: 1.6; text-align: justify; hyphens: auto; } `` E-Reader passen Basisgröße an Nutzereinstellung an; relative Einheiten zwingend.
- Große Monitore / 4K-Displays: Bei 4K-Monitoren (3840 × 2160 px, 215 ppi) setzt Windows DPR = 1,25–1,5 automatisch. CSS-Pixel bleiben die logische Einheit – keine Anpassung nötig, wenn relative Einheiten verwendet werden.
In der Praxis
InDesign (Print):
- Schriftgröße in pt oder mm (je nach Einheit-Einstellung)
- Für digitale PDFs: ab 11 pt für Fließtext empfohlen, da PDF auf Screen häufig vergrößert gelesen wird
- Barrierefreies PDF: min. 12 pt Fließtext nach DIN EN ISO 9241-112
Figma (Screen-Design):
- Arbeiten in px (Figma-Standard)
- Export-Angaben zu CSS werden automatisch in px übersetzt
- Für Skalierung unterschiedlicher Device-Breakpoints: Auto-Layout + Typography Tokens
CSS Best Practices: ```css / Basis: rem-basiertes Größensystem / :root { --text-xs: 0.75rem; / 12px / --text-sm: 0.875rem; / 14px / --text-base: 1rem; / 16px / --text-lg: 1.125rem; / 18px / --text-xl: 1.25rem; / 20px / --text-2xl: 1.5rem; / 24px / --text-3xl: 1.875rem; / 30px / --text-4xl: 2.25rem; / 36px / }
/ Barrierefreiheit: Pixel NIE für font-size nutzen / / Dies skaliert NICHT mit Browser-Nutzereinstellungen / body { font-size: 16px; } / SCHLECHT / body { font-size: 1rem; } / GUT / ```
Print-CSS: ``css @media print { body { font-size: 10pt; line-height: 13pt; font-family: "Garamond", Georgia, serif; } h1 { font-size: 18pt; } } ``
Vergleich & Abgrenzung
Screen vs. Print – Hauptunterschiede auf einen Blick:
| Parameter | Screen | |
|---|---|---|
| Maßeinheit | pt, mm | px, rem |
| Auflösung | 600–2400 dpi | 96–460 ppi |
| Leseabstand | 30–40 cm | 50–70 cm |
| Typischer Fließtext | 9–12 pt | 15–18 px |
| Leading | 120–145 % | 150–165 % |
| Spaltenbreite | 55–75 Zeichen | 55–75 Zeichen (max-width: 65ch) |
| Satzart | Blocksatz | Flattersatz |
Häufige Fragen (FAQ)
Warum soll ich rem statt px verwenden? Nutzer können in ihren Browser-Einstellungen die Standard-Textgröße erhöhen (besonders ältere Menschen oder Menschen mit Sehbeeinträchtigungen). Wenn font-size in px angegeben ist, wird diese Einstellung ignoriert. rem (relativ zur Root-Größe) respektiert die Nutzereinstellung und ist daher barrierefreier und WCAG-konform.
Kann ich eine InDesign-Schriftgröße 1:1 in CSS übertragen? Nur für Print-CSS. Für Bildschirm-CSS gilt: pt × 1,333 = px (bei 96 dpi Standard). Zusätzlich braucht Screen-Text aufgrund des größeren Leseabstands und der Luminanz-Wirkung ca. 20–50 % mehr Schriftgröße als Print.
Verwandte Einträge
- Schriftgrad und das Punkt-System
- Variable Fonts – Schriften der Zukunft
- Baseline Grid in der Praxis
Weiterführend
- Hochuli, Jost (2008): Das Detail in der Typografie. Wilmington: Compugraphic, S. 30–38.
- Forssman, Friedrich; de Jong, Ralf (2002): Detailtypografie. Mainz: Verlag Hermann Schmidt, S. 50–67.
- W3C (2018): Web Content Accessibility Guidelines (WCAG) 2.1. Success Criterion 1.4.4 – Resize Text.
