HesapHanem

PX to REM Converter

Convert CSS pixel sizes to rem.

How it is calculated

In CSS, 1 rem equals the font size of the root element. The tool divides the pixel value by that base size: rem = px / base. If you leave the base empty or enter a value that is not positive, it uses 16 px, the usual browser default. It also gives points with pt = px × 0.75, since CSS defines 96 px as 72 pt.

Both results are rounded to two decimals. Negative pixel values are converted as they are. The conversion only holds for the base you give: if the page sets html { font-size: 62.5% } the root size is 10 px, and users who raise the browser's default font size will see rem values scale with it, while px values do not.

Worked example

You want a 24 px heading and the page base font size is 16 px. rem = 24 / 16 = 1.5. Points = 24 × 0.75 = 18. The tool shows 1.50 rem and 18.00 pt, so in CSS you can write 1.5rem for this heading.

Try this example →

Common mistakes

  • Assuming 1 rem is always 16 px; it follows the root font size of the page, which may be changed.
  • Mixing up rem with em: em depends on the parent element, rem on the root.
  • Using the points result for screen sizes; points are meant for print and the tool's 0.75 factor is a CSS definition.
  • Entering the root size in the pixel field and the target size in the base field.

About this calculator

This converter turns a pixel value into rem units by dividing by a base font size (16px by default, since that's the typical browser default), and also shows the equivalent in points. Because rem is relative to the root font size, this is exactly the math a browser does in reverse when it renders rem-based CSS.

Front-end developers use it constantly when converting a design file's pixel measurements (from Figma or Sketch) into the rem units used in a CSS stylesheet, which keeps typography and spacing scaling properly when a user changes their browser's font size.

Was this helpful?

You can pick up to 3 reactions.

Comments (1)

  • Editorial team

    One catch for media queries: browsers resolve rem there against the initial font size of the browser, not against a smaller or larger size you set on the html element. So a breakpoint of 48rem does not follow a 62.5% root trick, and only the browser default counts. Inside the page itself, the base you enter should match your root size. Which base size do your projects use?

Popular calculators

Loan Calculator

Monthly payment, total interest and full amortization schedule.

Percentage Calculator

Percent change, percent of, and ratio calculations.

Discount Calculator

Calculate final price, savings, and discount amount.

BMI Calculator

Body mass index from height and weight (metric or imperial).

Age Calculator

Compute your exact age in years, months and days from a birth date.

Compound Interest Calculator

Calculate the final amount and interest earned with compounding.

All Calculators