Convert px, rem, em, vw and vh without the mental arithmetic
This tool converts between CSS length units, pixels, rem, em, viewport width and viewport height, so you're not doing the arithmetic by hand while you build a typographic scale or a responsive layout. Set a base font size, type a value in any unit, and see it recalculated in the others. It's a quick reference for the maths, not a substitute for checking how the result actually renders in the browser.
Converting between px, rem, em, vw and vh without the guesswork
The CSS Unit Converter takes a pixel, rem, em, vw or vh value and works out its equivalent in the other four, based on a root font size and viewport size you set yourself. It's for anyone translating a design file's fixed measurements into the relative units a responsive layout needs, whether that's a static comp handed over by a designer or an old stylesheet full of hard-coded pixels. The output is only as good as the context you feed it, so treat each conversion as a working figure to check against the browser rather than a fixed answer.
-
Enter a value and choose its unit
Type in a measurement such as 16px or 1.5rem and tell the tool which unit it's currently written in.
-
Set the root font size and viewport
Adjust the root font size and the viewport width and height so the em, rem, vw and vh figures reflect the project you're actually building, since none of these units mean anything on their own.
-
Read the results and apply them with judgement
Check the converted figures across all five units, keeping in mind that inherited font sizes and browser zoom can shift what actually renders on screen.
CSS Unit Converter
Enter a value and its unit, then set your base font size and viewport dimensions below. The tool converts that value into px, rem, em, vw and vh instantly, client side only.
| Unit | Value |
|---|---|
| px |
—
|
| rem |
—
|
| em |
—
|
| vw |
—
|
| vh |
—
|
rem is calculated against root font size. em is calculated against parent font size. vw and vh are calculated against the viewport width and height you enter above, not your actual browser window.
Switch between px, rem, em, vw and vh in seconds
This converter turns a pixel value into rem, em, vw or vh and back again, based on the base font size you set. It's built for anyone translating a design file into a stylesheet, or checking an existing one for consistency across breakpoints. Like any calculator, it can only work with the number you give it, so it's worth checking the result against your actual CSS before you commit to it.
No sign-up, no tracking, works on any device.
Popular Tools
CSS Variable Architect
An interactive CSS Variable Architect, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Variable Architect
True-Contrast Smart Palette
An interactive True-Contrast Smart Palette, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / True-Contrast Smart Palette
CSS Unit Converter (px / rem / em / vw / vh)
An interactive CSS Unit Converter (px / rem / em / vw / vh), free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / CSS Unit Converter (px / rem / em / vw / vh)
Aspect Ratio Calculator
An interactive Aspect Ratio Calculator, free to run in the browser. The companion guide sets out the method behind it, so you can check the working.
Tools / Aspect Ratio Calculator