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.
Worked examples
24px to rem
Inputs: 24px · base 16px
Result: 1.5rem
rem to px
Inputs: 1.25rem · base 16px
Result: 20px
Custom base (62.5%)
Inputs: 24px · base 10px
Result: 2.4rem
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
Why use PX ↔ REM Converter?
- Convert pixel values to rem units instantly with a configurable root font size
- Look up any common pixel value in the built-in reference table without manual division
- Understand the em vs rem difference to avoid font-size compounding in nested components
- Convert rem back to px to verify a design mockup measurement matches a CSS declaration
Common use cases
- Convert a designer's pixel spacing values to rem before writing utility classes in a design system
- Fix a layout that breaks at large browser font sizes by replacing px with rem
- Check whether 1.25rem matches the 20px value specified in a Figma design handoff
- Calculate the rem equivalent of a Tailwind class (text-2xl = 1.5rem = 24px) for a custom component
- Convert font-size declarations in a legacy stylesheet from px to rem for accessibility compliance
Get weekly tool tips & updates
New tools, power-user tips, and productivity hacks — delivered free every Friday.
No spam, ever. Unsubscribe with one click.
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.
Glassmorphism Generator
Generate frosted-glass (glassmorphism) CSS with backdrop blur, transparency, and border. Live preview and copy. 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.
Code Beautifier & Formatter
Format and beautify code online with Prettier. Supports JavaScript, TypeScript, JSON, CSS, HTML, Markdown, YAML, and more. Free, private, runs in your browser.
JSON Formatter & Validator
Format, validate, and minify JSON instantly. Includes syntax highlighting, error detection, and a collapsible tree view — free, private, in-browser.
Explore all Developer Tools.