PX to REM Converter — convert pixels to scalable REM/EM in one step; this px to rem calculator also supports pixel to em for component-level sizing.
1 rem = root font-size (typically 16px): rem = px ÷ base. Get fast, accessible typography from fixed specs with our px to rem converter.
REM to PX PX to REM
PX to REM Converter — Pixel to EM Calculator
Use this px to rem converter and px to rem calculator to turn fixed pixels into scalable units — pixel to em/rem — instantly.
1 rem equals the root font-size (typically 16px). Conversion: rem = px ÷ base for consistent, accessible typography and spacing.
How to calculate px to rem online (px to rem converter)
Choose a base (root font-size), enter a value, then switch the mode to convert
px → rem, rem → px, or pixel to em instantly.
14px
15px
18px
20px
Custom
PX → REM
REM → PX
PX → EM
- Base (root font-size) — pick a preset (16/14/15/18/20) or type a custom value.
- Value — enter a number and choose the conversion mode (PX ⇄ REM/EM).
- PX → REM: rem = px ÷ base
- REM → PX: px = rem × base
- PX → EM: em = px ÷ current font-size
- Results show with sensible decimals; copy-ready formats (e.g.,
1.25rem).
- Copy the result (clipboard) or Share a URL with parameters.
- Need a quick table? See the px to rem list.
- Also try: REM → PX and PX → EM.
Note: 1 em is relative to the parent element’s font-size, while 1 rem is relative to the root (html) font-size. That’s why rem is preferred for global, accessible typography.
Formula (PX → REM & REM → PX)
base = root font-size (html), typically 16px.
This is the answer to “what is the formula for rem to px?”
em depends on the parent element; rem depends on the root.
By default, browsers use a root font-size of 16px, so 1rem = 16px. If you change the root size
(e.g., in CSS or via media queries), the base updates and the px → rem math adapts automatically.
That’s why using rem makes designs responsive and accessible.
For quick work, this page shows exactly how to calculate px to rem online: pick the base, enter pixels,
and the converter returns rem = px ÷ base instantly.
Quick Examples (Base 16px)
At base 16px, rem = px ÷ 16. These badges show common conversions for fast copy.
1px → 0.0625rem
10px → 0.625rem
12px → 0.75rem
14px → 0.875rem
16px → 1rem
18px → 1.125rem
20px → 1.25rem
24px → 1.5rem
28px → 1.75rem
30px → 1.875rem
32px → 2rem
100px → 6.25rem
Handy lookups: 1 px to rem, 16px to rem, 18px to rem, 24 px to rem, 32px to rem, 100 px to rem.
PX to REM List (Base 16px)
Quick px to rem list for common values. Change the base to match your project (14px / 18px).
Base 14px
Base 18px
REM → PX (16px)
| PX (16px base) | REM |
|---|---|
| 2 | 0.125 |
| 4 | 0.25 |
| 6 | 0.375 |
| 8 | 0.5 |
| 10 | 0.625 |
| 12 | 0.75 |
| 14 | 0.875 |
| 15 | 0.9375 |
| 16 | 1 |
| 18 | 1.125 |
| 20 | 1.25 |
| 24 | 1.5 |
| 28 | 1.75 |
| 30 | 1.875 |
| 32 | 2 |
| 36 | 2.25 |
| 40 | 2.5 |
| 48 | 3 |
| 56 | 3.5 |
| 64 | 4 |
| PX (14px base) | REM |
|---|---|
| 2 | 0.1429 |
| 4 | 0.2857 |
| 6 | 0.4286 |
| 8 | 0.5714 |
| 10 | 0.7143 |
| 12 | 0.8571 |
| 14 | 1 |
| 15 | 1.0714 |
| 16 | 1.1429 |
| 18 | 1.2857 |
| 20 | 1.4286 |
| 24 | 1.7143 |
| 28 | 2 |
| 30 | 2.1429 |
| 32 | 2.2857 |
| 36 | 2.5714 |
| 40 | 2.8571 |
| 48 | 3.4286 |
| 56 | 4 |
| 64 | 4.5714 |
| PX (18px base) | REM |
|---|---|
| 2 | 0.1111 |
| 4 | 0.2222 |
| 6 | 0.3333 |
| 8 | 0.4444 |
| 10 | 0.5556 |
| 12 | 0.6667 |
| 14 | 0.7778 |
| 15 | 0.8333 |
| 16 | 0.8889 |
| 18 | 1 |
| 20 | 1.1111 |
| 24 | 1.3333 |
| 28 | 1.5556 |
| 30 | 1.6667 |
| 32 | 1.7778 |
| 36 | 2 |
| 40 | 2.2222 |
| 48 | 2.6667 |
| 56 | 3.1111 |
| 64 | 3.5556 |
| REM (base 16px) | PX |
|---|---|
| 0.25 | 4 |
| 0.5 | 8 |
| 0.75 | 12 |
| 1 | 16 |
| 1.25 | 20 |
| 1.5 | 24 |
| 2 | 32 |
REM vs EM vs PX — When to use each?
- REM — best for global typography and page-wide spacing. Scales from the root
font-size, so designs are responsive and accessible by default. - EM — great inside a component when you want sizes to scale relative to the parent
(e.g., buttons, cards). Remember it’s cumulative: nested elements multiply the parent’s size. - PX — use sparingly for truly fixed items (pixel-perfect icons, hairline borders). Avoid for
text sizes and layout spacing.
html { font-size: 62.5%; }Setting the root to 62.5% (10px base) can simplify math (1rem = 10px), but it may reduce readability for users
who rely on browser zoom or OS text scaling. If you use it, audit accessibility and test zoom/contrast thoroughly.
Tip: For most projects, prefer rem for type/spacing, reserve em for
component-relative tweaks, and keep px for precise, non-scaling details.
Practical Use-Cases
- Figma → CSS handoff — translate pixel specs from design to scalable CSS using the
px to rem calculator.
Keep typography and spacing consistent across breakpoints. - Unified spacing scale — replace ad-hoc pixel values with a REM-based scale
(e.g., 0.25rem, 0.5rem, 1rem, 1.5rem). Improves rhythm, readability, and theming. - Legacy CSS migration — convert fixed pixels to REM for text and layout while keeping icons/borders
in PX where precision matters. Use the tool to convert pixel to em if a component must inherit the parent size. - Design systems — define tokens in REM (font-sizes, line-heights, spacing).
Changing the root font-size updates the whole system responsively. - Accessibility & responsiveness — users who zoom or prefer larger text benefit when sizes scale with REM.
Media queries can adjust the root size for small/large screens. - Theming & multi-brand — swap base (root) font-size or scale tokens to match different brands without rewriting component CSS.
Tip: Start by converting your most common pixel values (e.g., 12, 14, 16, 20, 24, 32) with the px to rem converter, then roll out the scale across typography and spacing.
How to calculate PX to REM online
Follow these quick steps in our px to rem converter to turn pixels into scalable REM/EM values.
- Choose a base (root font-size) — pick a preset 16/14/15/18/20 or type a custom value.
- Enter your value — type the number and select the mode: PX → REM, REM → PX, or PX → EM.
- Read the result — the tool applies
rem = px ÷ base(and for EM:em = px ÷ current font-size). - Copy or Share — copy the output (e.g.,
1.25rem) or share a URL with your parameters. - Try the reverse — need pixels from rem? Open REM → PX. Want EM specifically? Use PX → EM.
Default browsers use 16px root, so 1rem = 16px. If your project changes the root size (e.g., media queries), the conversion updates automatically.
Popular font sizes — PX ⇄ REM (Base 16px)
12 → 0.75rem •
14 → 0.875rem •
16 → 1rem •
18 → 1.125rem •
20 → 1.25rem •
24 → 1.5rem •
28 → 1.75rem •
32 → 2rem
FAQs — PX to REM & Pixel to EM
How do you convert px to rem?
rem = px ÷ base. Example: 24 ÷ 16 = 1.5rem.
What is the formula for rem to px?
px = rem × base. If the root base is 16px, 1.25rem × 16 = 20px.
How many px is 1 rem?
It depends on the root base. With the default browser base 16px, 1rem = 16px.
What is 24 px in rem?
At base 16px: 24px = 1.5rem.
How many px makes a rem?
The base value (root font-size). If base = 16px, then 1rem = 16px; if base = 20px → 1rem = 20px.
Pixel to EM vs REM?
em is relative to the parent element’s font-size. rem is relative to the root (html) font-size. Use rem for global type/spacing; em for component-relative scaling.
Quick one-liners (base 16px)
- 16px → 1rem • 18px → 1.125rem • 20px → 1.25rem
- 12px → 0.75rem • 14px → 0.875rem • 24px → 1.5rem
- 30px → 1.875rem • 32px → 2rem
- 10px → 0.625rem • 13px → 0.8125rem • 100px → 6.25rem
Tip: Use our px to rem calculator for custom bases and instant pixel to em as well.
Related tools & internal links
- REM to PX Converter
— reverse of the px to rem converter. - PX to EM
•
EM to PX
— quickly convert pixel to em (component-relative sizing). - PX to PT
•
PX to %
•
PX to VW
/
PX to VH - Need a quick reference? Jump to the
px to rem list.
Tip: The px to rem converter supports custom bases (14/15/18/20+).
External reference:
Wikipedia — CSS values and units (rem, em)