CSS Unit Converter (PX ↔ REM ↔ VW)
About REM ↔ PX
The CSS `rem` to Pixels (px) Converter calculates exact pixel values from root element relative units (`rem * base_font_size`), supporting standard 16px root font sizes, 62.5% (10px) CSS resets, and Tailwind / Bootstrap spacing scales.
How to Use REM ↔ PX
Step 1
Enter the `rem` value (e.g. `1.5rem`).
Step 2
Set your root base font size (default: `16px`).
Step 3
Review the calculated pixel measurement.
Step 4
Click "Copy px".
Practical Use Cases for REM ↔ PX
Translating CSS / Tailwind `rem` Values to Figma Pixels
Quickly calculate what `1.75rem` or `2.25rem` in Tailwind CSS corresponds to in exact Figma design pixels (e.g. `28px`, `36px`).
Auditing Accessibility Font Sizes
Verify that root-relative typography scales meet WCAG minimum readable body text guidelines across custom base font configurations.
Input & Output Examples
Converting 2.5rem with 16px Base Font
rem: `2.5rem` | Base Size: `16px`
`40px` | Formula: `2.5 * 16` | CSS: `font-size: 40px;`
Key Features & Performance
- ✓Configurable root base font size: 16px (Browser default), 10px (62.5% reset), 14px, 12px, or custom.
- ✓Batch conversion: converts entire CSS stylesheets or multi-line declarations from rem to px.
- ✓Includes Tailwind CSS spacing scale lookup table (e.g. `p-4` $\\rightarrow$ `1rem` $\\rightarrow$ `16px`).
- ✓100% Client-Side memory execution.
- ✓1-Click Copy pixel value.
Key Terminology & Definitions
`rem` (Root EM)
A relative CSS unit that is directly proportional to the `font-size` of the root element (`<html>`), independent of parent element font sizes.
62.5% CSS Reset
Setting `html { font-size: 62.5%; }` so that `1rem` conveniently equals exactly `10px` while respecting browser user font zoom preferences.