What is PX・Rem Calculator?

A calculator for converting between pixel and rem values in both directions. With a chosen base font size, you can turn 24px into 1.5rem, or check what 2rem resolves to in pixels.

It is useful when you want to replace fixed px values with relative units in CSS, port sizes from a design file into code, or preview the effect of changing the root font size. All conversion runs in your browser in real time, and no input is sent to a server.

How to Use

1. Pick a conversion direction: px → rem or rem → px.
2. Set the base font size (the default is 16px).
3. Enter a value in the input field. The result on the other side updates immediately.
4. Use the copy button next to the result to grab the value.
5. Scroll down to the reference tables for common values.

Main Settings

Conversion Direction

Switch between px → rem and rem → px. Choose px → rem when porting values from a design file into CSS, and rem → px when you want to feel the actual pixel size of a rem value you already have in code.

Base Font Size

The conversion baseline. 16px is the browser default and a common choice, but if your project sets a different value on :root, adjust this anywhere from 8px to 128px to match. Changing this value recomputes the input result and both reference tables at once.

Decimal Precision

Choose how many decimal places the rem output shows: 0, 1, or 2. Each option is labeled with a short example.

• 0 (e.g. 1rem): rounded, quick eyeballing
• 1 (e.g. 1.5rem): typical range for most rem-based designs
• 2 (e.g. 1.25rem): finer steps such as Tailwind-style 0.125 increments

Common Conversion Tables

Two side-by-side tables list frequently used px values from 8px to 96px and rem values from 0.25rem to 8rem. They are handy for checking common font-size, padding, and margin values without retyping them.

How the Calculation Works

The formulas are straightforward:

rem = px ÷ base font size
px = rem × base font size

With a base of 16px, 24px becomes 1.5rem, 32px becomes 2rem, and 1.25rem becomes 20px. If you switch the base to 10px, the same 24px becomes 2.4rem instead, which is why picking the right baseline matters in rem-based design systems.

Use Cases

• Translating px values from a design file into rem for CSS
• Previewing how every size shifts when the root font size changes
• Standardizing common paddings, margins, and heading sizes in rem
• Quickly checking the actual pixel size of a rem value while writing CSS

Things to Keep in Mind

• rem values are resolved against the root element's font size, so if your project sets html { font-size: ... }, match that value in the base font size setting
• If the base font size in the tool does not match your project, the result will not match the actual rendered size
• Users who change their browser's default font size for accessibility will see the final rem values scale with their own settings