Px to Rem Converter
Convert pixels to rem (and back) with a configurable root font size, copy-ready Tailwind class output, and a quick reference table of the most common front-end sizes.
Why Use Px to Rem Converter?
Browsers default to a 16px root font size, but users can change it for accessibility — a setting that px-based designs ignore but rem-based designs respect. Converting a pixel-heavy Figma export into a rem-based system is a stack of `÷ 16` arithmetic and is easy to slip on. This converter gives you the rem at your configured root, the closest Tailwind class for one-click adoption, and a reference table of the values you reuse across a stylesheet — heading sizes, body text, gap/padding tokens — all in a single view.
How to Use Px to Rem Converter
- Pick a direction: Px → Rem (default) or Rem → Px using the tabs at the top.
- Enter a value in the input field — conversion happens live as you type.
- Adjust the root font size if your project uses something other than the 16px default (10px, 12px, 14px, 18px, 20px, 24px presets are one click away).
- Copy the rem value, or copy the suggested Tailwind class for the most common spacing and sizing utilities.
- Use the Common Conversions table below for the canonical 8/12/14/16/18/20/24/32/48/64 px values.
Worked Examples
Heading spec → rem + Tailwind class
24 px, base 16
1.5 rem · Tailwind: *-6 (e.g. p-6, m-6, w-6, h-6, gap-6)
Use `1.5rem` (or `text-2xl` if it's a font size) so the heading scales with user font preference.
Reverse-engineer a rem from a live page
1.25 rem, base 16
20 px · Tailwind: *-5
When inspecting a live element in dev tools, you can see exactly what pixel value the designer intended.
Custom 10px root for a clean conversion factor
20 px, base 10 (using the `font-size: 62.5%` trick)
2 rem · Tailwind: *-8 (closest)
Setting the root to 10px makes every `Npx` become `(N/10)rem`, killing the `÷ 16` mental math.
About Px to Rem Converter
The Px to Rem Converter is a free, client-side calculator for translating between pixel values from a Figma spec or legacy CSS file and the rem units that modern, accessible CSS expects. It also outputs the closest Tailwind CSS spacing class so design tokens, padding, margin, width, and height utilities all line up with your design system. Everything runs in your browser — no values are uploaded anywhere — so it's safe to use with private design specs and unreleased product mocks.
Troubleshooting & Common Issues
Computed px in dev tools doesn't match my rem value
Either the `<html>` element has a custom font-size set (via CSS or a user agent stylesheet override), or a parent has a `font-size` that you're confusing with the root. Confirm the computed `font-size` on `<html>` itself in dev tools and use that as the converter's base.
Tailwind class shows as a long fractional class
Tailwind's default scale is 0.25rem increments (4px multiples). If your rem value doesn't land on a multiple of 0.25rem, no exact class exists — the converter omits the Tailwind suggestion. Either round to the nearest 4px multiple, or extend Tailwind's `theme.spacing` config with the custom value.
Result has trailing 9s like `0.6249999...rem`
That's floating-point representation in JavaScript — this converter rounds to 4 decimals and strips trailing zeros, so you'll see `0.625rem`. If you see longer decimals elsewhere, the upstream tool is just showing raw float output.
Need to convert a list of values, not one at a time
For bulk work, the formula is `rem = px ÷ baseFontSize`. Drop your pixel list into a spreadsheet, divide by the base, and you have rem in seconds. This converter is optimized for the per-value case where you also want the matching Tailwind class.
Frequently Asked Questions
How do I convert px to rem?
Divide the pixel value by the root font size (typically 16px). Formula: rem = px ÷ 16. Examples: 8px = 0.5rem, 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem. If your project uses a non-default root, divide by that value instead.
What is 1 rem in pixels?
By default, 1rem equals 16px because all major browsers ship with a 16px root font size. If your CSS sets `html { font-size: 18px; }`, 1rem becomes 18px on that page. Users can also change the default in their browser settings — rem-based designs respect that, px-based designs don't.
Should I use rem or px for font sizes?
Use rem. Users who increase their default font size (commonly for vision or low-contrast monitors) expect text to scale. px-based fonts ignore the preference, which is an accessibility regression. Reserve px for borders, hairlines, and pixel-snapped icons that should stay fixed.
Does rem work in CSS media queries?
Yes, and it's preferable to px in many cases — using `@media (min-width: 48rem)` instead of `@media (min-width: 768px)` means the breakpoint scales with the user's font-size setting. A user who bumps the root font scales the entire layout, including the breakpoint trigger, in a coherent way.
What is 14px in rem?
At the default 16px root: 14px = 0.875rem. Other common conversions you can copy directly: 10px = 0.625rem, 12px = 0.75rem, 18px = 1.125rem, 20px = 1.25rem, 24px = 1.5rem, 32px = 2rem.
Does using rem affect SEO?
Not directly. Google does not score pages on which length unit you use. Rem can indirectly help by improving Core Web Vitals through a more accessible, less layout-shifty design — particularly important since the March 2024 INP metric rollout — but the unit choice itself is invisible to crawlers.
How does rem behave on mobile devices?
Identically to desktop — the root font-size is set by the device's browser (almost always 16px). The viewport width has no effect on the rem-to-px conversion factor; only the html element's `font-size` does. Use `clamp()` or media queries on `font-size` if you want responsive root scaling.
Is my data sent to any server?
No. The Px to Rem Converter runs 100% client-side in your browser — your input never leaves your device. Safe for use on confidential design specs, internal style guides, or unreleased product mocks.
Related Tools
Em to Px Converter
Convert em to px (and back) with explicit parent font size context and a compounding visualizer that shows how em multiplies through nested elements — so you don't get burned by the rem-vs-em confusion.
Aspect Ratio Calculator
Calculate aspect ratios from dimensions, derive missing dimensions from a ratio + one side, and resize images proportionally. Includes 7 common-ratio presets, decimal output, and the modern CSS aspect-ratio property value.
Pixels to Inches Converter
Convert pixels to inches, centimeters, millimeters, and points at any DPI. Includes inches to pixels conversion and a precomputed reference table.
Was this tool helpful?