CSS Unit Converter (PX ↔ REM ↔ VW)
About CSS Unit Converter
The CSS Unit Converter translates length units between Pixels (px), REM, EM, Viewport Width (vw), Viewport Height (vh), Percent (%), Points (pt), and Centimeters (cm) with customizable root base font size (default 16px).
How to Use CSS Unit Converter
Step 1
Enter the numerical value and select the source unit (e.g. 32px).
Step 2
Set the base font size if different from the default 16px.
Step 3
View all equivalent CSS units calculated simultaneously in the matrix.
Step 4
Click "Copy" next to your desired target unit (e.g. 2rem).
Practical Use Cases for CSS Unit Converter
Responsive Typography & Spacing Systems
Convert Figma pixel values into relative REM units for accessible, scalable web typography and fluid layouts.
Print Stylesheet & Mobile Layout Conversion
Convert screen pixels to points (pt) or millimeters for CSS @media print layouts and mobile viewports.
Input & Output Examples
Converting 24px to REM (Base 16px)
Value: 24px, Base Font Size: 16px
1.5rem (CSS Rule: font-size: 1.5rem;)
Key Features & Performance
- ✓Real-time bi-directional conversion between PX, REM, EM, VW, VH, %, PT, and CM.
- ✓Configurable Root Base Font Size (default 16px).
- ✓Configurable Viewport dimensions (Width & Height) for viewport unit calculations.
- ✓1-Click Copy converted value and full CSS property declaration.
- ✓Quick reference conversion table for common font sizes (12px to 72px).
- ✓100% Client-Side instant calculation.
Key Terminology & Definitions
REM (Root EM)
A relative CSS unit proportional to the font size of the root <html> element (usually 1rem = 16px by browser default).
EM Unit
A relative CSS unit calculated relative to the font size of the parent element, which can compound in nested hierarchies.