Den Entwurf in Code überführen
Der Entwurf gibt 24 Pixel Abstand, das Stylesheet soll 1,5em bekommen. Das ist der häufigste Weg in der Oberflächenarbeit.
Rechnen Sie Pixel in em um, mit jeder Elterngröße
In der Voreinstellung des Browsers sind 24 Pixel 1,5em und 14 Pixel 0,875em. Geben Sie das Maß aus dem Entwurf ein, stellen Sie die Schriftgröße des Elternelements ein und übernehmen Sie das Ergebnis direkt ins Stylesheet.
Loading tool editor...
WERBUNG
Wozu Pixel in em umrechnen?
Ein Pixel wird durch eine einzige Division zu em: die Anzahl der Pixel geteilt durch die Schriftgröße des Elternelements. In der Voreinstellung des Browsers hat dieses 16 px, 24 Pixel ergeben also 1,5em und 14 Pixel ergeben 0,875em. Die Einheit em bezieht sich auf die Schriftgröße des umgebenden Elements [1].
Das ist die häufigere Richtung im Alltag. Der Entwurf kommt mit Maßen in Pixeln, weil Grafikprogramme so rechnen, und das Stylesheet wird in em geschrieben, damit ein Maß der Schriftgröße seiner Stelle im Layout folgt.
Das Ergebnis trägt vier Nachkommastellen, denn bei einem Elternelement von 16 px ist ein einzelner Pixel genau 0,0625em, und Schriftgrade ergeben Zahlen wie 0,875 oder 1,125.
Weiter unten finden Sie eine Tabelle mit 30 Maßen bei drei Elterngrößen, eine Tabelle mit acht Situationen samt Antwort auf die Frage nach der Einheit sowie zwei Stellen, an denen em besser abschneidet als rem. Den Weg in die andere Richtung übernimmt der Umrechner von em in Pixel.
Wie rechnet man Pixel in em von Hand um? Formel und Beispiel
Die Formel kennt einen Rechenschritt: em = Pixel ÷ Schriftgröße des Elternelements. Sie ist die Umkehrung der Multiplikation, die em in Pixel verwandelt.
Beispiel für einen Abstand von 20 px: bei einem Elternelement von 16 ergibt das 20 ÷ 16 = 1,25em. Dasselbe Maß in einer Karte mit 14 px Schrift ergibt rund 1,4286em, und in einer Überschrift mit 20 px ergibt es genau 1em.
Maße aus einem Entwurf ergeben oft Brüche: 18 Pixel sind 1,125em, 22 Pixel sind 1,375em und 30 Pixel sind 1,875em. Alle drei sind exakt und werden so ins Stylesheet geschrieben.
Soll ein Maß im ganzen Dokument dasselbe Ergebnis liefern, unabhängig von der Verschachtelung, notiert denselben Pixel in rem der Umrechner von Pixel in rem. Den Unterschied zwischen beiden Einheiten klärt die Tabelle auf der Seite des Umrechners von em in Pixel.
WERBUNG
Wie viele em haben gängige Pixelwerte?
| Wert in Pixel | Elternelement 16 px (Voreinstellung) | Elternelement 14 px (Karte) | Elternelement 20 px (Überschrift) |
|---|---|---|---|
| 1 px | 0,0625 em | 0,0714 em | 0,05 em |
| 2 px | 0,125 em | 0,1429 em | 0,1 em |
| 4 px | 0,25 em | 0,2857 em | 0,2 em |
| 6 px | 0,375 em | 0,4286 em | 0,3 em |
| 8 px | 0,5 em | 0,5714 em | 0,4 em |
| 10 px | 0,625 em | 0,7143 em | 0,5 em |
| 12 px | 0,75 em | 0,8571 em | 0,6 em |
| 13 px | 0,8125 em | 0,9286 em | 0,65 em |
| 14 px | 0,875 em | 1 em | 0,7 em |
| 15 px | 0,9375 em | 1,0714 em | 0,75 em |
| 16 px | 1 em | 1,1429 em | 0,8 em |
| 18 px | 1,125 em | 1,2857 em | 0,9 em |
| 20 px | 1,25 em | 1,4286 em | 1 em |
| 21 px | 1,3125 em | 1,5 em | 1,05 em |
| 22 px | 1,375 em | 1,5714 em | 1,1 em |
| 24 px | 1,5 em | 1,7143 em | 1,2 em |
| 26 px | 1,625 em | 1,8571 em | 1,3 em |
| 28 px | 1,75 em | 2 em | 1,4 em |
| 30 px | 1,875 em | 2,1429 em | 1,5 em |
| 32 px | 2 em | 2,2857 em | 1,6 em |
| 36 px | 2,25 em | 2,5714 em | 1,8 em |
| 40 px | 2,5 em | 2,8571 em | 2 em |
| 44 px | 2,75 em | 3,1429 em | 2,2 em |
| 48 px | 3 em | 3,4286 em | 2,4 em |
| 56 px | 3,5 em | 4 em | 2,8 em |
| 64 px | 4 em | 4,5714 em | 3,2 em |
| 72 px | 4,5 em | 5,1429 em | 3,6 em |
| 80 px | 5 em | 5,7143 em | 4 em |
| 96 px | 6 em | 6,8571 em | 4,8 em |
| 128 px | 8 em | 9,1429 em | 6,4 em |
Die drei Elterngrößen decken drei Situationen ab: 16 px ist die Voreinstellung des Browsers, 14 px begegnet Ihnen in Karten und Tabellen der Oberfläche, 20 px in einer Abschnittsüberschrift.
Wo schneidet em besser ab als rem?
Die erste Stelle ist die Media Query. Innerhalb einer Media Query löst der Browser relative Einheiten gegen den Anfangswert der Schriftgröße auf und nicht gegen das, was Sie am Element html eingestellt haben: die Spezifikation sagt ausdrücklich, dass die Einheiten nie auf Ergebnissen von Deklarationen beruhen [2]. Ein als 48em notierter Umbruchpunkt verhält sich damit auch in einem Projekt vorhersagbar, das die Basisschriftgröße ändert.
Die zweite Stelle sind E-Mail-Vorlagen. Die Einheit em funktioniert in allen Programmen des Testfelds [3], während rem bei 69,05 Prozent Unterstützung liegt und in keiner getesteten Outlook-Version funktioniert, weder unter Windows noch unter macOS [4]. Bei einer E-Mail-Vorlage entscheidet also das Programm der Empfängerin.
Die dritte Stelle ist eine Komponente, die als Ganzes mit ihrer Schrift skalieren soll. Geben Sie einer Schaltfläche font-size: 1.125em und notieren Sie Innenabstand und Eckenrundung in em, dann wächst eine einzige Änderung der Schriftgröße die ganze Schaltfläche proportional mit.
An allen übrigen Stellen – bei Schriftgraden und der Abstandsskala einer ganzen Website – wiegt die Vorhersagbarkeit von rem schwerer. Die Tabelle unten führt acht konkrete Situationen auf, und die Umrechnung in jene Richtung übernimmt der Umrechner von Pixel in rem.
WERBUNG
Welche Einheit passt in welcher Situation?
| Situation | Einheit | Warum |
|---|---|---|
| Schriftgrad von Überschriften und Fließtext | rem | Das Ergebnis bleibt im ganzen Dokument gleich, unabhängig von der Verschachtelung |
| Abstand um den Text einer Schaltfläche | em | Der Innenabstand folgt der Schrift, eine Änderung skaliert das ganze Element |
| Einzug einer verschachtelten Liste | em | Der Einzug soll mit der Schrift der jeweiligen Listenebene wachsen |
| Umbruchpunkt in einer Media Query | em | Der Browser zählt vom Anfangswert der Schriftgröße und nicht vom html-Element |
| Maße in einer E-Mail-Vorlage | em | In allen getesteten Programmen unterstützt, rem fällt in Outlook aus |
| Rahmenstärke und Schatten | px | Eine Haarlinie soll eine Haarlinie bleiben, gleich welche Schriftgröße gilt |
| Abstandsskala im Designsystem | rem | Eine Änderung der Basisschriftgröße verschiebt das ganze Layout auf einmal |
| Maximale Breite einer Textspalte | em | Die Zeilenlänge misst sich in Zeichen, die Breite folgt also der Spaltenschrift |
Acht Situationen, die in jedem Oberflächenprojekt wiederkehren, mit Einheit und Begründung.
Pixel und em nebeneinander
| Merkmal | px | em |
|---|---|---|
| Bezugspunkt | Keiner, ein absoluter Wert | Schriftgröße des Elternelements |
| Voreingestellter Wert | 1 px = 1/96 Zoll | 1em = 16 px |
| Bei Verschachtelung | Immer derselbe Wert | Summiert sich auf jeder Ebene auf |
| Reaktion auf Leseeinstellungen | Bleibt unverändert | Skaliert mit |
| Wo er angegeben wird | Entwürfe, Grafikprogramme, Bilddateien | Stylesheets, E-Mail-Vorlagen |
| Typische Verwendung | Rahmen, Schatten, Haarlinien | Abstand um Text, Listeneinzug, Umbruchpunkt |
WERBUNG
Wann brauchen Sie diese Umrechnung?
Eine E-Mail-Vorlage
rem fällt in Outlook aus, relative Maße werden deshalb in em notiert. Der Umrechner macht aus Entwurfspixeln fertige Werte.Ein Umbruchpunkt im Layout
Die Angabe 48em verhält sich vorhersagbar, weil der Browser in einer Media Query von der Standardtextgröße zählt.Eine Komponente mit einem Parameter
In em notierter Innenabstand und Eckenrundung wachsen mit der Schrift der Schaltfläche, eine Deklaration ändert die ganze Größe.
Pixel in andere Einheiten umrechnen
Weitere Einheitenkonverter entdecken
pt in pxrem in pxem in pxcm in pxmm in pxcm in ZollZoll in cmmm in ZollZoll in mmMeilen in kmkm in MeilenMeter in FußFuß in MeterZoll in FußFuß in ZollPfund in UnzenUnzen in Pfundml in UnzenUnzen in mlLiter in GallonenGallonen in Literkg in PfundPfund in kgkg in GrammGramm in kgkg in StoneStone in kgZoll in pxFuß in pxPica in pxMeter in pxHEX in RGBRGB in CMYKBytes in KBKB in BytesKB in MBMB in KBMB in GBGB in MBKB in GBGB in KBGB in TBTB in GBKB in TBTB in KBUnix in DatumDEC in BINDEC in HEXMbps in MB/s
Quellen
- CSS Values and Units Module Level 4 — W3C
- Media Queries Level 4 – Units — W3C
- CSS unit: em — Can I email
- CSS unit: rem — Can I email
Alle Werte in den Tabellen haben wir aus den Einheitendefinitionen berechnet und vor der Veröffentlichung rechnerisch geprüft. Historische Angaben und die Namen lokaler Einheiten stützen sich auf die oben genannten Quellen.
Inhalt zuletzt geprüft: · erstellt und geprüft vom Arteon-Team
Häufig gestellte Fragen
Wie viele em sind 1 Pixel?
Bei einem voreingestellten Elternelement von 16 px ist ein Pixel 0,0625em. In einer Karte mit 14 px Schrift ergibt derselbe Pixel rund 0,0714em, in einer Überschrift mit 20 px ergibt er 0,05em.
Wie rechnet man px in em um?
Teilen Sie die Anzahl der Pixel durch die Schriftgröße des Elternelements. Bei den voreingestellten 16 px ergibt das 24 ÷ 16 = 1,5em. Der Umrechner oben führt diese Division für jede Elterngröße von 1 bis 200 px aus.
Wie viele em sind 24 px?
1,5em bei einem Elternelement von 16 px, rund 1,7143em bei 14 px und 1,2em bei 20 px. Der Wert 1,5em ist ein üblicher Schriftgrad für eine Abschnittsüberschrift.
Wie viele em sind 14 px?
0,875em beim voreingestellten Elternelement von 16 px. In einer Karte, deren Schrift bereits 14 px misst, ist dasselbe Maß genau 1em.
Wie viele em sind 16 px?
1em beim voreingestellten Elternelement von 16 px. Bei 14 px ergibt es rund 1,1429em und bei 20 px ergibt es 0,8em.
Wie viele em sind 12 px?
0,75em bei einem Elternelement von 16 px. Das ist der kleinste Schriftgrad im üblichen Oberflächengebrauch; darunter wird das Lesen unbequem.
Muss man das Ergebnis in em runden?
Werte wie 0,875 oder 1,125em werden so notiert, wie sie sind. Der Browser rechnet sie exakt, während eine Rundung auf 0,88em das Maß um Bruchteile eines Pixels verschieben würde. Bei der Division durch 14 entstehen periodische Zahlen, dort genügen vier Stellen.
Welche Einheit gehört in eine Media Query?
em. Innerhalb einer Media Query löst der Browser relative Einheiten gegen den Anfangswert der Schriftgröße auf und nicht gegen den am html-Element gesetzten Wert, ein als 48em notierter Umbruchpunkt verhält sich also auch in einem Projekt vorhersagbar, das die Basisschriftgröße ändert.
Funktioniert em in E-Mail-Vorlagen?
Ja, in allen Programmen des Testfelds. Die Einheit rem liegt dort bei 69,05 Prozent Unterstützung und funktioniert in keiner getesteten Outlook-Version, weshalb relative Maße in E-Mail-Vorlagen in em notiert werden.
Sollte das ganze Stylesheet auf em umgestellt werden?
Abstände um Text, Listeneinzüge und Spaltenbreiten ja, denn sie sollen der Schrift ihres Kontextes folgen. Schriftgrade und die Abstandsskala einer ganzen Website gelingen in rem besser, und Rahmen, Schatten und Haarlinien bleiben in Pixeln.
Was unterscheidet em und rem beim selben Maß?
Dieselbe Angabe 1,5em ergibt auf jeder Verschachtelungsebene ein anderes Ergebnis, weil sie vom Elternelement zählt. Die Angabe 1,5rem ergibt im ganzen Dokument 24 Pixel, weil sie vom html-Element zählt. Für Maße, die überall gleich sein sollen, fällt die Wahl auf rem.
Zeigen Grafikprogramme Werte in em?
Figma, Photoshop und Illustrator rechnen in Pixeln oder Punkten und kennen die Einheit em nicht. Ein Maß aus dem Entwurf wird getrennt umgerechnet – mit diesem Umrechner oder durch Ablesen des berechneten Werts im Reiter Computed der Entwicklerwerkzeuge des Browsers.
Helfen Sie uns, unsere Werkzeuge zu verbessern
Haben Sie eine Idee für eine Funktion, einen Fehler gefunden oder möchten Sie ein weiteres Werkzeug vorschlagen? Schreiben Sie uns – wir antworten innerhalb von 24 Stunden.