How do I convert px to rem?

Divide the pixel value by the base font size (usually 16px). For example, 24px / 16 = 1.5rem. If your root font size is different — say 10px — then 24px / 10 = 2.4rem. This converter handles the math automatically and lets you set any base font size.

How do I convert rem to px?

Multiply the rem value by the base font size. For example, 1.5rem * 16 = 24px. If your project uses html { font-size: 62.5% } (which sets the base to 10px), then 1.5rem * 10 = 15px.

What is the default base font size in browsers?

All modern browsers (Chrome, Firefox, Safari, Edge) default to 16px for the root font size. This means 1rem = 16px unless you explicitly change the html element's font-size in your CSS.

Why should I use rem instead of px?

REM units respect user accessibility settings. When a user increases their browser's default font size, rem-based layouts scale proportionally while px-based layouts stay fixed. The WCAG 2.1 guideline 1.4.4 requires text to be resizable up to 200% without loss of content.

What is the difference between rem and em?

REM (root em) is always relative to the root element's (html) font size — it's consistent throughout the document. EM is relative to the parent element's font size, which can compound. Use rem for global consistency and em only for component-internal spacing.

What does html { font-size: 62.5% } do?

Setting html { font-size: 62.5% } changes the root font size from 16px to 10px (62.5% of 16 = 10). This makes rem calculations trivial: 1.6rem = 16px, 2.4rem = 24px. It's a popular technique in CSS resets.

Can I use rem for media queries?

Yes, and it's recommended. Using rem in media queries means your breakpoints respect the user's font size preference. In most browsers, rem in media queries always uses the browser's default 16px, regardless of any html { font-size } override.

How do I convert an entire CSS file from px to rem?

Use the Bulk CSS Converter in this tool: paste your CSS code, and all px values will be automatically converted to rem based on your selected base font size. For build-time conversion, use PostCSS plugins like postcss-pxtorem.

No. 1rem equals the computed font-size of the html element. The browser default is 16px, but CSS can override it. User browser settings can also change it. Always match your converter's base font size to your project's actual root font size.

Should I use rem for borders and box shadows?

Generally, no. Borders and box shadows are visual decorations where exact pixel precision matters. Use rem for font sizes, spacing, and layout dimensions. Use px for borders, box-shadow offsets, and other fine details.

PX to REM Converter

Pixels (px)

Base Font Size (Root)

Bulk CSS Converter

Paste CSS code to convert all px values to rem

REM Value

1rem

16px / 16px = 1rem

Live Preview

Visual comparison of your converted value vs base size

16px

The quick brown fox

16px

The quick brown fox (base)

Conversion Table

Common pixel values and their equivalents at 16px base

Pixels	REM	EM	%	Points
1px	0.0625rem	0.0625em	6.25%	0.75pt
2px	0.125rem	0.125em	12.5%	1.5pt
3px	0.1875rem	0.1875em	18.75%	2.25pt
4px	0.25rem	0.25em	25%	3pt
5px	0.3125rem	0.3125em	31.25%	3.75pt
6px	0.375rem	0.375em	37.5%	4.5pt
7px	0.4375rem	0.4375em	43.75%	5.25pt
8px	0.5rem	0.5em	50%	6pt
9px	0.5625rem	0.5625em	56.25%	6.75pt
10px	0.625rem	0.625em	62.5%	7.5pt
11px	0.6875rem	0.6875em	68.75%	8.25pt
12px	0.75rem	0.75em	75%	9pt
13px	0.8125rem	0.8125em	81.25%	9.75pt
14px	0.875rem	0.875em	87.5%	10.5pt
15px	0.9375rem	0.9375em	93.75%	11.25pt
16px	1rem	1em	100%	12pt
18px	1.125rem	1.125em	112.5%	13.5pt
20px	1.25rem	1.25em	125%	15pt
22px	1.375rem	1.375em	137.5%	16.5pt
24px	1.5rem	1.5em	150%	18pt
26px	1.625rem	1.625em	162.5%	19.5pt
28px	1.75rem	1.75em	175%	21pt
30px	1.875rem	1.875em	187.5%	22.5pt
32px	2rem	2em	200%	24pt
36px	2.25rem	2.25em	225%	27pt
40px	2.5rem	2.5em	250%	30pt
44px	2.75rem	2.75em	275%	33pt
48px	3rem	3em	300%	36pt
56px	3.5rem	3.5em	350%	42pt
64px	4rem	4em	400%	48pt
72px	4.5rem	4.5em	450%	54pt
80px	5rem	5em	500%	60pt
96px	6rem	6em	600%	72pt

