CSS Unit Converter - px to rem, em, vw, vh
Convert between px, rem, em, vw, vh, %, and pt instantly. Configure base font size and viewport dimensions for accurate responsive design calculations.
Settings
px
16px
rem
1rem
em
1em
vw
0.8333vw
vh
1.4815vh
%
100%
pt
12pt
CSS Units Explained: px, rem, em, vw, vh
- px (pixels) - The most common absolute unit. 1px = 1/96th of 1 inch on screen. Pixel values are fixed and don't scale with user preferences.
- rem (root em) - Relative to the root
<html>element's font size. With the default 16px base, 1rem = 16px. Using rem makes your design scale with the user's browser font size setting. Use this px to rem converter to switch easily. - em - Relative to the parent element's font size. Useful for component-scoped sizing where elements should scale relative to their context.
- vw (viewport width) - 1vw = 1% of the browser window width. Great for fluid typography and responsive layouts. Use our rem to vw converter for responsive calculations.
- vh (viewport height) - 1vh = 1% of the browser window height. Useful for full-screen hero sections and sticky elements.
- % (percentage) - Relative to the parent element's size. Context-dependent and commonly used for widths and padding.
- pt (points) - 1pt = 1/72 of 1 inch. Common in print design and PDF stylesheets.
When to Use Each CSS Unit
- Font sizes - Use rem for font sizes so they respect user browser settings. Convert with this px to rem calculator.
- Spacing & padding - Use rem or em for consistent spacing that scales with typography.
- Widths - Use % or vw for responsive container widths.
- Borders & shadows - Use px for precise, fixed-size elements like borders (1px, 2px).
- Full-screen sections - Use vh for hero sections that fill the viewport height.
Frequently Asked Questions
How many px is 1rem?
By default, 1rem = 16px (since most browsers use a 16px root font size). However, if the user or CSS changes the root font size, the conversion changes accordingly. Use the "Base Font Size" setting above to match your project's configuration.
Should I use rem or em for responsive design?
Use rem in most cases. It provides consistent sizing relative to the root font size, making it predictable. Use em only when you want sizing to be relative to the parent element (e.g., padding inside a component that should scale with its own font size).
What is the difference between vw and %?
vw is always relative to the viewport (browser window) width, regardless of parent elements. % is relative to the parent element's size, which depends on context. For fluid typography and full-width layouts, vw is more predictable.
How do I convert 30px to rem?
With a 16px base font size: 30px / 16 = 1.875rem. Enter 30 in the value field, select "px" as the unit, and this converter will show you the rem equivalent instantly. You can also adjust the base font size if your project uses a different root size.
Related Free Tools
- Color Converter - Convert colors between HEX, RGB, HSL, and OKLCH for your stylesheets.
- CSS Gradient Generator - Build CSS gradients with a visual editor and copy the code.
- WCAG Contrast Checker - Test color combinations for accessibility compliance.
- CSS Inspector Feature - Inspect CSS values (including units, sizes, spacing) on any live website.
- Design Tokens Extractor - Extract spacing, font sizes, and all design tokens from any website.