PX to REM Converter — CSS Unit Calculator
Convert pixels to REM and REM to pixels with custom base font size. Quick reference table with visual preview. Free CSS unit converter.
Quick Reference (base: 16px)
| Pixels | REM | Preview |
|---|---|---|
| 8px | 0.5rem | Aa |
| 10px | 0.625rem | Aa |
| 12px | 0.75rem | Aa |
| 14px | 0.875rem | Aa |
| 16px | 1rem | Aa |
| 18px | 1.125rem | Aa |
| 20px | 1.25rem | Aa |
| 24px | 1.5rem | Aa |
| 28px | 1.75rem | Aa |
| 32px | 2rem | Aa |
| 36px | 2.25rem | Aa |
| 40px | 2.5rem | Aa |
| 48px | 3rem | Aa |
| 56px | 3.5rem | Aa |
| 64px | 4rem | Aa |
| 72px | 4.5rem | Aa |
| 80px | 5rem | Aa |
| 96px | 6rem | Aa |
How the PX to REM Converter Works
- Set your base font size (default: 16px, the browser standard)
- Enter a PX value to convert to REM, or a REM value to convert to PX
- See the result instantly with a visual size preview
- Use the quick reference table for common conversions
PX and REM Units Guide
REM stands for 'root em' and is relative to the root element's font size (html element). The default browser font size is 16px, so 1rem = 16px. Using REM units makes your layout respond to user font size preferences, which is critical for accessibility. The 62.5% technique (setting html { font-size: 62.5% }) gives you a 10px base, making mental math easier: 1.6rem = 16px, 2.4rem = 24px. However, this can confuse third-party component libraries, so the standard 16px base is recommended for most projects.
When to Use a PX to REM Converter
Use this converter when implementing designs from Figma, Sketch, or Adobe XD that specify values in pixels but your CSS codebase uses REM units. It is essential during responsive web development, accessibility audits (ensuring WCAG 1.4.4 compliance for text resizing), and when adopting CSS frameworks like Tailwind that use REM-based spacing scales.
Common Use Cases
- •Convert Figma or Sketch pixel values to REM for CSS implementation CSS Minifier — Reduce CSS Size Instantly
- •Ensure WCAG 1.4.4 compliance by using scalable REM units for text and spacing
- •Build responsive layouts with consistent REM-based spacing scales CSS Flexbox Generator — Visual Builder
- •Migrate legacy PX-based CSS codebases to modern REM-based stylesheets
- •Create a spacing system for a design system or component library Typography Scale Calculator — CSS Export
Expert Tips
- ✱Stick to the standard 16px base unless your entire team agrees on a different base — mixing bases causes confusion
- ✱Use the reference table to memorize common conversions: 12px = 0.75rem, 14px = 0.875rem, 16px = 1rem, 24px = 1.5rem
- ✱For borders and box shadows, keep PX units — these decorative properties should not scale with font size
Frequently Asked Questions
- The default browser base font size is 16px, which means 1rem = 16px. You can change this in the tool to match your project's root font size.
- REM units scale with the user's browser font size preference, improving accessibility. Users who set a larger default font (common for low vision) will see your layout scale proportionally.
- Setting html { font-size: 62.5% } changes the base to 10px, making conversions easier: 1.6rem = 16px, 2rem = 20px. Use this tool with a base of 10 if your project uses this approach.
- Use REM for font sizes, spacing, and most layout dimensions. Use PX for borders, box shadows, and other decorative properties that should not scale with font size.
- EM units are relative to the parent element's font size, not the root. This tool converts PX to REM (root-relative). For EM conversions, you need to know the parent's computed font size.
What is the default base font size?▾
Why should I use REM instead of PX?▾
What is the 62.5% technique?▾
Should I use REM for everything?▾
Does this work for EM units too?▾
Related Tools
CSS Minifier — Reduce CSS Size Instantly
Minify CSS code by removing whitespace, comments, and unnecessary characters. See exact savings. Free browser-based tool.
CSS Animation Generator — Visual Builder
Build CSS keyframe animations visually with live preview and copy-ready code. Customize timing, easing, and properties. Free tool.
Color Converter — HEX, RGB, HSL & CMYK
Convert colors between HEX, RGB, HSL, and CMYK instantly. Live preview, one-click copy. Free tool for designers and developers.
JSON Formatter & Validator — Instant Results
Format, validate, and minify JSON with instant error highlighting. Pinpoints syntax errors. Free, private, browser-based.
JSON to CSV Converter — Export Instantly
Convert JSON arrays to CSV format with automatic header detection. Download as CSV file. Free, browser-based — no upload needed.
CSV to JSON Converter — Auto-Detect Format
Convert CSV data to JSON format instantly. Auto-detects delimiters and headers. Free, private, browser-based — no upload needed.