Entwurf in Code überführen
Der Entwurf nennt 24 px Abstand, das Stylesheet soll 1,5rem bekommen. Das ist der häufigste Weg in der täglichen Arbeit an einer Oberfläche.
Rechnen Sie Pixel in rem um, mit jeder Basis
In der Voreinstellung des Browsers sind 24 Pixel 1,5rem und 14 Pixel 0,875rem. Geben Sie den Wert aus dem Entwurf ein, stellen Sie die Basis-Schriftgröße ein und übernehmen Sie das Ergebnis direkt ins Stylesheet.
Loading tool editor...
WERBUNG
Wozu Pixel in rem umrechnen?
Pixel werden durch eine einzige Division zu rem: die Pixelzahl geteilt durch die Basis-Schriftgröße. In der Voreinstellung des Browsers beträgt diese Basis 16 px, 24 Pixel ergeben also 1,5rem und 14 Pixel ergeben 0,875rem. Die Einheit rem bezieht sich auf die Schriftgröße des Elements html, also auf die Wurzel des Dokuments [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 rem geschrieben, damit das Layout den Einstellungen der Leserin folgt.
Das Ergebnis geben wir auf vier Nachkommastellen an, denn bei einer Basis von 16 px ist ein einzelnes Pixel genau 0,0625rem, und Schriftgrade ergeben Werte wie 0,875 oder 1,125.
Weiter unten finden Sie eine Tabelle mit 30 Werten bei drei Basen, den Weg zur automatischen Umrechnung im Projekt sowie eine Übersicht der CSS-Eigenschaften mit der Antwort, welche davon nach rem gehört. Den Weg in die andere Richtung übernimmt der Umrechner von rem in Pixel.
Wie rechnet man Pixel in rem von Hand um? Formel und Beispiel
Die Formel kennt einen Rechenschritt: rem = Pixel ÷ Basis-Schriftgröße. Es ist die Umkehrung der Multiplikation, die rem in Pixel verwandelt.
Beispiel für einen Abstand von 20 px: bei einer Basis von 16 ergibt das 20 ÷ 16 = 1,25rem. Derselbe Wert bei der 10-Pixel-Basis aus der 62,5-Prozent-Technik ergibt 2rem, denn das Teilen durch zehn geht im Kopf.
Werte aus einem Entwurf ergeben oft Brüche: 18 Pixel sind 1,125rem, 30 Pixel sind 1,875rem und 22 Pixel sind 1,375rem. Alle drei sind exakt, und so hält sie auch der Großteil der Gestaltungssysteme fest, Sie schreiben sie also unverändert ins Stylesheet.
Die Einheit em rechnet genauso, teilt aber durch die Schriftgröße des Elternelements statt durch die der Wurzel – diese Rechnung übernimmt der Umrechner von Pixel in em. Soll das Maß dagegen aufs Papier, rechnet dieselbe Datei der Umrechner von Pixel in Zoll um.
WERBUNG
Wie viele rem haben gängige Pixelwerte?
| Wert in Pixeln | Basis 16 px (Voreinstellung) | Basis 10 px (62,5 %) | Basis 20 px (vergrößerter Text) |
|---|---|---|---|
| 1 px | 0,0625 rem | 0,1 rem | 0,05 rem |
| 2 px | 0,125 rem | 0,2 rem | 0,1 rem |
| 4 px | 0,25 rem | 0,4 rem | 0,2 rem |
| 6 px | 0,375 rem | 0,6 rem | 0,3 rem |
| 8 px | 0,5 rem | 0,8 rem | 0,4 rem |
| 10 px | 0,625 rem | 1 rem | 0,5 rem |
| 12 px | 0,75 rem | 1,2 rem | 0,6 rem |
| 14 px | 0,875 rem | 1,4 rem | 0,7 rem |
| 16 px | 1 rem | 1,6 rem | 0,8 rem |
| 18 px | 1,125 rem | 1,8 rem | 0,9 rem |
| 20 px | 1,25 rem | 2 rem | 1 rem |
| 22 px | 1,375 rem | 2,2 rem | 1,1 rem |
| 24 px | 1,5 rem | 2,4 rem | 1,2 rem |
| 28 px | 1,75 rem | 2,8 rem | 1,4 rem |
| 30 px | 1,875 rem | 3 rem | 1,5 rem |
| 32 px | 2 rem | 3,2 rem | 1,6 rem |
| 36 px | 2,25 rem | 3,6 rem | 1,8 rem |
| 40 px | 2,5 rem | 4 rem | 2 rem |
| 44 px | 2,75 rem | 4,4 rem | 2,2 rem |
| 48 px | 3 rem | 4,8 rem | 2,4 rem |
| 56 px | 3,5 rem | 5,6 rem | 2,8 rem |
| 60 px | 3,75 rem | 6 rem | 3 rem |
| 64 px | 4 rem | 6,4 rem | 3,2 rem |
| 72 px | 4,5 rem | 7,2 rem | 3,6 rem |
| 80 px | 5 rem | 8 rem | 4 rem |
| 96 px | 6 rem | 9,6 rem | 4,8 rem |
| 128 px | 8 rem | 12,8 rem | 6,4 rem |
| 160 px | 10 rem | 16 rem | 8 rem |
| 192 px | 12 rem | 19,2 rem | 9,6 rem |
| 256 px | 16 rem | 25,6 rem | 12,8 rem |
Die drei Basen decken drei Situationen ab: 16 px ist die Voreinstellung des Browsers, 10 px stammen aus der 62,5-Prozent-Technik, und 20 px ist ein typischer Wert bei jemandem, der den Text in den Einstellungen vergrößert hat.
Wie rechnet man Pixel im Projekt automatisch in rem um?
Für einen einzelnen Wert genügt der Umrechner oben. Für ein ganzes Stylesheet wandert die Rechnung in ein Werkzeug, das sie bei jedem Bauen des Projekts ausführt.
Im Präprozessor schreiben Sie eine Funktion, die die übergebene Zahl durch die Basis teilt. In Sass sieht das so aus: @function rem($px) { @return math.div($px, 16) * 1rem; }, und in der Regel steht dann padding: rem(24), woraus 1.5rem wird. Die Basis liegt damit an einer Stelle und wird einmal geändert.
Der zweite Weg arbeitet am fertigen Stylesheet und verlangt keine Änderung der Schreibweise. Das Plugin postcss-pxtorem, in den Build-Schritt eingehängt, geht die Ausgabedatei durch und tauscht Pixel gegen rem nach der eingestellten Basis. In den letzten 30 Tagen wurde es im npm-Verzeichnis mehr als 870.000 Mal heruntergeladen [2].
Der dritte Weg sind CSS-Variablen. Sie schreiben --space-6: 1.5rem einmal ins Stylesheet und beziehen sich danach auf den Namen statt auf die Zahl. Die Umrechnung geschieht dann ein einziges Mal, beim Festlegen der Skala, und nicht bei jeder Regel.
WERBUNG
Welche Eigenschaften wandern nach rem, welche bleiben in Pixeln?
| CSS-Eigenschaft | Nach rem? | Warum |
|---|---|---|
| font-size | Ja | Der Kern der ganzen Übung – der Schriftgrad soll auf die Browsereinstellung reagieren |
| padding und margin | Ja | Der Abstand um Text soll mit ihm wachsen, sonst wird es bei größerer Schrift eng |
| Breite einer Textspalte | Ja | Die Zeilenlänge misst sich in Zeichen, die Breite folgt also dem Schriftgrad |
| line-height | Nein, ohne Einheit | Ein bloßer Faktor wie 1.5 vererbt sich in jeder Verschachtelung korrekt |
| border-width | Nein | Eine Haarlinie soll eine Haarlinie bleiben, unabhängig vom Schriftgrad |
| box-shadow | Nein | Ein Schatten ist ein grafischer Effekt ohne Bezug zur Schriftgröße |
| border-radius | Meist nicht | Der Radius beschreibt die Form eines Elements, nicht seinen Inhalt |
| Haltepunkte in Media Queries | Ja, aber in em | In einer Media Query rechnet der Browser ab der voreingestellten Schriftgröße und nicht ab dem html-Element, em verhält sich dort also vorhersehbar <a class="source-ref" href="#zrodlo-3">[3]</a> |
Beim Überarbeiten eines bestehenden Stylesheets muss nicht alles umgerechnet werden. Der Tausch von Pixel gegen rem lohnt sich dort, wo ein Maß mit dem Text der Leserin mitwachsen soll.
Pixel und rem im Vergleich
| Eigenschaft | px | rem |
|---|---|---|
| Bezugspunkt | Keiner, ein absoluter Wert | Schriftgröße des html-Elements |
| Voreingestellter Wert | 1 px = 1/96 Zoll | 1rem = 16 px |
| Reaktion auf Einstellungen der Leserin | Bleibt unverändert | Skaliert mit ihnen mit |
| Wo er angegeben wird | Entwürfe, Grafikprogramme, Bilddateien | Stylesheets, Gestaltungssysteme |
| Typische Verwendung | Rahmen, Schatten, Haarlinien | Schriftgrade, Abstände, Breiten |
| Automatisierung | Wert direkt eingetragen | Funktion im Präprozessor oder Plugin im Build-Schritt |
WERBUNG
Wann brauchen Sie diese Umrechnung?
Skala des Projekts festlegen
Statt bei jeder Regel zu rechnen, definieren Sie einmal CSS-Variablen oder eine Funktion im Präprozessor und beziehen sich auf die Namen.Altes Stylesheet überarbeiten
Bei der Umstellung von Pixel auf rem rechnen Sie Schriftgrade und Abstände um, während Rahmen und Schatten unverändert bleiben.Prüfung der Barrierefreiheit
In rem geschriebene Werte wachsen mit der Einstellung der Leserin, was WCAG 1.4.4 mit der Vergrößerung auf 200 Prozent verlangt [4].
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
- postcss-pxtorem — npm
- CSS values and units – length — MDN Web Docs
- Understanding SC 1.4.4: Resize Text (WCAG 2.2) — W3C
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 rem ist 1 Pixel?
Bei der voreingestellten Basis von 16 px ist ein Pixel 0,0625rem. Bei der 10-Pixel-Basis aus der 62,5-Prozent-Technik ergibt dasselbe Pixel 0,1rem und bei vergrößertem Text mit 20 px 0,05rem.
Wie rechne ich px in rem um?
Teilen Sie die Pixelzahl durch die Basis-Schriftgröße. Bei den voreingestellten 16 px ergibt das 24 ÷ 16 = 1,5rem. Der Umrechner oben führt diese Division für jede Basis von 1 bis 100 px aus.
Wie viele rem sind 24 px?
1,5rem bei einer Basis von 16 px, 2,4rem bei 10 px und 1,2rem bei 20 px. Der Wert 1,5rem ist ein üblicher Schriftgrad für Abschnittsüberschriften.
Wie viele rem sind 14 px?
0,875rem bei der voreingestellten Basis von 16 px. Diesen Wert tragen meist Feldbeschriftungen und Hilfetexte unter einem Eingabefeld.
Wie viele rem sind 20 px?
1,25rem bei einer Basis von 16 px. Bei einer Basis von 10 px ergeben sich runde 2rem, was in Projekten mit umfangreicher Abstandsskala für die 62,5-Prozent-Technik spricht.
Wie viele rem sind 12 px?
0,75rem bei einer Basis von 16 px. Das ist der kleinste Schriftgrad, der in Oberflächen üblicherweise vorkommt – darunter wird das Lesen unbequem.
Wie viele rem sind 40 px?
2,5rem bei einer Basis von 16 px, 4rem bei 10 px und 2rem bei 20 px. Werte dieser Größenordnung beschreiben eher Abstände zwischen Abschnitten als Schriftgrade.
Wie viele rem sind 80 px?
5rem bei der voreingestellten Basis von 16 px. Bei einer Basis von 10 px ergeben sich 8rem und bei 20 px 4rem.
Muss man das Ergebnis in rem runden?
Werte wie 0,875 oder 1,875rem schreibt man unverändert, und so halten es auch die meisten Gestaltungssysteme. Der Browser rechnet sie genau, während eine Rundung auf 0,88rem den Schriftgrad um den Bruchteil eines Pixels verschieben würde.
Wie rechne ich Pixel automatisch in rem um?
Im Präprozessor schreiben Sie eine Funktion, die durch die Basis teilt, und tippen dann rem(24) statt einer Zahl. Am fertigen Stylesheet erledigt das Plugin postcss-pxtorem die Arbeit im Build-Schritt. Der dritte Weg sind CSS-Variablen mit einmal festgelegter Skala.
Soll alles im Stylesheet nach rem wandern?
Schriftgrade, Abstände und Breiten von Textspalten – ja, denn sie sollen mit der Einstellung der Leserin wachsen. Rahmen, Schatten und Haarlinien bleiben in Pixeln, und die Zeilenhöhe schreibt man ohne Einheit, als bloßen Faktor.
Welche Einheit gehört in Media Queries?
em. In einer Media Query löst der Browser relative Einheiten gegen die voreingestellte Schriftgröße auf und nicht gegen den auf dem html-Element gesetzten Wert, ein in em geschriebener Haltepunkt verhält sich also auch dann vorhersehbar, wenn das Projekt die 62,5-Prozent-Technik nutzt.
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.