🖋️ Schriftgrößen-Umrechner
px · pt · rem · em · mm · cm · % · pica – alle 9 Einheiten + DPI-Variable + Live-Vorschau
Schriftgrößen exakt umrechnen – mit einstellbarem DPI (entscheidend für Retina/Print!), anpassbarer Root-Schriftgröße für em/rem, Live-Textvorschau und kopierbaren CSS-Code-Snippets. Für Web-Entwickler, UI/UX-Designer und Druckprofis.
Schriftgrößen verstehen: px, pt, rem, em — was wofür?
Schriftgrößen-Einheiten sind im Webdesign eine häufige Fehlerquelle. Wer einen 12-pt-Print-Text direkt ins CSS überträgt, bekommt eine zu kleine Schrift. Wer em statt rem verschachtelt, bekommt unkontrollierbare Größen. Dieser Guide klärt die Zusammenhänge ein für alle Mal.
px vs. pt: Der entscheidende Unterschied
Pixel (px) ist eine absolute Bildschirmeinheit — 1 px = 1 Bildschirmpunkt bei einfacher Auflösung. Im Web-CSS-Standard (96 DPI) gilt: 1 pt = 1,333 px.
Punkt (pt) ist eine Druckermaßeinheit: 1 pt = 1/72 Zoll = 0,3528 mm. Deshalb: 12 pt (Word-Standard) = 16 px (Web-Standard). Selbe Schriftgröße, verschiedene Einheiten — weil der Kontext (Print vs. Bildschirm) verschieden ist.
📐 Warum DPI so wichtig ist
12 pt bei 72 DPI (klassischer Mac): = 12 px
12 pt bei 96 DPI (Windows/Web-Standard): = 16 px
12 pt bei 144 DPI (Retina 2×): = 24 px physisch (aber OS skaliert auf 16 px CSS)
12 pt bei 300 DPI (Hochdruck): = 50 px
rem vs. em: Wann was verwenden?
rem (root em) basiert auf der Root-Schriftgröße des HTML-Elements (Standard: 16 px). Bleibt konstant egal wie tief das Element verschachtelt ist. Empfohlen für: font-size, padding, margin — alles was konsistent über das Layout skalieren soll.
em basiert auf der Schriftgröße des Eltern-Elements. Gefährlich bei Verschachtelung: 1,2em × 1,2em × 1,2em = 1,728em — die Schrift wächst mit jeder Ebene. Sinnvoll für: line-height, letter-spacing und Abstände die relativ zur lokalen Schriftgröße sein sollen.
⚠️ Der em-Verschachtelungs-Fallstrick
CSS:
nav { font-size: 1.2em; } → nav = 19,2 px
nav li { font-size: 1.2em; } → li = 23,04 px
nav li a { font-size: 1.2em; } → a = 27,65 px
Lösung: rem verwenden — dann ist jede Angabe relativ zu den Root-16px, nicht zur Eltern-Schriftgröße.
PostScript-Punkt vs. Didot-Punkt
In modernen Programmen (CSS, Adobe, Office) ist immer der PostScript-Punkt (pt) gemeint: 1 pt = 1/72 Zoll = 0,3528 mm. In älteren europäischen Druckerzeugnissen begegnet man dem Didot-Punkt (dd): 1 dd = 0,376065 mm. Der Unterschied beträgt 6,8 % — bei langen Texten und größeren Schriften führt das zu sichtbaren Layout-Diskrepanzen. Heutige Typografen arbeiten fast ausschließlich mit dem PostScript-Punkt.
Empfehlungen: Welche Schriftgrößen für welche Anwendung?
Web / App (CSS)
| Element | px | rem | Begründung |
|---|---|---|---|
| Fließtext (Body) | 16–18 px | 1–1,125 rem | WCAG-Mindestempfehlung, Lesbarkeit |
| Sekundärtext, Labels | 13–14 px | 0,813–0,875 rem | Nicht unter 12 px für Links |
| H3 / Subheadline | 20–24 px | 1,25–1,5 rem | Minor Third oder Perfect Fourth Scale |
| H2 / Section | 28–32 px | 1,75–2 rem | Klare Hierarchie zum H3 |
| H1 / Page Title | 36–48 px | 2,25–3 rem | Desktop — Mobile oft 28–36 px |
| Hero / Display | 56–80 px | 3,5–5 rem | Nur für große Viewport-Schriften |
Print (Word, InDesign, PDF)
| Element | pt | mm | Typischer Einsatz |
|---|---|---|---|
| Fließtext (DIN A4) | 10–12 pt | 3,5–4,2 mm | Bücher, Berichte, Briefe |
| Bildunterschriften | 8–9 pt | 2,8–3,2 mm | Unter 8 pt kaum lesbar |
| Fußnoten | 8–10 pt | 2,8–3,5 mm | Je nach Fußnotenanzahl |
| Überschrift H2 | 14–16 pt | 4,9–5,6 mm | Kapitelüberschriften |
| Überschrift H1 | 18–24 pt | 6,4–8,5 mm | Titelseite, Kapitelanfang |
💡 Tipp: Schriftgröße für Barrierefreiheit (WCAG)
WCAG 2.1 empfiehlt mindestens 16 px für Fließtext (Level AA). „Großer Text“ (niedrigere Kontrastanforderung): mindestens 18 pt (24 px) oder 14 pt fett (≈18,67 px). Nutzer können in Browsern die Schriftgröße skalieren — deshalb relative Einheiten (rem, em, %) statt fixierter px-Werte für Barrierefreiheit bevorzugen.
Niemals: font-size: px auf dem body setzen und Nutzern die Browser-Skalierung deaktivieren.
Häufige Fragen zu Schriftgrößen
In Word gilt historisch: 12 pt = 16 px (96 DPI). Im Browser-CSS ist 12 pt ebenfalls 16 px. Aber: High-DPI-Monitore (Retina, 4K, meist 144–192 DPI) zeigen mehr Pixel pro Zoll — ohne OS-Skalierung würden Texte physisch kleiner erscheinen. Das Betriebssystem skaliert automatisch (125 %, 150 %, 200 % auf Windows; Retina auf macOS), sodass 1 CSS-px mehrere physische Pixel entspricht. Fazit: Nicht die Einheit ist das Problem, sondern die Bildschirmauflösung und DPI-Einstellung.
1 rem = Root-Schriftgröße des HTML-Elements. Browser-Standard: 16 px. Wenn du im CSS html { font-size: 62,5% } setzt, ist 1 rem = 10 px (einfachere Rechnung: 1,6 rem = 16 px). Empfehlung: Root-Schriftgröße nicht unter 16 px setzen — das überschreibt die Nutzer-Einstellungen des Browsers und verschlechtert die Barrierefreiheit. Besser: Root-Schriftgröße bei 100 % belassen und alle Elemente in rem angeben.
Print (DIN A4, 300 DPI): Fließtext 10–12 pt (3,5–4,2 mm). Bildunterschriften 8–9 pt. Web: Fließtext 16–18 px (1–1,125 rem). Mobile: 15–16 px minimum. Wichtig: Pt-Werte vom Print-Layout niemals direkt ins Web-CSS übertragen ohne Umrechnung. 10 pt Print = 13,3 px Web — zu klein für gute Lesbarkeit am Bildschirm. Grundregel: Web-Fließtext braucht ~2–4 pt mehr als Print-Fließtext wegen Pixel-Rendering und Hintergrundbeleuchtung.
1 Pica (pc) = 12 pt = 1/6 Zoll = 4,233 mm ≈ 16 px (bei 96 DPI). Vor allem in der englischsprachigen Druckindustrie und bei CSS-Print-Stylesheets (@media print). Im deutschen Webdesign-Alltag kaum relevant. In InDesign und QuarkXPress wird Pica gelegentlich für Spaltenbreiten verwendet. CSS unterstützt pc als Einheit — aber praktisch niemand nutzt sie im modernen Web.
Typographic Scales sorgen für harmonische Größenverhältnisse zwischen Überschriften und Fließtext. Gängige Skalen: Minor Third (1,2): 16, 19, 23, 28, 33 px — dezent, gut für Content-Sites. Perfect Fourth (1,333): 16, 21, 28, 37, 50 px — klare Hierarchie, beliebt. Golden Ratio (1,618): 16, 26, 42, 68 px — dramatisch, für Landingpages. Tools: type-scale.com berechnet die Skalen automatisch. Material Design (Google) und Apple Human Interface Guidelines verwenden angepasste Skalen für ihre Systeme.
🔗 Passende weitere Rechner
Pixel in cm — Bildschirmmaße umrechnen · DPI-Rechner — Auflösung für Print und Screen · Hexadezimal-Rechner — CSS Farbcodes · Winkelumrechner
Vertrauen Sie unserer Expertise
Daniel Niedermayer
Geschäftsführer
Zuletzt geprüft: 21. Januar 2026
Quellen
Methodik
Basis-Umrechnung: Alles über Inch. 1 in = DPI px = 72 pt = 6 pc = 25,4 mm. CSS-Standard: 96 DPI. pt→px = pt × DPI/72. rem/em = px / Root. Didot-Punkt (historisch) = 0,376065 mm (nicht im Rechner, nur erläutert).
Mehr zur Methodik
Head of Sales & Business Development
Agentur Geschäftsführerin
Fixrechner.de – „Alles ist berechenbar“. Der umfassendste Schriftgrößen-Umrechner: 9 Einheiten, variable DPI, Live-Vorschau, CSS-Code, Typografie-Hierarchie.
9 Einheiten
px, pt, rem, em, mm, cm, in, pica, %.
Variable DPI
72/96/144/192 DPI + custom.
Datenschutz
Keine Datenspeicherung.
Alle Berechnungen ohne Gewähr. W3C CSS Values Level 4 Standard.