PX ↔ REM Converter
Enter a pixel or rem value and base font size to convert between units instantly, with a reference table for common values.
1rem
Reference table (base 16px)
| Pixels | REM |
|---|---|
| 8px | 0.5rem |
| 12px | 0.75rem |
| 14px | 0.875rem |
| 16px | 1rem |
| 18px | 1.125rem |
| 20px | 1.25rem |
| 24px | 1.5rem |
| 32px | 2rem |
| 48px | 3rem |
| 64px | 4rem |
Conversion is instant and runs locally — nothing is uploaded.
How to use PX ↔ REM Converter
The PX to REM Converter converts pixel values to rem units and rem back to px for responsive CSS design, with a configurable root font size (default 16px). It includes a reference table of common conversions so you can quickly look up the rem equivalent of any pixel value while coding. Conversion is instant and runs locally with no uploads.
- Choose the conversion direction: PX → REM or REM → PX.
- Enter the value you want to convert in the input field.
- Adjust the base font size if your project uses a root font size other than 16px.
- The converted value appears instantly below the input.
- Refer to the reference table for common px/rem pairs at the selected base size.
Your data never leaves your device — 100% private processing.
Why use rem instead of px in CSS
CSS pixels (px) are absolute units: 16px is always 16px regardless of user preferences. rem (root em) is relative to the root element font size (html { font-size }), which browsers default to 16px but users can change in their accessibility settings. Using rem for font sizes, spacing, and layout means that users who increase their browser font size for readability get proportionally larger UI — critical for meeting WCAG accessibility guidelines. px is appropriate for values that should never scale (border widths, shadows, fine lines) but should be avoided for text, padding, and layout dimensions. The common convention of setting html { font-size: 62.5% } makes 1rem = 10px (easy mental arithmetic), but this requires resetting all inherited text sizes.
| Pixels | REM | Tailwind class (approx) |
|---|---|---|
| 8px | 0.5rem | text-xs / p-2 |
| 12px | 0.75rem | text-sm |
| 14px | 0.875rem | text-base (Tailwind) |
| 16px | 1rem | text-base / p-4 |
| 18px | 1.125rem | text-lg |
| 20px | 1.25rem | text-xl |
| 24px | 1.5rem | text-2xl / p-6 |
| 32px | 2rem | text-4xl / p-8 |
| 48px | 3rem | text-5xl |
| 64px | 4rem | text-6xl |
em vs rem — when to use each
em is relative to the font-size of the element itself (or its nearest ancestor with a font-size set), while rem is always relative to the root html element. This makes rem predictable: 2rem is always twice the root font size no matter how deeply nested the element is. em is useful for component-relative spacing — padding: 1em on a button scales proportionally if the button's font-size changes, keeping the button proportions consistent. The classic problem with em is compounding: nested elements each multiply their parent's font size, so three levels of 1.2em produces 1.2 × 1.2 × 1.2 = 1.728rem. Use rem for global spacing and typography scales; use em for component-internal spacing that should scale with the component's text size.
Glossary
- rem
- Root em — a CSS relative unit equal to the font-size of the root html element (default 16px in most browsers).
- em
- A CSS relative unit equal to the current element's font-size; compounds with nesting, unlike rem.
- Root font size
- The font-size set on the html element; typically 16px by default in browsers but can be changed by users or stylesheets.
- Viewport units
- CSS units vw and vh representing 1% of the viewport width/height; used for fluid layout alongside rem.
- WCAG
- Web Content Accessibility Guidelines — the international standard for web accessibility; requires that text can be resized by users without loss of content.
Related reading
Frequently Asked Questions
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
Why use PX ↔ REM Converter?
- No installation — use directly from any browser
- Handles large inputs without crashing or timeouts
- Syntax highlighting and formatted output for readability
- Copy to clipboard shortcut for fast workflow integration
Common use cases
- Validate and format JSON responses from APIs
- Encode/decode Base64 strings during debugging
- Generate UUIDs for database seeds or test data
- Minify CSS or JavaScript before deployment
- Diff two code snippets to spot regressions
Related Developer Tools
CSS Box Shadow Generator
Design CSS box-shadows visually with a live preview and copy the code. Layer multiple shadows, set blur, spread, and color. Free and private.
CSS Border Radius Generator
Create rounded corners visually and copy the CSS. Control each corner independently for buttons, cards, and blobs. Free and private.
CSS Minifier & Beautifier
Minify and beautify CSS code online. Reduce CSS file size by removing whitespace and comments. Free online CSS minifier with instant results.
JSON Formatter & Validator
Format, validate, and minify JSON instantly. Includes syntax highlighting, error detection, and a collapsible tree view — free, private, in-browser.
Regex Tester
Test and debug regular expressions online. See live matches, capture groups, and replace output. Free, private, instant.
Base64 Encoder & Decoder
Encode text or files to Base64, or decode Base64 strings back to text. Fast, free, and runs entirely in your browser.
Explore all Developer Tools.