Convert rem to px – set any :root font size

rem always references the root element, not the parent. Change the base size once to see how Tailwind, spacing systems, and WCAG targets shift.

When do you need to convert rem to px?

The CSS rem unit is relative to the root element (html) font size. By default, browsers set this to 16px, so 1rem = 16px. Unlike em, rem does not compound — it always references the root.

Rem is the recommended unit for modern responsive web design. It provides consistent, scalable sizing that respects user accessibility preferences.

Converting rem to px helps understand the actual rendered size when designing or debugging CSS layouts.

All calculations run locally in your browser — nothing is sent to any server.

How to use the converter?

1. Enter a value
Type a number in the input field. You can use a period or comma as the decimal separator.
2. Read the result
The conversion result appears instantly in the field next to it – no clicking required.
3. Copy or reverse
Click Copy result or use the Reverse button to convert in the opposite direction.

When is this converter useful?

CSS development and design handoff
Designers deliver Figma mockups in pixels, but production CSS uses rem. When a spec says 24px padding, you need 1.5rem — but only if the root is 16px. If your project uses a 62.5% root trick (10px root), the same padding becomes 2.4rem. This tool removes the guesswork.
Responsive typography with Tailwind
Tailwind CSS uses a rem-based spacing scale: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px). When you configure a custom base font size in tailwind.config.js, every spacing token shifts. Use this converter to verify final pixel values before pushing to production.
WCAG accessibility compliance
WCAG 2.1 requires minimum touch targets of 44×44px, which equals 2.75rem at 16px root. Font sizes set in rem honor the user's browser text size preference — if a user sets their browser to 20px, 1rem becomes 20px. px-based fonts ignore this, failing WCAG 1.4.4.
Design system spacing scales
Modern design systems like Material Design and Fluent use rem-based spacing tokens. A typical 8-point grid translates to 0.5rem increments. This tool helps map spacing tokens (4px = 0.25rem, 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem) when onboarding a new project.

What makes this converter different?

Complete privacy
All calculations run locally in your browser. No data is sent to any server.
Real-time results
The result updates instantly as you type – no need to click any button.
Bidirectional conversion
The Reverse button lets you convert in both directions with one click.
Reference table
A ready-made table with commonly converted values and contextual descriptions.

How does rem to px conversion work?

px = rem × root font size. Default root font size = 16px.

If html { font-size: 62.5% }, root = 10px, so 1.6rem = 16px.

Rem never compounds. 1rem is always the same regardless of nesting depth. This makes it more predictable than em.

Practical tips

At 16px root: 0.75rem = 12px, 0.875rem = 14px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px.
Tailwind: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px).
Minimum touch target: WCAG recommends 44×44px = 2.75rem at 16px root.
Media queries in rem: @media (min-width: 48rem) = 768px at 16px root.

rem vs em vs px

rem vs em vs px
Feature	rem	px
Reference	Root font size	Fixed pixel
Compounds	No (always root)	No
Responsive	Yes	No
Accessibility	Respects user settings	Fixed size
Predictability	Consistent everywhere	Always consistent

rem

Reference
Root font size
Compounds
No (always root)
Responsive
Yes
Accessibility
Respects user settings
Predictability
Consistent everywhere

px

Reference
Fixed pixel
Compounds
No
Responsive
No
Accessibility
Fixed size
Predictability
Always consistent

Convert other units to Pixels

pt to px em to px cm to px mm to px inches to px vw to px Tailwind CSS spacing to px

Explore other unit converters

DPI to PPI HEX to RGB RGB to HSL RGB to CMYK bytes to KB/MB/GB Unix to date DEC to BIN DEC to HEX Mbps to MB/s

Frequently asked questions

How many pixels is 1rem?

By default, 1rem = 16px (browser default root font size). If you or Tailwind set html { font-size: 62.5% }, then 1rem = 10px. Always check your :root declaration before assuming 16px.

What is the difference between rem and em?

rem always references the root element (html) font size and never compounds. em references the parent element and compounds through nesting — a 1.5em inside a 1.5em parent renders at 2.25× root. rem is more predictable for spacing systems.

Should I use rem or px?

Use rem for typography, spacing, and layout so that values scale with the user's browser font preferences. Use px for borders, box-shadows, outlines, and anything that should stay physically fixed regardless of zoom level.

How does Tailwind CSS use rem?

Tailwind spacing scale uses 0.25rem increments: p-1 = 0.25rem (4px), p-2 = 0.5rem (8px), p-4 = 1rem (16px), p-8 = 2rem (32px). You can change the base font size in tailwind.config.js under theme.fontSize to shift all rem values.

