Pixel to REM Converter

How to use

1. Set Root Size — Default is 16px — the browser standard. Override if your design system uses a different base.
2. Type in Either Field — Enter pixels or rem — the other value updates live.
3. Use the Reference Table — Common pixel sizes are listed with their rem equivalents — copy what you need.

The Pixel to REM Converter performs instant two-way conversion between px and rem with a configurable root font-size. It also lists the most common pixel values you'll meet in typography, spacing, and component sizing.

Features

• Live two-way conversion (type in either field).
• Custom root font-size (default 16px).
• Common-scale reference table.
• Pure JavaScript — nothing leaves your browser.

Why this matters

Using rem-based sizes respects the user's browser zoom and 'larger text' preferences, which is a baseline accessibility requirement under WCAG 2.1.

Frequently asked questions

Why use rem instead of px?

rem scales with the user's root font-size, which respects accessibility settings like zoom and 'larger text' preferences. Using px ignores user choice.

What's the difference between rem and em?

rem is always relative to the document root font-size. em is relative to the nearest parent font-size, which can compound nesting effects unpredictably.

Should my root font-size be 10px to make math easier?

It is a common trick (1rem = 10px), but it overrides the user's browser default and can break accessibility. Stay at 16px and let this tool do the math.

Does it work for em as well?

Yes — the math is identical when the local font-size equals the root. For nested em values, multiply by the inherited parent size.

Related free tools

• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.
• CSS Cubic Bezier Generator — Design custom easing curves visually with live curve and animation preview. Production-ready CSS.
• CSS Glassmorphism Generator — Design frosted-glass UI panels with backdrop blur, opacity, saturation, and tint. Live preview.
• CMYK Color Converter — Convert HEX and RGB to CMYK percentages for print. Two-way conversion with live preview.
• Neumorphism Generator — Design soft, extruded UI elements with adjustable shadow depth, blur, and shape style.