What Are PX and REM Units?

Understanding the two most important CSS length units

Pixels (px) are absolute CSS units. 1px is always the same size regardless of context. They give precise control but don't scale with user preferences.

REM (root em) is a relative unit based on the root element's font size. By default, browsers set the root font size to 16px, so 1rem = 16px. When users change their browser font size, rem-based layouts scale automatically.

Conversion Formulas

px / base

PX to REM

24px / 16 = 1.5rem

rem * base

REM to PX

1.5rem * 16 = 24px

Worked example

A designer hands you a mockup with 24px heading and 14px body text. With a 16px base: heading = 24 / 16 = 1.5rem, body = 14 / 16 = 0.875rem. If the user increases their browser font size to 20px, the heading becomes 30px and body becomes 17.5px — maintaining the same proportions.

REM vs EM vs PX: When to Use Each

Choosing the right CSS unit for every property

px — Absolute Pixels

Fixed size regardless of context. Best for borders, box shadows, outline widths, and fine visual details where scaling would look wrong. A 1px border should stay 1px at any zoom level.

rem — Root-Relative

Always relative to the root html font size — consistent across the entire document. Use for font sizes, margins, padding, max-widths, and media queries. Scales with user accessibility settings.

em — Parent-Relative

Relative to the parent element's font size. Can compound (nest 1.2em inside 1.2em = 1.44×). Best for component-internal spacing that should scale with the component's own font size, like button padding.

% — Percentage

Relative to the parent element's size. Use for fluid widths, responsive containers, and layouts that should fill a proportion of their parent. Common in grid and flexbox patterns.

Rule of thumb: use rem for everything that should scale with accessibility settings, px for everything that shouldn't.

How to Use This PX to REM Converter

Step-by-step for single values, custom bases, and bulk CSS conversion

Choose Conversion Direction

Select "PX to REM" to convert pixels into rem, or "REM to PX" to go the other way. The tabs switch the input and output units instantly.

Enter Your Value

Type the pixel or rem value you want to convert. The result updates in real time — no need to press a button.

Set Your Base Font Size

If your project uses html { font-size: 62.5% } (10px) or any non-standard root size, adjust the base. The default is 16px, which matches all browsers.

Copy or Bulk Convert

Tap or click any output card (REM, EM, %, or PT) to copy the value to your clipboard. For entire stylesheets, paste your CSS code into the Bulk Converter — all px values are replaced with rem automatically.

Common Mistakes When Using REM

Pitfalls to avoid when working with relative CSS units

Assuming 1rem = 16px always

Reality: Check your CSS for html { font-size: ... }. If the root font size is changed (e.g., to 62.5% = 10px), all rem calculations shift. Always match this converter's base to your project's actual root.

Confusing rem and em

Reality: REM is always relative to the root element. EM is relative to the parent element and compounds — nesting 1.2em inside 1.2em gives 1.44× the grandparent size. Use rem for consistency.

Using px for font sizes

Reality: Pixel font sizes ignore user browser settings for accessibility. WCAG 2.1 guideline 1.4.4 requires text to be resizable up to 200%. Use rem for all font sizes.

Using rem for borders and shadows

Reality: Borders and box shadows are visual decorations where exact pixel precision matters. A 1px border should stay 1px regardless of font size. Use px for these fine details.

Frequently Asked Questions

Common questions about PX to REM conversion, base font sizes, and CSS units