Die Umrechnung ist eine einzige Division, und der ganze Wert der Sache liegt darin, was der Divisor bedeutet. Ein rem ist die Schriftgröße des Wurzelelements, eine in rem geschriebene Länge ist also relativ zu dem, was die lesende Person in ihrem Browser eingestellt hat. Wer seine Standardschriftgröße erhöht hat, bekommt ein Layout, das mitwächst; dasselbe Layout in Pixeln ignoriert ihn vollständig. Das ist das Argument der Barrierefreiheit, und deshalb lohnt es sich, die Rechnung zu automatisieren — nicht weil sie schwierig wäre.
Fügen Sie so viele Werte ein, wie Sie möchten, getrennt durch Leerzeichen, Kommas, Semikolons oder Zeilenumbrüche; jeder wird zu einer Zeile der Tabelle. Ein angehängtes px oder rem wird entfernt, bevor die Zahl gelesen wird, Sie können also direkt aus einer Stylesheet-Datei einfügen. Einträge, die keine Zahlen sind, werden übersprungen und gezählt, statt den ganzen Durchlauf scheitern zu lassen, und die ersten fünfhundert Werte werden umgerechnet.
Eine Wurzelgröße wählen und wissen, wo rem nicht gilt
-
Die Standard-Wurzelgröße ist in jedem großen Browser 16px:
Das ist der Wert, gegen den Sie umrechnen, sofern Sie ihn nicht bewusst geändert haben. Die Wurzel auf 62.5% zu setzen, damit 1rem gleich 10px ist, tauscht bequeme Rechnerei gegen ein Stylesheet, das bricht, sobald diese eine Regel je entfernt wird.
-
Ergebnisse werden auf vier Nachkommastellen gerundet:
Das ist weit feiner, als irgendein Bildschirm darstellen kann. Runden Sie in Ihrem Stylesheet weiter, wenn Sie lesbarere Zahlen bevorzugen; der sichtbare Unterschied ist null.
-
Media Queries sind die eine Stelle, an der rem nicht relativ zu Ihrer Wurzel ist:
Eine Query wird gegen die anfängliche Schriftgröße des Browsers aufgelöst, nicht gegen die von Ihnen gesetzte Wurzelgröße; die Wurzel zu ändern verschiebt Ihre Breakpoints also nicht.
-
Nicht jede Länge sollte umgerechnet werden:
Rahmen, Haarlinien und alles, was eine feste physische Größe behalten soll, liest sich in Pixeln besser. Skalieren Sie Schrift, Abstände und Containerbreiten; lassen Sie eine Ein-Pixel-Linie bei einem Pixel.
The division is not the point
Converting pixels to rem is one division, and nobody needs help with it. The reason it is worth doing at all is what the divisor means.
A rem is the font size of the root element — which is to say, whatever the reader has set their browser to. Someone who has increased their default text size because they need to gets a layout that grows with them. The same layout written in pixels ignores that person completely. That is the accessibility argument, and it is the entire case for the unit.
The [msm_tool slug="px-to-rem"] converts in batches against whatever root you specify, which matters when you are migrating an existing stylesheet rather than starting fresh.
16px is the number
Every major browser defaults its root font size to 16 pixels. Unless your stylesheet deliberately sets something else, that is the figure to convert against.
You will find advice to set the root to 62.5%, making 1rem equal 10px so the arithmetic is trivial. It works, and it trades easy mental maths for a stylesheet that breaks entirely if that one rule is ever removed or overridden. It also means every rem value in your codebase is meaningless without knowing about the trick. Most teams that adopt it eventually regret it.
What to convert, and what to leave
Not every length should scale with the reader's text size.
- Convert: font sizes, line heights, padding and margins around text, container widths, gaps between elements. Anything whose job is to give text room to breathe should grow when the text does.
- Leave in pixels: borders and hairlines, box-shadow blur radii in most cases, and anything meant to stay a fixed physical size. A one-pixel rule should stay one pixel; scaling it to 1.0625 pixels helps nobody.
- Consider neither: some values are better as percentages or viewport units. A full-bleed section is
100vw, not a converted pixel value.
rem and em are not interchangeable
A rem is always relative to the root. An em is relative to the font size of its own element, which means ems compound as they nest.
Set a list item to 0.9em and nest three levels of lists, and the innermost is at 0.73 of the base without anyone intending it. That compounding is occasionally exactly what you want — padding inside a button expressed in em scales automatically with the button's own font size, which is genuinely useful — but it is a deliberate choice rather than a default.
The rule of thumb: rem for anything that should relate to the page, em for anything that should relate to its own element's text.
Media queries do not use your root
This one surprises people. A rem inside a media query resolves against the browser's initial font size, not the root font size you set in your stylesheet.
So if you set the root to 62.5% and then write @media (min-width: 48rem), that breakpoint is at 768 pixels, not 480. Changing the root does not move your breakpoints, and expecting it to is a reliable source of layouts that break at the wrong widths.
Rounding
The converter reports four decimal places, which is far finer than any screen can render. Round further in your stylesheet if you prefer readable numbers — the visual difference between 1.4375rem and 1.44rem is nothing.
Where it does matter is consistency. Rounding some values and not others produces a scale that drifts, and a type scale that is nearly-but-not-quite proportional looks worse than one that is obviously stepped.
Migrating an existing stylesheet
Converting everything at once rarely goes well. A workable order:
- Font sizes first. They are the highest value and the easiest to verify by eye.
- Then vertical spacing — margins and padding above and below text. This is where the benefit shows: text that grows without its surrounding space growing looks cramped.
- Then container widths. Test at increased browser text size before and after; this is the step that reveals layouts assuming a fixed character count per line.
- Leave borders, shadows and decorative sizes alone unless you find a reason.
Test by setting your browser's default font size to 20 or 24 pixels and using the site. That is the check the conversion exists to pass, and it is the one nobody runs.