PX to REM Converter
Type a pixel, rem, or em value and the matching unit updates instantly at your chosen base font size.
Assumes the element’s font size equals the base above.
Quick reference at 16px base
Click a rem value to copy it.
| px | rem |
|---|---|
| 10px | |
| 12px | |
| 14px | |
| 16px | |
| 18px | |
| 20px | |
| 24px | |
| 28px | |
| 32px | |
| 36px | |
| 40px | |
| 48px |
rem vs em
rem is relative to the root font size (the html element), so 1rem is identical everywhere on the page. Use it for font sizes, spacing, and media queries — it keeps sizing predictable and respects the user’s browser font-size setting.
em is relative to the current element’s own font size, so it compounds when nested. Use it when a value should scale with its local context, such as padding inside a button or an icon sized to match nearby text.
How it works
- Set your base font size in pixels — 16 is the browser default, so leave it unless your CSS changes the root size.
- Type a value in either the px or rem field (or the px/em row) and the other side converts live as you type.
- Click any rem value in the reference table to copy it, ready to paste into your stylesheet.
Frequently asked questions
- How do I convert px to rem?
- Divide the pixel value by the root font size, which is 16px in every browser by default. So 24px ÷ 16 = 1.5rem. This converter does the division live and lets you change the base if your CSS sets a different root size.
- What is the difference between rem and em?
- Rem is always relative to the root element’s font size, so 1rem is the same everywhere on the page. Em is relative to the current element’s own font size, so 1em inside a 20px heading equals 20px. Rem gives predictable global sizing; em scales with its local context.
- Why should I use rem instead of px?
- Rem units respect the user’s browser font-size setting, so people who increase their default text size get a proportionally larger layout. Px values ignore that preference. Using rem for font sizes, spacing, and media queries makes a site more accessible without extra work.
- What if my site uses html { font-size: 62.5% }?
- That trick sets the root size to 10px so 1rem equals 10px, making mental math easier. Enter 10 in the base font size field and every conversion here will match your project. The reference table updates to the new base as well.
- Is anything sent to a server?
- No. The math runs entirely in your browser with plain JavaScript — no upload, no network request, no tracking of the values you type. You can even keep using the page offline once it has loaded.
About this tool
This converter translates between pixels, rem, and em using whatever base font size your project relies on. The default base is 16px because that is what every major browser ships with, but many codebases override the root size — commonly to 10px via the 62.5% trick — and the tool handles any base you enter. Both converter rows work in either direction: type px to get rem, or type rem to get the pixel equivalent, and the same applies to the px/em row.
Everything is computed locally in your browser. The formula is simple — rem = px ÷ base — but doing it dozens of times while translating a design file gets tedious and error-prone, especially with odd values like 13px or 22px that produce repeating decimals. The tool rounds to four decimal places, which is more precision than any rendering engine needs, and trims trailing zeros so you get clean values like 1.5rem instead of 1.5000rem. Nothing you type is transmitted anywhere.
The quick reference table lists the pixel values that show up constantly in real interfaces — 10 through 48px — already converted at your current base. Click any rem value to copy it. This is handy when you are converting a legacy px-based stylesheet to rem, implementing a Figma design whose measurements are all in pixels, or writing rem-based media queries where 768px becomes 48rem at the default base.
A practical rule of thumb: use rem for font sizes, spacing scales, container widths, and media queries so the whole layout honors the user’s browser font-size preference. Reserve em for the few cases where you want a value to track its local context — padding inside a button that should grow with the button’s own text, or an icon sized relative to surrounding copy. If you find deeply nested em values compounding unexpectedly, that is the usual sign the value should have been rem.