PX to REM Converter

What is a px to rem converter?

A pixel is an absolute length. A rem is relative: it means the font size of the root element, which is the html element on every web page. Converting between them is division — px divided by the root gives rem, rem times the root gives px — and the only question is what the root actually is.

Nearly every converter answers 16 and moves on. That is the number browsers ship with, and it is right most of the time, but it is a browser default rather than anything the standard requires. CSS defines the initial value of font-size as the keyword medium and leaves it to the browser to decide what medium means in pixels. Nowhere does the specification fix a pixel value for it.

So the root here is a control, not a constant. Change it and the conversion, the reference table and the scaling panel all follow, which is the honest way to present a unit whose entire point is that it moves.

How to use the px to rem converter

1. Pick a direction and type your value. px to rem for converting a design handoff, rem to px for checking what a stylesheet will actually render. Everything updates as you type.
2. Set the root font size. Leave it at 16 to match the common browser default, or move it to see what your stylesheet does for a reader who has chosen larger text. The reference table below re-computes for whatever you pick.
3. Read the scaling panel before you copy anything. It shows what three different root declarations give a reader at each browser setting, and the em panel below it shows what happens when you reach for em instead.

Why rem is recommended, and how to undo the benefit by accident

The reason accessibility guidance points at rem is that it inherits the reader's own decision. Somebody who has set their browser text to 24px has told you they need text half again as large as the default, and a layout built in rem gives it to them everywhere at once.

It is easy to throw that away in one line. Writing html { font-size: 16px } replaces the reader's setting with yours. Every rem on the page then resolves against 16 no matter what they chose, so our 24px reader receives exactly two thirds of what they asked for — a third short — and no amount of rem further down the stylesheet can recover it. The units are relative; the thing they are relative to is now a constant.

Percentages do not have this problem, and this is where the folklore gets it backwards. The 62.5% trick, which sets html { font-size: 62.5% } so that 1rem becomes a convenient 10px, is often described as an accessibility hazard. It is not. A percentage multiplies whatever the reader chose: at their default it gives 10px, at a 24px setting it gives 15px, and the whole page scales with them exactly as it should. What breaks accessibility is the unit, not the number — px freezes, per cent scales.

The scaling table on this page works that out for you at five browser settings. The only row that ever falls short is the pinned-pixel one.

Why not em, and one spec rule worth knowing

em looks interchangeable with rem and behaves completely differently. em is relative to the font size of the element it is used on, so nesting multiplies. Four levels of elements each set to 1.25em do not come out 25% larger than the base — they come out at 1.25 to the fourth power, which is 2.44 times, and the last one is nearly two and a half times the size you thought you were specifying. The em panel above shows the chain for whatever factor you type.

rem does not compound, because every rem on the page is measured against the same root. That single difference is the reason the unit was introduced, and it is the whole basis for the usual advice: em for things that genuinely should scale with their local context, like padding inside a button that grows with its label, and rem for anything you want to be predictable.

There is one rule worth knowing because it looks like it should be circular and is not. When rem appears in the root element's own font-size, it refers to that property's initial value rather than to itself. So html { font-size: 2rem } is twice the initial value, and it does not recurse. It is a corner you will rarely visit, but it is defined rather than undefined behaviour.

Honest limits

This tool cannot tell you what any particular reader's root font size actually is. Nothing can, from the outside — that is the point of the setting. What it can do is show you what your stylesheet gives them at each plausible value, so you can decide whether your design survives it.

The rem figures are shown to four decimal places and never rounded further, because 15px at a 16px root is 0.9375rem exactly and 0.94rem is a different size. Where a value does not land on a clean number the tool says so rather than quietly rounding, and every value it displays converts back to the pixel figure you started with.

One thing outside its scope: browser zoom is not the same as a font-size preference. Zoom scales everything including px, so a px-based layout still enlarges under zoom — which is exactly why px layouts can look fine to a developer testing with zoom and still fail the reader who changed their default text size instead. The two are different settings and only one of them rem responds to.

Why is it free?

Because a division costs us nothing. The whole tool is a few kilobytes of JavaScript running in your own browser — no values are uploaded, nothing is stored, and there is no server involved to see what you are designing.

So there is no account, no sign-up and no limit. Convert a whole design system's worth of spacing values if you like; it is exactly as free the thousandth time as the first.