HyperTeamsCSS Unit Converter
Convert CSS units between px, rem, em, pt, %, vw, and vh. Calculate responsive units with custom base font size and viewport settings.
Conversion Settings
Base font size for rem/em calculations
Viewport width for vw calculations
Viewport height for vh calculations
px to rem Conversion Table
| PX | REM | Copy |
|---|---|---|
| 8px | 0.5rem | |
| 12px | 0.75rem | |
| 14px | 0.875rem | |
| 16px | 1rem | |
| 18px | 1.125rem | |
| 20px | 1.25rem | |
| 24px | 1.5rem | |
| 32px | 2rem | |
| 48px | 3rem | |
| 64px | 4rem |
How to Use CSS Unit Converter
- Enter a numeric value in the input field
- Select the source unit (From Unit)
- Select the target unit (To Unit)
- Adjust base font size and viewport settings if needed
- Click Convert to see the result
Supported CSS Units
- px (Pixels) - Absolute unit, 1px = 1/96th of an inch on most screens
- rem (Root Em) - Relative to the root element's font size, typically 16px
- em (Em) - Relative to the parent element's font size
- pt (Points) - Absolute unit, commonly used in print (1pt = 1/72 inch)
- % (Percentage) - Relative to the parent element's size
- vw (Viewport Width) - 1vw equals 1% of the viewport width
- vh (Viewport Height) - 1vh equals 1% of the viewport height
Common CSS Conversions
- 16px to 1rem - Standard base font size conversion
- 1px to 0.75pt - Pixel to point conversion for print
- 100vw to viewport width - Full viewport width
- 62.5% trick - Set html font-size to 62.5% so 1rem = 10px for easier math
Why Use Relative Units?
- Accessibility - Users can adjust text size in browser settings and your design adapts
- Responsive Design - Layouts scale naturally across different screen sizes
- Maintainability - Change the base size in one place to scale the entire design
- Modern Standards - Following web accessibility guidelines (WCAG) for inclusive design
- Works entirely in your browser - no data is sent to any server
Conversion Formula
rem = px / base-font-sizeExample: 24px / 16px (base) = 1.5rem