Was dieser Konverter für Sie berechnet
Das Tool wandelt Pixelwerte (px) in rem und em um – und in die jeweils andere Richtung. Sie geben einen Wert in eines der drei Einheitenfelder ein, und die beiden anderen werden automatisch berechnet und angezeigt. Auf der Oberfläche steht dazu der Hinweis: „Geben Sie einen px-, rem- oder em-Wert ein – die anderen beiden Werte werden bei der Eingabe direkt aktualisiert.“ Zusätzlich zur reinen Umrechnung lassen sich eine Root-Schriftgröße und eine Schriftgröße für den em-Kontext einstellen, damit die Ergebnisse zu Ihrem eigenen Design passen statt zu einem generischen Standardwert.
px, rem und em – wofür jedes Feld steht
Der Konverter besteht aus drei Feldern: „Root-Schriftgröße (px)“ enthält die Basis-Schriftgröße in Pixeln, auf die sich alle rem-Werte beziehen. „Schriftgröße des em-Kontexts (px)“ enthält die Schriftgröße in Pixeln des konkreten Elements, für das Sie einen em-Wert berechnen. „Werte“ ist das Feld, in dem Sie die Länge selbst eintragen – in px, rem oder em. Beim ersten Aufruf, bevor Sie etwas ändern, gilt: 16px, 1rem und 1em beschreiben dieselbe Länge. Das ist der Ausgangspunkt, von dem das Tool arbeitet, bis Sie ihn selbst anpassen.
Root- und em-Kontextgröße einstellen
Das Feld „Root-Schriftgröße (px)“ verlangt eine Zahl größer als 0 und steht standardmäßig auf 16px. Dieser Wert ist die Bezugsgröße für alle rem-Umrechnungen: Weicht die tatsächliche Root-Schriftgröße Ihres Projekts vom Standard ab, sorgt eine Anpassung dieses Feldes dafür, dass die angezeigten rem-Werte zu Ihrem Design passen. Tragen Sie einen ungültigen Wert ein, erscheint die Meldung „Die Root-Schriftgröße muss eine Zahl größer als 0 sein.“
Das Feld „Schriftgröße des em-Kontexts (px)“ funktioniert gleich – eine Zahl größer als 0, standardmäßig ebenfalls 16px –, dient aber einem anderen Zweck. Weil sich ein em-Wert auf die Schriftgröße des jeweiligen Elements bezieht und nicht zwangsläufig auf die Root-Schriftgröße der Seite, fragt das Tool diese Schriftgröße separat ab. Dieses Feld nutzen Sie, wenn Sie einen em-Wert für ein bestimmtes Element statt für die Seite insgesamt berechnen wollen. Ist die Eingabe hier ungültig, erscheint „Die Schriftgröße des em-Kontexts muss eine Zahl größer als 0 sein.“
Werte eingeben und die Umrechnung live verfolgen
Im Bereich „Werte“ steht für jede der drei Einheiten ein eigenes Feld. Bearbeiten Sie eines davon – px, rem oder em –, berechnen sich die anderen beiden während der Eingabe neu, auf Grundlage der aktuell eingestellten Root- und Kontextgröße. Lassen Sie zum Beispiel beide Bezugsgrößen bei ihrem Standardwert von 16px und tragen Sie 24 in das px-Feld ein: Das rem-Feld zeigt 1,5rem und das em-Feld zeigt 1,5em, weil 24 geteilt durch 16 gleich 1,5 ist.
Negative Pixelwerte sind ausdrücklich erlaubt – ein Wert wie -8px wird genauso umgerechnet wie ein positiver und ergibt bei den Standardeinstellungen -0,5rem und -0,5em. Erkennt das Feld „Werte“ keine gültige Zahl, zeigt das Tool „Geben Sie eine Zahl zum Konvertieren ein.“
Ändern Sie anschließend die Root- oder die Kontextgröße, aktualisiert sich auch ein bereits eingetragener Wert. Steht zum Beispiel 40 im px-Feld und die Root-Schriftgröße bei 16px, zeigt das rem-Feld 2,5rem. Erhöhen Sie die Root-Schriftgröße auf 20px, ohne den px-Wert zu ändern, zeigt das rem-Feld 2rem – die rem-Ausgabe richtet sich nach der aktuell eingestellten Root-Schriftgröße, nicht nur nach der eingegebenen Pixelzahl.
Die Tabelle „Häufige Werte px → rem (16px Basis)“ lesen
Unterhalb der Eingabefelder zeigt das Tool die Tabelle „Häufige Werte px → rem (16px Basis)“ – gängige Pixelwerte, umgerechnet in rem, ausgehend fest von einer Root-Schriftgröße von 16px. So sehen Sie zum Beispiel, dass 8px 0,5rem entsprechen, 24px 1,5rem und 48px 3rem, ohne jeden Wert einzeln in die Umrechnungsfelder einzutippen. Diese Tabelle bleibt an die 16px-Basis gebunden und dient als feste Referenz neben der Live-Umrechnung oben, die Sie mit einer abweichenden Root-Schriftgröße nutzen können.
Wo Ihre Eingaben verarbeitet werden
Jede Konvertierung läuft direkt in Ihrem Browser. Keine Ihrer Eingaben wird an BroBroGo übertragen.
Für wen sich dieser Konverter eignet
Er richtet sich an alle, die feste Pixelwerte in relative rem- oder em-Einheiten für ein responsives Layout umrechnen müssen, und an alle, die nachvollziehen wollen, wie eine geänderte Root-Schriftgröße die resultierenden rem-Werte verändert. Ebenso eignet er sich, wenn Sie einen em-Wert berechnen, der von der Schriftgröße eines bestimmten Elements abhängt. Nützlich ist er außerdem, wenn Sie sicherstellen wollen, dass Ihre Größenangaben wie gewünscht mitskalieren, sobald eine Leserin oder ein Leser die Standardschriftgröße des eigenen Browsers ändert.
Häufig gestellte Fragen
Mit welcher Root-Schriftgröße sollte ich starten? Das Tool startet mit 16px, wobei anfangs 16px, 1rem und 1em übereinstimmen. Verwendet Ihr Projekt eine andere Root-Schriftgröße, passen Sie das Feld „Root-Schriftgröße (px)“ entsprechend an, und jeder rem-Wert aktualisiert sich sofort.
Muss ich die em-Kontextgröße ausfüllen, wenn ich nur mit rem arbeite? Das Feld für die em-Kontextgröße wirkt sich nur auf den angezeigten em-Wert aus, da em an der Schriftgröße eines konkreten Elements gemessen wird und nicht an der Root-Größe. Arbeiten Sie ausschließlich mit rem, können Sie es beim Standardwert von 16px belassen und sich auf die Root-Schriftgröße konzentrieren.
Kann ich negative Pixelwerte umrechnen? Ja. Das Tool akzeptiert negative Pixelwerte und rechnet sie genauso um wie positive.
Was passiert, wenn ich Buchstaben eintrage oder ein Feld leer lasse? Jedes Feld wird einzeln geprüft. Eine ungültige Eingabe im Feld „Werte“ zeigt „Geben Sie eine Zahl zum Konvertieren ein.“, eine ungültige Root-Schriftgröße zeigt „Die Root-Schriftgröße muss eine Zahl größer als 0 sein.“, und eine ungültige Schriftgröße des em-Kontexts zeigt „Die Schriftgröße des em-Kontexts muss eine Zahl größer als 0 sein.“
Wird das, was ich eingebe, irgendwohin gesendet? Nein. Jede Konvertierung läuft direkt in Ihrem Browser, und keine Ihrer Eingaben wird an BroBroGo übertragen.