📏 Px to Rem Converter
Bidirectional px ↔ rem/em conversion with configurable base font size.
🔒 100% client-side processing
Common px to rem conversions
| Pixels | Rem / Em |
|---|
Convert pixels to rem (or em) and back instantly, with a configurable base font size. Type in either field and the other updates live — no convert button needed. A reference table of common values from 1px to 64px is generated from the same conversion logic, so you can grab standard equivalents at a glance. Built for front-end developers and designers moving from pixel-based mockups to scalable, accessible CSS.
How to Use
- Set the base font size: Leave it at the browser default of 16px, or enter your project’s root font size.
- Type in either field: Enter a px value to get rem, or a rem/em value to get px — conversion happens as you type.
- Switch rem or em: Use the dropdown next to the result field; the math is the same when the reference size matches the base.
- Check the table: Scroll the common-values table for 1–64px equivalents at your chosen base.
Features
- Bidirectional conversion — edit either side and the other updates instantly
- Configurable base font size (default 16px) for projects with custom root sizes
- Supports both rem and em output units
- Results rounded to 4 decimal places with trailing zeros trimmed
- Common-values table (1–64px) regenerated whenever the base changes
- Works entirely in your browser — nothing is uploaded
Why Convert px to rem?
Pixels are absolute: 16px is 16 device-independent pixels regardless of user settings. That makes px predictable but rigid. rem units are relative to the root font size, so a layout built with rem scales automatically when a user raises their browser’s default font size — a core accessibility requirement under WCAG. The conversion itself is simple division (px ÷ base), but doing it mentally for every value in a stylesheet is error-prone. This tool does the arithmetic both ways and keeps a cheat-sheet table handy, so converting a whole design spec becomes a copy-paste exercise. The 62.5% trick (setting the root to 10px so 1.6rem = 16px) is supported too: just set the base to 10.
Use Cases
- Design handoff: Convert pixel values from Figma or Sketch mockups into rem for your CSS.
- Accessibility audits: Find fixed px font sizes and spacing, then replace them with scalable rem equivalents.
- Design systems: Build a spacing and typography scale on a non-standard base like 10px or 20px.
- Learning CSS: Use the table to build intuition for common px/rem pairs.
Related Tools
Frequently Asked Questions
What is the difference between px, rem, and em?
Pixels (px) are fixed absolute units. rem is relative to the root element's font size (16px by default in every browser), while em is relative to the font size of the current element's parent. With a 16px base, 24px equals 1.5rem — and 1.5em only when the parent font size is also 16px.
Why should I use rem instead of px?
rem units scale with the user's browser font-size setting, so layouts and typography stay accessible for people who increase their default size. px values ignore that setting and can break layouts for users with vision impairments.
What base font size should I use?
The browser default of 16px is the standard and what most design systems assume. Only change it if your project sets a different root font size, for example html { font-size: 62.5% } which makes 1rem equal to 10px.
Does this tool also convert em values?
Yes. Select em in the unit dropdown next to the result field. The math is identical to rem as long as the em's reference font size matches your chosen base, which is the common case for components at the root level.
How precise are the converted values?
Results are rounded to at most 4 decimal places with trailing zeros trimmed — more than enough precision for CSS, where browsers round to sub-pixel values during rendering anyway.