CSS-Schriftgröße umrechnen
Wert und Einheit px, em, pt oder % eingeben, die Bezugsgröße in Pixel festlegen und die Schaltfläche wählen. Alle vier Ergebnisse erscheinen mit kopierbarem CSS-Suffix.
Die Bezugsgröße steht für 1em und 100 %. Bei font-size: 20px des Elternteils verwendest du 20. Sie verändert em und %, nicht aber px zu pt.
Berechnungsprinzip
Zuerst wird in Pixel umgerechnet: em × Bezug, % × Bezug ÷ 100 und pt × 96 ÷ 72. Danach folgen die Umkehrformeln.
Intern bleibt die Genauigkeit erhalten. Die Ausgabe entfernt Gleitkomma-Reste und zeigt sehr kleine positive Werte weiterhin an.
Zwei geprüfte Beispiele
24px bei 16px Bezug ergeben 24px, 1,5em, 18pt und 150 %. 1,5em führt mit demselben Bezug zurück zu 24px.
125 % bei 20px Bezug ergeben 25px, 1,25em und 18,75pt. Bei 16px Bezug werden dieselben 125 % zu 20px und 15pt.
Geeignete Anwendungen
Nutze das Werkzeug für Pixelwerte aus Designs, relative Typografie-Tokens, Punktwerte aus Druckvorgaben oder geerbte CSS-Deklarationen mit bekanntem Elternwert.
16px ist nur ein üblicher Ausgangspunkt. Notiere die Bezugsgröße mit dem Ergebnis, damit die Rechnung reproduzierbar bleibt.
Grenzen und Fehler
Das Werkzeug liest weder calc(), clamp(), Variablen, Stylesheets, rem noch Viewport-Einheiten und untersucht kein DOM.
Prozent gilt ausschließlich für font-size. Für width oder height ist das Ergebnis ungeeignet. Negative Größen und ein Bezug von null werden abgelehnt.
Punkte folgen dem CSS-Verhältnis, nicht den Gerätepixeln eines Druckers. Sichtbare Buchstabenhöhe hängt zusätzlich von Schrift und line-height ab.
Kopierte Ausgabe verwenden
Füge den Wert in das echte Bauteil ein und teste vergrößerte Browserschrift. Eine relative Einheit allein garantiert weder Barrierefreiheit noch guten Umbruch oder Kontrast.
Die Rechnung läuft im Browser. Eingaben werden nicht als Analyseparameter gesendet. Bei blockierter Zwischenablage kann der sichtbare Wert markiert werden.
Alle Umrechnungen für CSS-Schrifteinheiten
| Umrechnungsrichtung | Formel bei 16px Bezugsgröße | Beispiel |
|---|---|---|
| Pixel in Em (px in em) | em = px × 0.0625 | 1px = 0.0625em |
| Pixel in Punkt (px in pt) | pt = px × 0.75 | 1px = 0.75pt |
| Pixel in Prozent (px in %) | % = px × 6.25 | 1px = 6.25% |
| Em in Pixel (em in px) | px = em × 16 | 1em = 16px |
| Em in Punkt (em in pt) | pt = em × 12 | 1em = 12pt |
| Em in Prozent (em in %) | % = em × 100 | 1em = 100% |
| Punkt in Pixel (pt in px) | px ≈ pt × 1.333333333 | 1pt ≈ 1.333333333px |
| Punkt in Em (pt in em) | em ≈ pt × 0.08333333333 | 1pt ≈ 0.08333333333em |
| Punkt in Prozent (pt in %) | % ≈ pt × 8.333333333 | 1pt ≈ 8.333333333% |
| Prozent in Pixel (% in px) | px = % × 0.16 | 1% = 0.16px |
| Prozent in Em (% in em) | em = % × 0.01 | 1% = 0.01em |
| Prozent in Punkt (% in pt) | pt ≈ % × 0.12 | 1% ≈ 0.12pt |
Häufige Fragen
Sind 16px immer 1em?
Nur bei 16px Bezugsgröße. Bei 20px entspricht 1em genau 20px.
Warum ändert der Bezug pt nicht?
Em und % sind relativ; px und pt stehen in CSS fest im Verhältnis 96 zu 72.
Kann ich das Prozent-Ergebnis für Breiten nutzen?
Nein. Hier bezieht sich % nur auf font-size.
Warum wird die Kopie gerundet?
Unnötiges Dezimalrauschen wird entfernt; gerechnet wird mit dem ungerundeten Wert.
Wird rem unterstützt?
Nein. Dieses Werkzeug bleibt bei px, em, pt und Schriftgrößen-Prozent.