Free CSS Unit Converter
Convert px to rem, em, vh, vw, pt and back — instantly. Set your base font size for accurate results.
CSS unit conversion is a constant task for web developers — calculating rem values for pixel measurements, converting to viewport-relative units for responsive layouts, or verifying pt values for print stylesheets. Set your base font size and viewport dimensions, enter any value, and get instant conversions to rem, em, vw, vh and pt. Click any result to copy it directly.
Common px → rem conversions (base: 16px)
| px | rem | em | pt | vw (1440px) |
|---|
CSS Units Explained for Web Developers
px (pixels) is the most common CSS unit — fixed size regardless of parent. rem (root em) is relative to the root HTML font size (typically 16px by default in browsers). em is relative to the parent element's font size. vw/vh are percentages of the viewport width and height — 1vw = 1% of viewport width. pt (points) is used for print media: 1pt ≈ 1.333px.
Using rem instead of px for font sizes and spacing makes layouts more accessible — when a user increases their browser font size, rem-based layouts scale accordingly while px-based ones do not.
Absolute, Relative and Viewport Units in Practice
CSS units divide into three groups that behave quite differently. Absolute units — px, pt, cm — are fixed. A CSS pixel is a reference unit rather than a physical device pixel: on a high-density display the browser maps one CSS pixel onto two or three hardware pixels, which is why a 16px font looks the same size on a phone and a desktop despite vastly different pixel densities. pt is defined as 1/72 inch and equals exactly 1.333px; it belongs to print stylesheets and has no business in screen layout.
Relative units are the ones that matter for accessible design. rem resolves against the root element's font size — 16px in every browser by default — so 1.5rem is 24px unless the user has changed their browser's font setting, in which case it scales with them. em resolves against the current element's font size instead, which makes it useful for properties that should track their own text, such as padding inside a button, and treacherous for nested structures: an em-sized font inside an em-sized font compounds, and three levels of nested list can end up unexpectedly tiny.
Viewport units measure the window: 1vw is 1% of viewport width, 1vh 1% of height. They excel at full-screen sections and fluid headings, and they have two well-known traps. Sizing body text in vw alone means text that becomes unreadably small on narrow screens and ignores the user's font preference entirely — use clamp() to set a floor and ceiling. And 100vh on mobile historically referred to the viewport without the browser's address bar, causing content to be cut off; the newer dvh unit tracks the dynamic viewport and is the correct choice today.
The working rule most teams converge on: rem for font sizes and spacing so everything scales with user preference, em for padding that should follow its own element's text, px for hairlines and borders that should never scale, percentages and viewport units for layout dimensions.