How do I set a custom root font size in CSS?

Use html { font-size: 18px; } or html { font-size: 112.5%; } in your global stylesheet. Setting a percentage respects user browser preferences — 62.5% makes 1rem = 10px for easier math, but 100% (16px) is the accessible default.

What is the System UI font stack and how does rem affect it?

System UI fonts (font-family: system-ui) render at the OS default size, which browsers map to 16px by default. Since rem is anchored to that root, your rem-based layout adapts correctly across macOS, Windows, and iOS without any adjustments.

Are media queries in rem affected by the root font size?

Yes, but only if you use em/rem in media queries (e.g. @media (min-width: 48rem)). Some browsers evaluate media query em/rem against the user's browser base size, not your html font-size declaration — so 48rem may equal 768px regardless of your CSS root.

Are calculations done locally?

Yes. All calculations run in your browser. No data is sent to any server.

Help us improve our tools

Have an idea, found a bug, or want to suggest a feature? Drop us a message – we respond within 24 hours.

When do you need to convert rem to px?

The CSS rem unit is relative to the root element (html) font size. By default, browsers set this to 16px, so 1rem = 16px. Unlike em, rem does not compound — it always references the root.

Rem is the recommended unit for modern responsive web design. It provides consistent, scalable sizing that respects user accessibility preferences.

Converting rem to px helps understand the actual rendered size when designing or debugging CSS layouts.

All calculations run locally in your browser — nothing is sent to any server.

How to use the converter?

1. Enter a value

Type a number in the input field. You can use a period or comma as the decimal separator.

2. Read the result

The conversion result appears instantly in the field next to it – no clicking required.

3. Copy or reverse

Click Copy result or use the Reverse button to convert in the opposite direction.

When is this converter useful?

CSS development and design handoff

Designers deliver Figma mockups in pixels, but production CSS uses rem. When a spec says 24px padding, you need 1.5rem — but only if the root is 16px. If your project uses a 62.5% root trick (10px root), the same padding becomes 2.4rem. This tool removes the guesswork.

Responsive typography with Tailwind

Tailwind CSS uses a rem-based spacing scale: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px). When you configure a custom base font size in tailwind.config.js, every spacing token shifts. Use this converter to verify final pixel values before pushing to production.

WCAG accessibility compliance

WCAG 2.1 requires minimum touch targets of 44×44px, which equals 2.75rem at 16px root. Font sizes set in rem honor the user's browser text size preference — if a user sets their browser to 20px, 1rem becomes 20px. px-based fonts ignore this, failing WCAG 1.4.4.

Design system spacing scales

Modern design systems like Material Design and Fluent use rem-based spacing tokens. A typical 8-point grid translates to 0.5rem increments. This tool helps map spacing tokens (4px = 0.25rem, 8px = 0.5rem, 16px = 1rem, 24px = 1.5rem) when onboarding a new project.

What makes this converter different?

Complete privacy

All calculations run locally in your browser. No data is sent to any server.

Real-time results

The result updates instantly as you type – no need to click any button.

Bidirectional conversion

The Reverse button lets you convert in both directions with one click.

Reference table

A ready-made table with commonly converted values and contextual descriptions.

Practical tips

At 16px root: 0.75rem = 12px, 0.875rem = 14px, 1rem = 16px, 1.25rem = 20px, 1.5rem = 24px, 2rem = 32px.
Tailwind: text-sm = 0.875rem (14px), text-base = 1rem (16px), text-lg = 1.125rem (18px).
Minimum touch target: WCAG recommends 44×44px = 2.75rem at 16px root.
Media queries in rem: @media (min-width: 48rem) = 768px at 16px root.

rem vs em vs px

rem vs em vs px
Feature	rem	px
Reference	Root font size	Fixed pixel
Compounds	No (always root)	No
Responsive	Yes	No
Accessibility	Respects user settings	Fixed size
Predictability	Consistent everywhere	Always consistent

rem

Reference
Root font size
Compounds
No (always root)
Responsive
Yes
Accessibility
Respects user settings
Predictability
Consistent everywhere

px

Reference
Fixed pixel
Compounds
No
Responsive
No
Accessibility
Fixed size
Predictability
Always consistent

Frequently asked questions

How many pixels is 1rem?

By default, 1rem = 16px (browser default root font size). If you or Tailwind set html { font-size: 62.5% }, then 1rem = 10px. Always check your :root declaration before assuming 16px.