How do I convert px to rem manually?

Divide the pixel value by the root font-size. At a 16px root: 16px = 1rem, 24px = 1.5rem, 32px = 2rem, 48px = 3rem. The formula is rem = px / root. For accessibility, never override the root in pixels — let users set it via their browser.

Should I use rem instead of px for everything?

Use rem for typography, spacing, layout, and breakpoints — anywhere a user might benefit from scaling. Keep px for borders (1px solid), shadows, and other "hairline" effects where scaling doesn't make sense. Mixing rem and px strategically is the modern best practice.

What is the 62.5% trick?

Setting html { font-size: 62.5% } makes 1rem = 10px (16 × 0.625 = 10), which simplifies "easy math" (1.4rem = 14px). However, this overrides the user's default browser font-size preference, which can hurt accessibility. Most modern teams skip this trick.

px to rem Converter — Free Online CSS Unit Calculator

Home/Design Tools/px ↔ rem Converter

Visual Layout Preview

16px

Generated CSS

font-size: 1rem; /* 16px */

What Is rem in CSS?

rem stands for "root em" — a relative CSS unit calculated against the font-size of the root <html> element. By default, browsers set this to 16px, so 1rem = 16px. The big advantage: when a user adjusts their browser's default font size for accessibility, every rem-based size scales proportionally. This makes rem the recommended unit for typography, spacing, and layout in modern responsive design.

px to rem Converter Online — What This Tool Does

This free px to rem converter handles bidirectional conversion in your browser. Enter a pixel value to see the equivalent rem (and vice versa), with a live visual preview, ready-to-copy CSS output, and a custom root font size setting for design systems that don't use the 16px default.

How to Convert px to rem

Enter a pixel value in the px field — the rem equivalent appears instantly.
Or enter a rem value to see the equivalent px (bidirectional).
Adjust the Root Font Size (default 16px) if your design system uses a different base (often 10px for "easy math" with a html { font-size: 62.5% } trick).
The visual preview shows the computed pixel width.
Click Copy CSS for ready-to-paste declaration, or Copy for the bare value.

Why Use rem for Typography?

Accessibility — users who increase their default browser font size (e.g. low-vision users) get a proportionally scaled site automatically. Pixel-based sites ignore this preference.
Predictable cascading — unlike em, rem doesn't compound through nested elements. A 1.5rem heading is always the same size regardless of its parent.
Design system friendly — typography scales (1rem, 1.25rem, 1.5rem, 2rem) are easier to manage than absolute pixel values.
Responsive sizing — change the root size in a media query and every rem-based value updates at once.

Common px to rem Values (at 16px base)

12px = 0.75rem — small UI labels
14px = 0.875rem — body small / table cells
16px = 1rem — body text default
18px = 1.125rem — body large
20px = 1.25rem — H4 / lead text
24px = 1.5rem — H3
32px = 2rem — H2
48px = 3rem — H1 / hero

Tips & Tricks

Don't override the root font size from px — use the 62.5% trick (html { font-size: 62.5% }) only if you understand it kills the user's accessibility preference scaling.
Use rem for typography, em for component-scoped sizing — see the rem to em converter for the relationship.
Mix px and rem strategically — borders (1px solid) and shadows often stay in px; typography, spacing, and layout use rem.
Avoid pixel values in media queries too — rem in media queries respects user accessibility settings.

Related Tools

px ↔ em Converter — component-scoped sizing.
px ↔ % Converter — fluid layout sizing relative to parent.
px ↔ vw / vh Converter — viewport-relative sizing.
rem ↔ em Converter — translate between the two relative font units.
Color Picker — pick brand colours for your design system.

Is My Data Sent to a Server?

No. All unit conversion runs entirely in your browser using simple JavaScript math. The values you enter — including any proprietary design-system tokens — never leave your device. There is no upload, no logging, and no analytics on the numbers you enter.