PX to REM
What the px to rem converter does
Paste CSS and the px to rem converter finds every number followed by px, divides it by your root font size, and writes the result back as a rem value. Paste .title { font-size: 32px; margin: 24px 0 12px; } and you get font-size: 2rem and margin: 1.5rem 0 0.75rem. The rest of the text is untouched.
It runs in your browser. Nothing you paste is uploaded, which matters if the stylesheet belongs to a client, and there is no cap on how long the input can be or how often you convert.
Read this first
It converts every px, not just the ones you meant
This is a text replacement, not a CSS parser. It does not know a font size from a border from a filename. Anything that looks like a number followed by px becomes a rem value.
Three cases catch people out. A hairline border written as 1px comes back as 0.0625rem, which is almost never what you want, since a border you intend to stay one pixel should stay in px. A zero written as 0px becomes 0rem, where plain 0 would do. And a file path like url(icon20px.png) becomes url(icon1.25rem.png), which quietly breaks the reference to that image.
There is no option to skip a value, so the fix is to look. Check the output for borders, outlines and anything inside url() before you paste it back.
How to convert
How to convert px to rem in three steps
One setting, and the default is right for most projects.
- Step 1
- Set the root font size if your project uses something other than 16.
- Step 2
- Paste your CSS and press Convert. Every px value is divided by that number.
- Step 3
- Scan the result for borders and url() paths, then copy it.
The base number
Setting the root font size
The box marked Root font size is the number every px value gets divided by. It defaults to 16, which is the browser default in practice, so 16px comes back as 1rem and 24px as 1.5rem.
Change it if your project sets html to something else. Enter 10 and 18px becomes 1.8rem. Enter zero or a negative number and nothing converts: you get the message Enter a valid root font size instead, because dividing by those produces no usable result.
The numbers
Why some results have very long decimals
Nothing here rounds. The division result is written out exactly as the browser calculates it, and at a base of 16 that is usually tidy, because dividing by 16 lands on clean fractions: 12px gives 0.75rem, 13px gives 0.8125rem, 32px gives 2rem.
Other bases are less kind. At a base of 15, 10px comes back as 0.6666666666666666rem, with sixteen decimal places. That is the true value, and the browser will treat it correctly, but it is unpleasant to read in a stylesheet. Some converters round to two places instead. This one does not, and there is no rounding setting, so trim long values by hand if you care how the file reads.
Why bother
Why rem respects a reader's font size and px does not
Pixels are absolute and rem units are relative, and that difference is the whole reason for converting. A size written in px is fixed, so it ignores the font size a person has chosen in their browser settings. A size written in rem is a multiple of that setting, so it scales with it.
The people this affects are readers who raise their default font size, often for low vision or for cognitive reasons, and it is why rem is tied to accessibility guidance on text resizing and readability. Typography and spacing are where the conversion pays off most. Borders and hairlines are exactly where it does not, which is the other reason to check the output.
The rules
Exactly what the converter matches
Worth knowing so you can predict the output rather than guess at it. A number directly followed by px matches, and the match is case-insensitive, so 20PX converts too, though the result is always written in lowercase as rem.
Negative values work: -8px becomes -0.5rem. Decimals work, including ones written with a leading dot. What does not match is a space between the number and the unit, so 20 px is left alone, and a unit with anything appended, so 20pxx is left alone as well.
Who uses it
Who uses a px to rem converter, and when
Front-end developers converting an existing stylesheet that was written in pixels, usually as part of an accessibility pass, and usually after somebody raised text resizing in a review. Doing it by hand across a large file is tedious and error-prone, and doing it here takes one paste.
Designers translating a mockup whose values are all in pixels into the units the codebase actually uses. And anyone working on a client project who does not want to paste that client's stylesheet into a hosted converter, which on this route is not a concern, because nothing leaves the browser.