px to rem Converter & Guide
Convert pixels to rem units instantly. Set your root font size (default 16px) and get accurate rem values for any pixel measurement. Paste CSS to batch-convert all px values to rem. All processing happens in your browser — your data never leaves your device.
CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, and % with configurable base sizes.
1rem
Batch Converter
Paste CSS and replace all unit values at once.
px ↔ rem Reference Table
Base font size: 16px
| px | rem | em | pt |
|---|---|---|---|
| 4px | 0.25rem | 0.25em | 3pt |
| 8px | 0.5rem | 0.5em | 6pt |
| 10px | 0.625rem | 0.625em | 7.5pt |
| 12px | 0.75rem | 0.75em | 9pt |
| 14px | 0.875rem | 0.875em | 10.5pt |
| 16px | 1rem | 1em | 12pt |
| 18px | 1.125rem | 1.125em | 13.5pt |
| 20px | 1.25rem | 1.25em | 15pt |
| 24px | 1.5rem | 1.5em | 18pt |
| 28px | 1.75rem | 1.75em | 21pt |
| 32px | 2rem | 2em | 24pt |
| 36px | 2.25rem | 2.25em | 27pt |
| 40px | 2.5rem | 2.5em | 30pt |
| 48px | 3rem | 3em | 36pt |
| 56px | 3.5rem | 3.5em | 42pt |
| 64px | 4rem | 4em | 48pt |
| 72px | 4.5rem | 4.5em | 54pt |
| 80px | 5rem | 5em | 60pt |
| 96px | 6rem | 6em | 72pt |
| 128px | 8rem | 8em | 96pt |
Press Enter to copy result
How to convert px to rem
The formula is simple: rem = px / root-font-size. With the browser default of 16px, 1rem equals 16px. So 24px is 1.5rem, 14px is 0.875rem, and 32px is 2rem. If your project sets html { font-size: 62.5% } (a common Tailwind/CSS reset trick), the base becomes 10px, making the math easier: 16px = 1.6rem, 20px = 2rem. Use the settings panel to match your project's root font size for accurate conversions.
Why use rem instead of px
rem units are relative to the root font size, so they scale automatically when users change their browser font size (an accessibility requirement under WCAG 2.1). Pixels are fixed and don't respect user preferences. Using rem for font-size, padding, margin, and media queries makes your site accessible to users with low vision who increase their default font size. Most CSS frameworks (Tailwind, Bootstrap 5) use rem internally. The general rule: use rem for typography and spacing, px for borders and box-shadows where exact control matters.
Batch-convert px to rem in CSS files
Paste your CSS into the batch converter, set 'Replace px with rem', and all pixel values are converted instantly. This is faster than find-and-replace because it handles the math automatically — 16px becomes 1rem, 24px becomes 1.5rem, etc. The converter preserves your CSS structure, comments, and non-px values. Use this when migrating a legacy codebase from px to rem or when reviewing design tokens from Figma/Sketch that export in pixels.
Frequently Asked Questions
How many rem is 16px?
With the default root font size of 16px, 16px equals exactly 1rem. The formula is rem = px / root-font-size, so 16 / 16 = 1.
What base font size should I use for rem conversion?
Most browsers default to 16px. If your CSS sets html { font-size: 62.5% }, the base is 10px. If you use html { font-size: 100% } or don't set it, the base is 16px. Match this tool's settings to your project's root font size for accurate conversions.
Should I use rem or em for CSS?
Use rem for most cases — it's relative to the root font size, so it's consistent and predictable. Use em only when you want an element to scale relative to its parent's font size (e.g., padding inside a button that should grow with the button's text). Mixing em and rem in deep nesting causes compounding issues, so rem is safer.
Related Convert Tools
Case Converter
Convert text between camelCase, snake_case, kebab-case, and more
Number Base Converter
Convert numbers between binary, octal, decimal, and hex
CSV ↔ JSON Converter
Convert between CSV and JSON formats with custom delimiters
URL Encoder & Decoder
Encode and decode URLs with encodeURIComponent and encodeURI