Convert PX to REM — Responsive CSS Units
Enter pixel values — one per line — and get instant rem equivalents at any base font size. Includes a Tailwind CSS spacing reference so you can match design tokens without context-switching.
| px | rem | Tailwind |
|---|---|---|
| 12px | 0.75rem | tw-3 |
| 14px | 0.875rem | tw-3.5 |
| 16px | 1rem | tw-4 |
| 18px | 1.125rem | — |
| 20px | 1.25rem | tw-5 |
| 24px | 1.5rem | tw-6 |
| 28px | 1.75rem | tw-7 |
| 32px | 2rem | tw-8 |
| 48px | 3rem | tw-12 |
| 64px | 4rem | tw-16 |
| 96px | 6rem | tw-24 |
About this tool
When and why to use rem over px
Why use rem units instead of pixels
rem (root em) is a relative unit — it scales with
the root <html> element's font size. When a
user with low vision bumps their browser's base font size from
16px to 20px for readability, every rem-based
measurement on the page scales proportionally. The layout adapts
to the user.
Pixel-based layouts ignore that setting entirely. Text stays 16px no matter what the user prefers — which is, in many jurisdictions, a WCAG accessibility failure.
How rem sizing improves responsive design
Because every rem measurement is anchored to a
single value (html { font-size }), you can
re-flow an entire layout for a new breakpoint by changing
one number. Tighten the root font-size at narrower viewports
and every margin, padding, and font-size in the design
tightens with it — no individual media queries needed.
This is also why rem pairs well with utility CSS
frameworks. Tailwind's spacing scale is
defined in rem from tw-0 (0rem) to tw-96
(24rem). The converter shows the closest matching Tailwind
class for each value so you don't have to look them up.
Tailwind CSS and rem: the short version
Tailwind's default scale is built on a 4px / 0.25rem grid.
tw-1 = 0.25rem = 4px, tw-4 = 1rem = 16px,
tw-16 = 4rem = 64px. Once the rhythm clicks you
rarely think in pixels — you think in 4-unit grid steps. That
consistency is what makes design tokens reusable across an
entire app.
MarkupFox builds React and Next.js front-ends on the same rem-first, design-token-driven foundation. If your team needs production-ready components from a Figma file, see our Design to React service.
FROM THE TEAM THAT BUILT THIS TOOL
We write rem-based CSS by default.
MarkupFox React and Next.js deliveries use rem-based spacing throughout, mapped to your design system's scale. Consistent, accessible, and zero-surprise layouts.
Clean up minified or AI-generated HTML. Configurable indentation.
Remove whitespace, comments, and redundant code. Typically 30–70% smaller.
Drag and drop. Get a data URI for inline embedding.
SEO + Open Graph + Twitter Card with live SERP preview.
WCAG AA/AAA contrast ratio for any two colors, with a live preview.
Frequently asked questions
Why use rem instead of px in CSS?
rem (root em) scales with the root element's font size. Users who increase their browser's base font size for accessibility get layouts that scale with them. px values ignore user preferences and stay fixed.
What base font size should I use?
The browser default is 16px (1rem = 16px). If you haven't overridden font-size on :root or html in your CSS, leave the base at 16. Some teams set it to 10px for easier mental math (1rem = 10px, 1.6rem = 16px).
What is the Tailwind spacing scale?
Tailwind's spacing scale increments in 4px (0.25rem) steps. tw-4 = 1rem = 16px, tw-8 = 2rem = 32px. The column shows the nearest Tailwind class for each converted value so you can pick the right utility without context-switching.
Should I use rem for everything, including borders?
For text and spacing, yes. For borders, hairlines, and tiny visual details (like 1px or 2px lines), px is usually fine — they look the same regardless of root font size and avoid sub-pixel rendering issues.
How does rem differ from em?
em is relative to the parent element's font size, so it compounds in nested elements. rem is always relative to the root (html) element, so it stays predictable no matter where you use it. Stick with rem unless you specifically need the compounding behavior.
Can I paste multiple values at once?
Yes. Enter one value per line, or separate them with commas. The tool accepts plain numbers (16) or px suffix (16px) — both are treated the same.