PX to REM Calculator
Use this free px to rem calculator to turn static pixel mockups into scalable CSS units instantly. Set your root base font size, calculate accurate REM or EM values, and build accessible, responsive interfaces without manual math.
What is a PX to REM Converter and How Does It Work?
A px to rem calculator translates fixed screen pixels (px) into relative root em (rem) units based on your HTML root element font-size. It ensures text scales smoothly with user browser settings, improving accessibility (a11y) and responsive typography across all screen viewports.
Pixels (PX) are fixed-size units. They lock elements to absolute screen dimensions, which ignores user device preferences and breaks accessibility guidelines for low-vision readers using browser zoom.
REM (Root EM) scales relative to the root element (<html> font-size). With a standard 16px default, 1rem = 16px. Changing the root size scales all REM values globally across media queries.
EM calculates size relative to its immediate parent element. In the em vs rem debate, use EM for components that need proportional padding or nested icons, and REM for global spacing, margins, and typography.
What is the Formula to Convert PX to REM?
To convert pixels to relative CSS units, divide your target pixel value by the base font size of the root element (default 16px):
rem = px / root-font-size. For 24px: 24 / 16 = 1.5rem.em = px / parent-font-size. Inherits from immediate parent container.How to Convert PX to REM in CSS & Tailwind CSS
1. Identify the Root Base Font Size: Most browsers use a 16px browser default font size. Verify if your project stylesheet modifies the root <html> element font-size.
2. Run the Calculation: Take the pixel dimension from your Figma or Sketch mockups (e.g., 20px body copy) and divide it by your base: 20 / 16 = 1.25rem.
3. Apply in Raw CSS: Assign the computed rem unit directly to your CSS rules: font-size: 1.25rem; or padding: 1.5rem;.
4. Use with Tailwind CSS: Tailwind uses a 16px baseline for its spacing scale (e.g., p-4 = 1rem = 16px). For custom pixel values, use arbitrary values like text-[1.25rem] or extend your tailwind.config.js theme.
PX to REM Conversion Chart (16px Base Font Size)
Quick reference for standard CSS units (px, rem, em, %) across common UI layout and typography scales:
| Pixels (PX) | REM (16px Base) | EM (16px Parent) | Percentage (%) |
|---|---|---|---|
| 12px | 0.75rem | 0.75em | 75% |
| 14px | 0.875rem | 0.875em | 87.5% |
| 16px | 1.0rem | 1.0em | 100% |
| 18px | 1.125rem | 1.125em | 112.5% |
| 20px | 1.25rem | 1.25em | 125% |
| 24px | 1.5rem | 1.5em | 150% |
| 32px | 2.0rem | 2.0em | 200% |
Frequently Asked Questions
What is the formula to convert px to rem?
The formula is: REM = Pixels (px) / Root Base Font Size (px). For instance, if your root font size is 16px, a 24px element converts to 24 / 16 = 1.5rem.
Is 16px equal to 1rem?
Yes, in standard browser configurations, 16px equals 1rem. Every major browser sets the default root <html> font size to 16px unless modified in CSS.
Why use rem instead of px in CSS?
REM units respect user font adjustments and screen zoom settings. This protects accessibility (a11y) and scalable text, whereas fixed pixel sizes remain static and can cause layout overflow on mobile viewports.
How do I change the base font size for rem calculations?
You can change the root font size by styling the HTML tag in CSS (e.g., html { font-size: 62.5%; } to set 1rem equal to 10px) or by adjusting your theme configuration in Tailwind CSS.
What is the difference between rem and em?
REM is calculated against the root HTML font size, ensuring consistent global sizing. EM scales relative to its immediate parent element, making EM ideal for component-level padding and badges.
PX to REM / EM Converter
Equivalent to 32px / 2em
font-size: 2.0000rem; /* 32px */* Standard conversion assumes the browser default root font size of 16px (1rem = 16px) per W3C CSS Values and Units Module Level 4.
Check out 4 similar collection of design calculators