🖋️ 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
Die Qualität der Rechner ist enorm, und das kostenlos. Besten Dank.
Head of Sales & Business Development
Neben den Rechnern für den Arbeitsalltag finde ich auch die rund um die eigene Finanzplanung sehr hilfreich.
Agentur Geschäftsführerin
Ich schätze die Genauigkeit und Benutzerfreundlichkeit dieser Rechner sehr.
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.