px Dev

PX to REM and EM Converter

Type a pixel, rem or em value and the other two update live from your root font size, 16px by default, plus a table from 8 to 96 px in pt too.

Base size (root font-size): px

Pixels (px)

REM

EM (assuming parent = root)

Reference table (base 16px)

px	rem	pt (aprox.)

REM vs EM vs PX

px: absolute size, does not scale with user preferences.

rem: relative to the root element (html). Scalable. Recommended for accessible typography.

em: relative to the parent element. Useful for padding and margin proportional to local text.

Convert px to rem and em

Relative units like rem and em make a layout more accessible and easier to scale, which is why they're the way of modern CSS. The catch is that most of us still reason in pixels. This converter closes that distance: type the value in px and get the equivalent in rem and em, or go the other way around.

Since the conversion depends on the base font size, usually 16px, we left that base configurable so the number lines up with what's in your project. There's also a reference table with the most common sizes, good for a quick lookup while you build the stylesheet.

The whole calculation happens in the browser. It serves web developers well when they want to move to relative units without redoing division in their head for every measurement.

Frequently asked questions

Why do rem and em always show the same number here?

Because the converter assumes the parent element carries the same font size as the base you typed. On a real page rem always points at the root, while em points at the immediate parent and compounds: inside a block set to 0.5em, a child at 0.5em ends up at a quarter of the root size. For nested cases, put the parent's size in the base field.

Should I move the base from 16px to 10px, as people often suggest?

The 16px base is what practically every browser ships by default. The trick that makes 1rem equal 10px works when you set 62.5% on the root element, because a percentage still follows whatever size the reader picked in their settings. Pinning the root to 10px in pixels is what cancels that preference and hurts anyone who enlarges text. If you adopt 62.5%, type 10 in the base field.

Is the pt column meant for print?

It uses the fixed CSS relationship where 1px equals 0.75pt, since the spec defines 96px and 72pt to the inch. That makes it useful for lining up sizes coming from a word processor or a design file. The sum ignores the base you configured and any screen zoom, though, so read the column as a reference rather than a physical measurement on paper.

Related Tools

📐

CSS Clamp Calculator

Generate CSS clamp() values for fluid typography and spacing. Enter minimum/maximum sizes and viewport widths to get a ready-to-paste clamp() function.

📐

CSS Unit Converter

Convert between px, em, rem, %, pt, vh, vw for common design values — configurable 16 px base. Everything in your browser.

⏳

CSS Loader Generator

Create pure-CSS spinners and loaders in 8 styles (ring, dots, pulse, bars, etc.). Adjust color, size and speed. No libs, no GIFs. Everything in your browser.

Programming Case Converter (camelCase, snake_case)

Convert text between camelCase, PascalCase, snake_case, SCREAMING_SNAKE_CASE, kebab-case, dot.case, Title Case and more with one click. Perfect for renaming variables and API fields.

📐

Typographic Scale

Generate a harmonic typographic scale based on a ratio (1.125, 1.25, 1.333, 1.5, 1.618). Output in rem, px and CSS clamp.

🎬

prefers-reduced-motion CSS

Builds the @media (prefers-reduced-motion: reduce) block that neutralises animations, transitions and smooth scrolling, page-wide or only inside .anima.