Description: Why Convert PX to REM?
In modern web development, the PX to REM conversion is a critical step in creating accessible and responsive user interfaces. While pixels (PX) are absolute units that represent a fixed physical size on a screen, REM (Root EM) units are relative to the root font size of the document.
When you use pixels for font sizes or layout spacing, you are hardcoding dimensions. If a user increases their browser's default font size, a pixel-based layout will remain static. By using REM units, your application scales proportionally with the user's preferences.
At 16kpixel, we've built this tool to help developers bridge the gap between static design mockups and fluid, production-ready CSS.
How It Works: The Mathematics of REM
The calculation for REM depends on your Base Font Size. By default, almost all modern browsers set the root font size to 16px.
The Formula
REM = PX / Base SizeExample: 32px / 16px = 2rem
If your project uses a different base, you can adjust the base value in our tool to get the correct output.
Step-by-Step Conversion
- Identify the Pixel Value: Take the measurement from your design tool.
- Determine the Base: Check your CSS reset or global styles for the
htmlfont-size. - Perform the Division: Divide your pixel value by that base.
- Apply to CSS: Use the resulting value in your stylesheets.
PX to REM Quick Reference (16px Base)
| Pixels (px) | REM Value | Tailwind Class | Usage |
|---|---|---|---|
| 4px | 0.250rem | text-1 | Caption |
| 8px | 0.500rem | text-2 | Caption |
| 12px | 0.750rem | text-3 | Caption |
| 14px | 0.875rem | - | Body |
| 16px | 1.000rem | text-4 | Body |
| 18px | 1.125rem | - | Body |
| 20px | 1.250rem | text-5 | Heading |
| 24px | 1.500rem | text-6 | Heading |
| 32px | 2.000rem | text-8 | Heading |
| 40px | 2.500rem | text-10 | Heading |
| 48px | 3.000rem | text-12 | Heading |
| 64px | 4.000rem | text-16 | Heading |
| 80px | 5.000rem | text-20 | Heading |
| 96px | 6.000rem | text-24 | Heading |
Frequently Asked Questions (FAQ)
Should I use REM for everything?
Generally, yes. REM is ideal for font sizes, margins, paddings, and layout widths. However, for elements that should never scale—like a 1px border—pixels are still the appropriate choice.
What is the 62.5% trick?
This is a CSS technique where you set html { font-size: 62.5%; }. Since 62.5% of 16px is 10px, it makes mental math easier. 14px becomes 1.4rem, 24px becomes 2.4rem, etc.
Is REM supported in all browsers?
Yes. REM units have been a standard in CSS for over a decade and are supported in all modern browsers, including mobile versions.
How does REM differ from EM?
REM is relative to the root (html) element, while EM is relative to the parent element. EM units can "compound", which often leads to unpredictable sizing in complex layouts.