em in Pixel umrechnen
Bei einer Eltern-Schriftgröße von 16 px sind 1,5em genau 24 px, bei 20 px wird derselbe Wert zu 30 px. Geben Sie den em-Wert und die Eltern-Schriftgröße ein und sehen Sie die reale Länge eines Abstands oder einer Überschrift. Kostenlos in Ihrem Browser.
- Kostenlos
- Läuft in Ihrem Browser
- Ohne Anmeldung
- Ihre Daten bleiben auf Ihrem Gerät
Im Browser ausführen – kostenlos
Rechenbeispiel
- Wert in em
- 1,5
- Schriftgröße des Elternelements (px)
- 16
- Pixel
- 24
- CSS-Wert
- 24px
- Genauigkeit
- 6
Der em-zu-Pixel-Rechner zeigt, welche reale Pixellänge ein relativer CSS-Wert in em bei einer bestimmten übergeordneten Schriftgröße darstellt. Geben Sie den em-Wert und die berechnete Schriftgröße des Elternelements in Pixel an; der Rechner multipliziert beide Angaben und liefert einen stabilen Pixelwert sowie einen direkt lesbaren CSS-Wert. Das hilft bei der Prüfung von Typografie, Abständen, Komponentengrößen und responsiven Oberflächen, deren Maße sich durch vererbte Texteinstellungen ändern.
Verstehen, wofür ein em-Maß steht
Ein em ist eine relative CSS-Länge, deren dargestellte Größe vom typografischen Kontext abhängt. Bei vielen Eigenschaften entspricht ein em der berechneten Schriftgröße des Elements, auf das die Eigenschaft angewendet wird. Wenn Sie von einer geerbten oder übergeordneten Einstellung ausgehen, dient die angegebene Schriftgröße des Elternelements als praktische Referenz für die Vorschau.
Ein em-Wert bezeichnet deshalb keine dauerhaft feste Pixelzahl. Bei einer Referenz von sechzehn Pixel entspricht ein em sechzehn Pixel und eineinhalb em entsprechen vierundzwanzig Pixel. Bei einer Referenz von zwanzig Pixel werden dieselben relativen Werte zu zwanzig und dreißig Pixel.
Dieser Rechner macht die Abhängigkeit ausdrücklich sichtbar, statt unbemerkt einen Browserstandard anzunehmen. Außerdem nennt sie die Formel zur einfachen Kontrolle. Das Werkzeug untersucht keine Webseite, löst keine Kaskade auf, lädt keine Stylesheets und errät nicht, welches übergeordnete Element eine Eigenschaft steuert.
Pixel berechnen und Rundung festlegen
Beide Pflichtwerte müssen endliche Zahlen sein, und die Schriftreferenz muss größer als null sein, weil eine berechnete Schriftgröße von null oder darunter keine sinnvolle Grundlage für diese Vorschau bildet. Ein em-Wert von null sowie negative em-Werte sind erlaubt: null ist in generierten Token-Tabellen nützlich, während negative relative Versätze und Ränder in vielen CSS-Layouts gültig sind. Standardmäßig wird das Pixelergebnis auf sechs Nachkommastellen gerundet.
Setzen Sie precision auf eine ganze Zahl zwischen null und zwölf, wenn ein Testdatensatz, eine Spezifikation oder eine Tabelle eine andere Genauigkeit benötigt. Schreiben Sie keine Einheit in Zahlenfelder: Senden Sie 1.25 statt 1.25em und 18 statt 18px.
Reale Größen in CSS und Design prüfen
Frontend-Entwickler können die Umrechnung einsetzen, wenn sie Komponenten prüfen, die mit der lokalen Typografie skalieren. Eine Schaltfläche mit einem horizontalen Innenabstand von 1.25em kann bei sechzehn Pixel Schriftgröße ausgewogen wirken, aber in einer Karte mit geerbten achtzehn Pixel eine andere reale Breite einnehmen. Die Umrechnung beider Fälle zeigt die Auswirkung, bevor Sie die Browserwerkzeuge öffnen.
Designer können relative Tokens für die Übergabe in konkrete Pixelanmerkungen übertragen, ohne das Quellsystem zu ändern. Fachleute für Barrierefreiheit können die Folgen größerer geerbter Texteinstellungen vergleichen. Halten Sie den Umfang klar.
Dieser Rechner wandelt nur em in px um; er rechnet nicht rückwärts, löst rem nicht vom Wurzelelement auf, wertet keine Prozentangaben aus und simuliert weder Zoom noch Pixeldichte. Das Ergebnis sind CSS-Pixel und keine physischen Bildschirmpixel. Da beide Wege denselben reinen Algorithmus verwenden, kann ein geprüftes Beispiel unverändert in eine Build-Pipeline übernommen werden.
Anwendungsfälle
Komponentenabstände prüfen
Sehen Sie, welchen Innen- oder Außenabstand ein em-Token bei der tatsächlichen übergeordneten Schriftgröße erzeugt.
Designübergabe vorbereiten
Ergänzen Sie konkrete Pixelangaben und behalten Sie zugleich relative em-Werte im Designsystem bei.
Stabile Testdaten erstellen
Erzeugen Sie deterministische Sollgrößen für Themes, Komponententests und CSS-Dokumentation.
Häufige Fragen
Entspricht ein em immer sechzehn Pixel?
Nein. Das gilt nur bei einer maßgeblichen Schriftreferenz von sechzehn Pixel. Geben Sie die tatsächliche Elterngröße an.
Kann ich einen negativen em-Wert umrechnen?
Ja. Negative relative Versätze und Ränder können gültiges CSS sein; negative em-Werte werden daher angenommen.
Sind mit dem Ergebnis physische Gerätepixel gemeint?
Nein. Es sind CSS-Pixel. Browser-Skalierung und Pixeldichte bestimmen die Zuordnung zu physischen Pixeln.
Welche Eltern-Schriftgröße soll ich eingeben?
Die berechnete Schriftgröße des Elternelements in Pixel, zum Beispiel 18, wenn eine Karte diese Größe erbt. Das Werkzeug liest Ihre Seite nicht und rät nicht, welches Element sie festlegt: Diesen Wert geben Sie selbst vor.
Rechnet es auch rem, Prozentwerte oder Pixel in em um?
Nein. Es rechnet ausschließlich em in Pixel um. rem bezogen auf das Wurzelelement, Prozentwerte und Fenstereinheiten berechnet es nicht, und es simuliert weder den Browser-Zoom noch die Pixeldichte des Bildschirms.
Verwandte Tools
Für Entwickler — API-Zugang
Alles auf dieser Seite ist auch per API verfügbar. Dieser Abschnitt richtet sich an Teams, die es in ihre eigenen Systeme einbinden möchten; alle anderen nutzen einfach das Tool oben.
Endpunkt
Authentifizierung per Bearer-Token. Ein einziger POST stellt die Aufgabe in die Warteschlange; das Ergebnis erhalten Sie per Webhook oder über einen signierten Link.
Aufruf aus Ihrem Stack
curl -X POST https://api.kit.forhosting.com/str/em-to-px \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"em_value":1.5,"parent_font_size_px":16}'const res = await fetch("https://api.kit.forhosting.com/str/em-to-px", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"em_value": 1.5,
"parent_font_size_px": 16
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/str/em-to-px",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"em_value": 1.5,
"parent_font_size_px": 16
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/str/em-to-px", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"em_value":1.5,"parent_font_size_px":16}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"em_value":1.5,"parent_font_size_px":16}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/str/em-to-px", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Beispiel-Anfrage
{
"em_value": 1.5,
"parent_font_size_px": 16
}Beispiel-Antwort
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "str.em_to_px",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}Die API arbeitet asynchron: Sie erhalten sofort eine task_id. Polling ist mit 1 Anfrage pro Sekunde erlaubt.
Preis
Der Preis steht auf der Seite – keine Tokens, keine Credits. Fehlgeschlagene Aufgaben werden nicht berechnet.
Fehler
| HTTP | Code | Bedeutung |
|---|---|---|
401 | unauthorized | Der API-Schlüssel fehlt oder ist ungültig – prüfen Sie den Authorization-Header (Bearer). |
402 | insufficient_balance | Ihr Guthaben reicht für diese Aufgabe nicht aus – Aufladungen verfallen nicht. |
404 | unknown_type | Unbekannter Aufgabentyp – prüfen Sie das Feld „type“ gegen den Katalog. |
429 | rate_limited | Zu viele Anfragen – warten Sie kurz; Polling ist mit 1 Anfrage pro Sekunde erlaubt. |
Technische Hinweise
Die Berechnung erfolgt deterministisch ohne Netzwerk, Speicherung, Zufall oder Datumsabhängigkeit; jede automatisierte API-Anfrage kostet $0.002.
Verstehen, wofür ein em-Maß steht
Die Antwort wiederholt die Eingaben, gibt die Berechnung unter pixels aus und ergänzt einen css_value wie 24px. Sie liefern die bereits berechnete Elterngröße; dadurch bleibt das Ergebnis deterministisch und eignet sich für Designprüfungen, Dokumentation, Tests und API-Abläufe.
Pixel berechnen und Rundung festlegen
Die Rechnung lautet pixels gleich em_value multipliziert mit parent_font_size_px. Die Rundung betrifft pixels und css_value; die Eingaben bleiben zur Nachverfolgung sichtbar. Die Implementierung vereinheitlicht außerdem negative null zu gewöhnlicher null und verhindert damit überraschende JSON-Vergleiche. NaN, Infinity, fehlende Felder, unzulässige Typen, übergroße Beträge oder Ergebnisse außerhalb des Grenzwerts werden als invalid_input abgewiesen, anstatt irreführende Zahlen zu erzeugen. Dieser strenge Vertrag hält Tabellen, SDK, Webformulare und CI-Testdaten konsistent.
Reale Größen in CSS und Design prüfen
Die Ausgabe eignet sich ebenfalls als Testwert: Ein Theme-Generator kann die API aufrufen, den Pixelwert speichern und erwartete Abmessungen prüfen. Die interaktive Rechnung läuft im Browser, eine automatisierte Anfrage kostet $0.002.
Technische Fragen
Welche Formel rechnet em in Pixel um?
Multiplizieren Sie den em-Wert mit der übergeordneten Schriftgröße in CSS-Pixel: pixels = em_value × parent_font_size_px.
Was kostet eine API-Anfrage?
Jede automatisierte API-Anfrage kostet $0.002. Die interaktive Berechnung im Browser ist auf dieser Seite kostenlos.