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.
px
=
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
- 01Set your base font size (default: 16px, the browser standard)
- 02Enter a PX value to convert to REM, or a REM value to convert to PX
- 03See the result instantly with a visual size preview
- 04Use 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
- 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
- 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
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
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
12 suggested- 01CSS Minifier - Reduce CSS Size InstantlyMinify CSS code by removing whitespace, comments, and unnecessary characters. See exact savings. Free browser-based tool.
- 02CSS Animation Generator - Visual BuilderBuild CSS keyframe animations visually with live preview and copy-ready code. Customize timing, easing, and properties. Free tool.
- 03Color Converter - HEX, RGB, HSL & CMYKConvert colors between HEX, RGB, HSL, and CMYK instantly. Live preview, one-click copy. Free tool for designers and developers.
- 04Image to Base64 Converter - Free Online EncoderConvert any image to Base64 string. Get raw Base64, Data URI, HTML img tag, or CSS background-image. Drag & drop supported.
- 05Fake Data Generator - Names, Emails, AddressesGenerate realistic fake data for testing: names, emails, addresses, phones, companies. Bulk generation up to 100 rows. Export as JSON or CSV. EN, NL, DE, FR locales.
- 06Binary Translator - Text to Binary & Binary to TextConvert text to binary and binary back to text. ASCII and UTF-8 support. Visual binary display with character breakdown table. Copy results instantly.
- 07JSON Path Finder - Interactive JSONPath ExplorerPaste JSON, click on any value to see its JSONPath expression. Interactive tree view, path copying, nested object and array support. Free developer tool.
- 08Email Validator - Syntax and Typo CheckValidate email address syntax, catch typos like gmial.com, and flag disposable addresses. Check one address or a whole list in your browser.
- 09TSV to CSV Converter - Free & PrivateConvert tab separated data to RFC 4180 CSV with proper quoting, a semicolon option for Excel and a UTF-8 BOM toggle. Free and fully browser based.
- 10CSV to Markdown Table Converter - Free & PrivateConvert CSV to a Markdown table with per column alignment and RFC 4180 quoted field support. Free, browser based, nothing is uploaded to a server.
- 11XML to JSON Converter - Free & PrivateConvert XML and SOAP responses to JSON in your browser. Configurable attribute prefix, namespace handling and arrays for repeated tags. Free and private.
- 12YAML to JSON Converter - Free & PrivateConvert YAML to JSON online. Nested maps, sequences, inline flow style, comments and block scalars, with line numbered errors. Free and browser based.
Link to this tool
Free to use, free to linkMentioning this tool in a README, a blog post or your team wiki? Paste one of these and your readers land straight on the tool, running in their own browser.
- HTML
<a href="https://toolforte.com/tools/px-rem-converter">PX to REM Converter</a> - MD
[PX to REM Converter](https://toolforte.com/tools/px-rem-converter)