What is the px to rem formula?

Divide the pixel value by the root font size: rem = px / root. With the browser default of 16px, 24px / 16 = 1.5rem. To reverse it: px = rem * root, so 1.5rem * 16 = 24px.

What is the default root font size?

All major browsers set the root (html) font size to 16px unless the page overrides it. So 1rem = 16px, 0.5rem = 8px, and 2rem = 32px out of the box.

What is the 62.5% trick and when should I use it?

Setting html { font-size: 62.5%; } makes the root 10px (62.5% of 16px), so rem values match px ÷ 10, which is easier arithmetic. For example, 14px becomes 1.4rem instead of 0.875rem. Set the root field to 10 in this converter to use it. The downside is that it breaks user font-size preferences unless you also set body { font-size: 1.6rem; }, so many teams skip it.

Why use rem instead of px for CSS?

Rem scales with the user-chosen root font size in their browser. A user who sets their browser default to 20px instead of 16px gets a proportionally larger layout when everything is in rem. Fixed pixels ignore that preference, which fails WCAG 1.4.4 (Resize Text). Rem is also compositionally safe because it always resolves against the root, not the nearest parent element as em does.

What is the difference between rem and em?

Rem (root em) is always relative to the root (html) font size. Em is relative to the nearest parent element that sets a font size. Em compounds through nesting — an em inside two nested elements each set to 1.2em becomes 1.2 * 1.2 = 1.44em of the root. Rem never compounds and is therefore more predictable for type scales and spacing systems.

How do I convert a Figma design in px to rem?

Check which root font size your CSS uses (usually 16px unless your project overrides it), then use the Single or Named bulk tab to convert each token. The Named bulk tab generates a CSS custom-properties block you can paste directly into your design tokens file.

Is anything uploaded or stored?

No. All arithmetic runs in your browser using JavaScript. No pixel values, rem values, or CSS snippets are sent to a server or saved anywhere outside your own browser.

PX to REM Converter — Gera Tools

The rem (root em) unit is one of the most important tools in modern CSS. Unlike fixed pixels, rem values scale with the root font size — which means your layouts and typography automatically respect each user’s browser preference. When a person sets their default browser font to 20px instead of 16px, every rem-based measurement grows proportionally, keeping your design readable at their preferred scale. Fixed pixels ignore that signal entirely.

This converter handles the four tasks that come up daily when working with rem: a single conversion with a step-by-step working, a named bulk export that produces a ready-to-paste CSS custom-properties block, a reference table with a paste-in batch mode for any list of pixel values, and a reverse lookup that goes from rem back to pixels — useful when reading a design spec in rem and needing the pixel equivalent for handoff or debugging.

How it works

The formula is exact integer division:

rem  =  px  /  root-font-size
px   =  rem  *  root-font-size

The root font size is the computed value of the font-size property on the html element. Browser defaults set this to 16px. If your project overrides it — for example with html { font-size: 62.5%; } to get a 10px base — set the root field at the top of the tool to match. Every tab reacts immediately.

Worked example

A common type scale using a 16px root:

Intent	px	rem	Formula
Small label	12px	0.75rem	12 / 16 = 0.75
Body copy	16px	1rem	16 / 16 = 1
Large body	18px	1.125rem	18 / 16 = 1.125
H3 heading	24px	1.5rem	24 / 16 = 1.5
H2 heading	32px	2rem	32 / 16 = 2
H1 hero	48px	3rem	48 / 16 = 3

The Named bulk tab would produce:

:root {
  --small-label: 0.75rem;  /* 12px */
  --body-copy:   1rem;     /* 16px */
  --large-body:  1.125rem; /* 18px */
  --h3:          1.5rem;   /* 24px */
  --h2:          2rem;     /* 32px */
  --h1:          3rem;     /* 48px */
}

Copy that block into your design tokens or reset stylesheet and reference every size via var(--h1) etc. — changing the html root size will then recompute every value at once.

Accessibility note

WCAG 2.1 success criterion 1.4.4 (Resize Text, level AA) requires that text can be resized up to 200% without loss of content or functionality. Using rem for all font sizes and spacing is the most reliable way to meet this criterion: the layout scales automatically when the user increases their browser’s default font size, with zero JavaScript and no media query overhead.

Formula note

The division px / root is exact in floating point for any integer px value and any integer root. The converter rounds to six decimal places, which is more precision than any real CSS engine uses (most implementations round at four). When the result is a clean fraction — like 24 / 16 = 1.5 — the display omits trailing zeros.