REM to PX Converter: Turn REM Into Pixels Instantly
Multiply any rem value by your root font size to get pixels — px = rem × base (16px by default), so 1.5rem = 24px. Edit the base for a custom root size, copy the result, and check the rem→px reference table. Free and 100% in your browser.
Result in pixels
24px
1.5rem × 16px = 24px
Quick reference (1rem = 16px)
| rem | px |
|---|---|
| 0.25rem | 4px |
| 0.5rem | 8px |
| 0.75rem | 12px |
| 1rem | 16px |
| 1.25rem | 20px |
| 1.5rem | 24px |
| 2rem | 32px |
| 3rem | 48px |
Instant Conversion
Type a rem value and the pixel result updates live — px = rem × base. No button to press, no reload, no waiting.
Editable Base Font Size
Defaults to the browser-standard 16px, but set any root size — 10px, 18px, 62.5% (10px) — to match your project.
Accessibility-Aware
rem scales with the reader’s browser font setting; px does not. Convert here, but ship rem so zoom and large-text users are respected.
Quick Reference Table
Common rem values (0.25–3) mapped to pixels at base 16, so 1rem = 16px and 1.5rem = 24px are one glance away.
One-Click Copy
Copy the pixel result straight to your clipboard with the unit attached — ready to paste into CSS, a calc(), or a comment.
100% Client-Side
Every conversion runs in your browser with JavaScript. No values are uploaded, nothing is tracked, and it works offline.
REM to PX Converter: Multiply by the Root Font Size
A REM to PX converter turns a rem value into pixels by multiplying it by the root font size: px = rem × base. With the browser-default 16px base, 1.5rem = 24px and 2rem = 32px. Type a rem value, optionally change the base for a custom root size, and read the pixel result instantly — then copy it or check the rem→px reference table below. Free and 100% in your browser.
How to convert rem to px
- Type the rem value you want to convert into the first field, e.g.
1.5. - Leave the root font size at 16px — the browser default — or change it to match your project's
htmlfont-size. - Read the pixel result instantly. With a 16px base,
1.5remresolves to 24px. - Press Copy to grab the value with its unit (
24px) for pasting straight into your CSS. - Scan the quick reference table for the common values (0.25rem to 3rem) you reach for most.
What is rem and how does the conversion work?
rem stands for "root em" — a CSS length unit relative to the font size of the root element (the <html> element). One rem equals the root font size in pixels, so the conversion is a single multiplication: px = rem × base. The inverse is rem = px ÷ base. Because every browser ships a default root size of 16px, 1rem is 16px out of the box, 0.5rem is 8px, and 2rem is 32px. Change the root size and every rem on the page rescales together — that proportional behavior is the whole point of rem.
"rem: Represents the font-size of the root element (typically <html>). When used within the root element font-size, it represents its initial value (a common browser default is 16px)."— MDN Web Docs, on CSS length units (rem)The pixel itself is the CSS reference pixel, not a hardware dot — on a high-density (Retina) screen one CSS px can map to several physical pixels, but the rem→px math is identical. This tool keeps up to four decimal places, so a fractional result like 0.625rem × 16 = 10px stays exact and never rounds away.
Worked examples: rem → px
Default base · 1.5rem
1.5 × 16 = 24px (a typical sub-heading)
Default base · 0.5rem
0.5 × 16 = 8px (a small gap or compact padding)
Edge case · changed root font size
A popular trick sets html { font-size: 62.5% }, which makes 1rem = 10px so the math is "move the decimal one place". With the base set to 10, 1.5rem becomes 15px, not 24px. Set the base field to 10 before converting, or your numbers will be 1.6× too large.
Accessibility · why px would be wrong here
A reader who sets their browser default text size to 20px (for low vision) makes 1rem = 20px, so your 1.5rem heading grows to 30px automatically. The same heading hard-coded as 24px stays 24px and ignores their choice. Convert here for reference, but ship the remvalue so the layout respects the user.
REM to PX reference table (base 16px)
The most common rem values and their pixel equivalents at the default 16px root font size. Multiply by 16 to go rem→px; divide by 16 to go px→rem.
| REM | Pixels (base 16) | Typical use |
|---|---|---|
| 0.25rem | 4px | Tight spacing, icon gaps |
| 0.5rem | 8px | Small gaps, compact padding |
| 0.75rem | 12px | Caption / fine-print text |
| 1rem | 16px | Base body text (matches root) |
| 1.25rem | 20px | Lead paragraph, large body |
| 1.5rem | 24px | Sub-heading (h4/h5) |
| 2rem | 32px | Section heading (h2/h3) |
| 3rem | 48px | Page title / hero (h1) |
rem vs em: the compounding trap most converters skip
rem is always relative to the root font size, so 1.5rem resolves to the same pixel value no matter how deeply it is nested. em is relative to the element's own (or its parent's) font size, so em values compound: a 1.5em list inside a 1.5emsection inside a 1.5em card computes to 1.5 × 1.5 × 1.5 = 3.375× the root — not 1.5×. That runaway nesting is the classic em bug, and it is exactly why rem exists. This converter only does rem→px because rem has a single, predictable base; em would need the full ancestor chain to resolve.
The accessibility payoff is concrete: rem (and root-relative sizing generally) honors the user's browser font-size setting, so people who bump their default to 20px or 24px get a layout that scales with them. Pixels do not. Sizing in rem is one of the cheapest ways to pass WCAG resize-text expectations without media-query gymnastics.
Runs 100% in your browser
Your values never leave your device. The conversion is one multiplication done locally in JavaScript, and copying uses your browser's native clipboard — no uploads, nothing leaves your device. I tested the defaults (1.5rem → 24px), the 62.5% root trick (base 10, 1.5rem → 15px), fractional values (0.625rem → 10px), and empty input. Blank or invalid input shows a prompt instead of NaN, and the output area reserves its height so nothing shifts as you type.
Frequently asked questions
Is this REM to PX converter free?
Yes — 100% free with no signup and no usage cap. The live conversion, editable base, copy button, and reference table are all unlocked.
Does it run in my browser?
Yes. The math runs locally in JavaScript and nothing is sent to a server, so the converter works offline once the page loads.
What base font size should I use?
Use 16px unless you have changed it — that is the default root font size in every major browser. If your CSS sets a different html font-size (e.g. 10px or 62.5%), enter that value in the base field instead.
Why use rem instead of px?
Accessibility. rem scales with the reader's browser font-size preference, so larger-text users get a proportionally bigger layout. A fixed px value ignores that setting. Convert here, but ship rem.
What is the difference between rem and em?
rem is relative to the root font size and never compounds; em is relative to the element's own or parent's font size, so nested em values multiply together. rem gives predictable sizing; em is for context-relative spacing.
How do I convert px back to rem?
Divide pixels by the base: rem = px ÷ base. At base 16, 24px ÷ 16 = 1.5rem. For the reverse direction with the same instant math, use the PX to REM converter.
Related CSS & conversion tools
The reverse direction: pixels → rem
Unit ConverterConvert px, cm, inches, and more
CSS Gradient GeneratorBuild linear & radial gradient CSS
Border Radius GeneratorRound corners with live preview
Flexbox GeneratorVisualize flex layouts and copy CSS
Grid GeneratorDesign CSS Grid templates visually
Glassmorphism GeneratorFrosted-glass blur effect CSS
CSS MinifierShrink stylesheets for production
Color ConverterHEX, RGB, HSL, and OKLCH
Guide: px vs em vs remWhen to use each CSS length unit
All ToolsBrowse the full Toolk toolbox
Last updated: June 2, 2026 · Runs 100% in your browser — no uploads, nothing leaves your device.
Need a different tool?
Browse all 89 free, in-browser tools — or tell us what we should build next.