RSRobince Studio

PX to REM Converter

Convert pixel values to rem or em units for flexible, accessible CSS. Set your root font size, enter a value and copy the result as a ready-made declaration.

Runs in your browser. Your files are never uploaded.

Loading PX to REM Converter…

How to use PX to REM Converter

  1. Set the root font size; browsers default to 16px.
  2. Type a pixel value to see its rem and em equivalents, or type a rem value to see pixels.
  3. Check the table of common sizes for quick reference.
  4. Press Copy CSS and paste the declaration into your stylesheet.

How the conversion works

The formula is simple: rem = px ÷ root font size, and px = rem × root font size. With the browser default of 16px, 24px becomes 24 ÷ 16 = 1.5rem, and 0.75rem becomes 0.75 × 16 = 12px. The em conversion uses the same maths but divides by the parent element font size instead of the root, which is why this tool has a separate parent field.

Results are rounded to four decimal places, which is far finer than any screen can display. Dividing by 16 always produces a terminating decimal, so common sizes such as 14px (0.875rem) and 18px (1.125rem) are exact.

When to use each unit

  • Use rem for font sizes, margins and padding so the layout respects user font settings.
  • Use em for components that should scale with their own font, such as a button whose padding grows with its text.
  • Keep px for hairline borders, box shadows and details that should not scale.
  • Media queries behave best in em or rem, because they then follow zoom and font size changes.

Things to watch for

The tool assumes the root font size you type. If your site sets a different value on the html element, enter that number or the results will be off. Remember that nested em values multiply: a child at 1.2em inside a parent at 1.2em is 1.44 times the original size. Browsers also enforce minimum font sizes in some settings, which no unit can override. Everything is calculated locally in your browser; no CSS or values are sent anywhere.

Why use this px to rem converter tool

  • Configurable root size. Works with 16px, 10px, 62.5% setups or any other root font size you use.
  • Both directions. Pixels to rem and em, and rem back to pixels.
  • Common sizes table. Quick lookups for 8px through 64px at your chosen root size.
  • Copy CSS. Copies a font-size line with the original pixel value in a comment.

Frequently asked questions

What is the difference between rem and em?

A rem is relative to the root element font size, so it is the same everywhere on the page. An em is relative to the font size of the parent element, so nested elements can compound. Use rem for predictable sizing and em when a component should scale with its own text size.

Why use rem instead of px?

Users can change their browser default font size for readability. Sizes in rem follow that preference, whereas pixel font sizes can ignore it in some situations. That makes rem a better default for text, spacing and layout in accessible designs.

What is the 62.5% root trick?

Some developers set html to font-size: 62.5%, making 1rem equal 10px for easy mental maths. It works, but you must then restore body text sizes explicitly, and it still honours user preferences because it is a percentage. Enter 10 as the root size here to match it.

More free tools

Base64 Encode & Decode

Encode text to Base64 or decode Base64 back to text. Supports UTF-8 and URL-safe Base64. Free, instant and runs in your browser.

Open tool

URL Encode & Decode

Encode or decode URLs and query strings with percent-encoding. Choose component or full-URL mode. Free, instant and private.

Open tool

UUID Generator

Generate random version 4 UUIDs (GUIDs) in bulk. Copy one or hundreds, in uppercase or without hyphens. Uses your browser’s secure random generator.

Open tool