About the CSS Unit Converter
CSS supports several length units — px, rem, em, pt, vw, vh, and percentages — each relative to a different baseline (the root font size, the viewport, or a parent element), which makes converting between them by hand error-prone.
This tool converts a pixel value into rem, em, pt, vw, vh, and percentage simultaneously, using a configurable base font size and viewport dimensions so the results match your actual project setup.
How it works
- Enter a pixel value for the size you're working with.
- Adjust the base font size (defaults to the common 16px browser default) and viewport width/height to match your project.
- Read off the equivalent value in rem, em, pt, vw, vh, and percent instantly.
Common use cases
- Converting a design spec to rem: Turning a Figma spec's 24px heading size into rem (1.5rem at a 16px base) for a codebase that uses rem-based typography.
- Responsive sizing with viewport units: Checking what percentage of the viewport width a fixed-width element (like a 320px sidebar) represents at a specific screen size.
- Print stylesheets: Converting on-screen pixel measurements to points (pt) when preparing a print-specific stylesheet.
Frequently asked questions
What's the difference between rem and em in this tool?
Both are calculated the same way here (relative to the base font size you set), since em technically depends on the parent element's font size rather than the root. For elements without a resized parent, rem and em values are usually equivalent — but remember em can compound in deeply nested elements with their own font-size changes, while rem always references the root.
Why does changing viewport width affect the rem value?
It doesn't — vw and vh are the only values affected by the viewport dimensions you enter; rem, em, pt, and percent depend only on the base font size, not the viewport.
What base font size should I use?
16px is the default browser font size and a safe default for most projects, but if your CSS explicitly sets a different root font size (e.g. 62.5% tricks or a custom `font-size` on `html`), enter that actual value for accurate rem/em conversions.
How is the percent value calculated?
It's the pixel value as a percentage of the base font size you entered — useful for contexts like `line-height` or `font-size` percentages that are relative to a parent's font size.
This tool runs entirely in your browser — nothing you enter is sent to a server. Read more in the Privacy Policy, or browse the full list of tools.