How do I convert rem to px?

Multiply the rem value by the root font-size in pixels. With the default 16px root: 1.5rem × 16 = 24px. The formula is simply px = rem × root-font-size.

What is the default root font size in browsers?

All major browsers default the root (html) font-size to 16px, meaning 1rem = 16px unless your stylesheet overrides it. The most common override is html { font-size: 62.5%; } which makes 1rem = 10px.

What is the 62.5% rem trick?

Setting html { font-size: 62.5%; } maps 1rem to 10px (because 62.5% of 16 = 10). This makes rem values read like px divided by 10 — 1.6rem = 16px, 2.4rem = 24px. Set the root font size to 10 in this converter to match that setup.

What is the difference between rem and em?

rem (root em) is always relative to the html element font-size, so it is consistent everywhere on the page. em is relative to the current element font-size, which compounds when elements nest — a 1.2em inside another 1.2em element equals 1.44× the root size. rem avoids that compounding and is generally easier to reason about.

Why should I use rem instead of px for font sizes?

Using rem for typography respects the user browser font-size preference. When someone increases their default text size in browser settings, rem-based layouts scale with it, making the page more accessible. Fixed px values ignore that preference and can make text unreadably small for users who rely on larger defaults.

How does this converter handle the Tailwind spacing scale?

The Scale Preview tab lists every Tailwind spacing token (0 through 96) with its rem value and the resolved px value at your chosen root size. At 16px root, space-4 (1rem) = 16px; at 10px root it = 10px. You can also copy the whole scale as CSS custom properties.

REM to PX Converter — Gera Tools

A rem to px converter turns CSS rem values into the concrete pixel sizes that browsers actually paint on screen. Whether you are checking a design spec, debugging a layout, or building a token system, knowing the exact pixel equivalent of a rem value prevents guesswork and prevents the subtle sizing mismatches that creep in when designers work in pixels and developers work in rem.

This tool covers three scenarios: single conversion (one rem value at a time, with a context table showing the same value at six common root sizes), batch conversion (paste a whole list of rem values and get a px table in one go), and scale preview (see the full Tailwind spacing scale, Material Design 4dp grid, or Tailwind typography scale rendered at any root font size — and copy the result as CSS custom properties).

How it works

The formula could not be simpler:

px = rem × root-font-size

Every rem unit is defined relative to the font-size set on the html element. Browsers default that to 16px, so 1rem = 16px, 0.5rem = 8px, 2.5rem = 40px. Your stylesheet can change the root size — the most common alternative is html { font-size: 62.5%; } which maps 1rem to 10px and makes rem values read as px divided by 10. Enter the actual root size in the calculator and every result updates instantly.

The batch mode parses space- and comma-separated lists so you can convert an entire set of design tokens in one paste. The scale preview tab runs the same multiplication over every entry in a well-known design system’s spacing table, with an optional visual bar so you can spot proportionality at a glance.

Worked example

Suppose your stylesheet inherits the browser default of 16px for the root size.

rem value	Calculation	px result
0.25rem	0.25 × 16	4px
0.5rem	0.5 × 16	8px
0.875rem	0.875 × 16	14px
1rem	1 × 16	16px
1.5rem	1.5 × 16	24px
2rem	2 × 16	32px
3rem	3 × 16	48px

Now switch the root to 10px (the 62.5% trick) and the same list becomes 2.5 / 5 / 8.75 / 10 / 15 / 20 / 30px respectively. The converter shows you both cases side by side in the context table.

The 62.5% base trick explained

Many codebases — particularly older Material-UI and Bootstrap configurations — set html { font-size: 62.5%; } so that 1rem equals exactly 10px. The motivation is that rem math then reads as “move the decimal one place left from px”: 16px becomes 1.6rem, 24px becomes 2.4rem, and so on. Set the root font size field to 10 here to see rem values resolved under that convention.

The downside is that it breaks browser accessibility settings: a user who bumps their default font size to 20px now has a 12.5px root (62.5% of 20) instead of 20px, partially defeating the point of using rem at all. Many teams now prefer leaving the root at the default 16px and working with rem values directly.

CSS custom properties and design tokens

The Scale Preview tab lets you copy the entire resolved scale as a :root { } block of CSS custom properties, ready to paste into your design token file or stylesheet. At 16px this produces --space-4: 1rem; /* 16px */ through --space-96: 24rem; /* 384px */, matching the Tailwind token names. Change the root to 10px and every comment updates to reflect the new absolute sizes.

Formula note

There are no approximations in this converter. The multiplication rem × base is exact floating-point arithmetic, rounded to six significant decimal places only for display. The CSS specification defines rem as an exact scalar multiple of the root font-size, so there is no rounding in the browser either — the px value you see here is exactly what the layout engine computes before sub-pixel anti-aliasing.