CSS Unit Converter
Enter a value and unit on the top row, and every CSS unit — px, rem, em, %, vw, and the rest — updates below instantly, along with a size preview.
Input
Enter a value and every unit converts automatically.
Result
Every value is converted through px first. rem is based on the root font size, em and % are based on the element font size, vw/vh/vmin/vmax are based on the viewport, and pt/pc/in/cm/mm use the 96px = 1in standard.
ready to use.
- Visible firstKeep the input and result positions clear.
- Results firstPut the main number up front and keep the process secondary.
- Less to askNo sign-up or extra information before using the tool.
CSS units: staying sane between px, rem, and em
A CSS unit converter answers one practical question: "what does this length look like in every other unit?" Enter a value and unit on the top row, and every CSS length unit — px, rem, em, %, vw, and the rest — recalculates at once, alongside a true pixel-length ruler and a font-size preview.
The relationships between units depend on two separate font-size inputs — the root font size and the element (parent) font size — plus the viewport dimensions. This tool converts your input to px first, then derives every other unit from that. rem always tracks the root font size; em and % always track the element font size, so changing either one recalculates the results that depend on it.
Why CSS has so many length units
CSS length units split into two families: absolute and relative. Absolute units (px, pt, cm, and friends) are fixed. Relative units (rem, em, %, vw, and friends) are calculated against something else. Responsive design leans on relative units so layouts adapt to the viewport and the user's own font-size preferences.
- Absolute: px, pt, pc, in, cm, mm
- Relative to a font size: rem, em, %
- Relative to the viewport: vw, vh, vmin, vmax
How this tool actually converts a value
Your input is converted to px first, then that px value is divided back out into every other unit. rem is driven by the root font size field, while em and % are driven by the separate element font size field. That's why entering a value in any single unit fills in the rest instantly — there's no calculate button, results update as you type.
- px = value × (px per unit)
- rem is driven by the root font size
- em and % are driven by the element font size
- vw / vh are driven by the viewport dimensions
px vs rem vs em, and why it matters for accessibility
px is a fixed pixel value. rem is always a multiple of the root (html) font size. em is a multiple of the current element's font size — in this tool, that's the element font size field, not the root field, so rem and em only match when both fields happen to be equal. If a user bumps up their browser's default font size, rem and em scale with it while px doesn't — that's why rem is the usual recommendation for font sizes, and em is common for spacing that should scale with the element it sits in.
- px: always the same size, ignores user settings
- rem: root font size × value (at a 16px root, 1rem = 16px)
- em: element font size × value (an element font size of 20px makes 1em = 20px)
What is % actually relative to?
It depends entirely on the property. font-size percentages are relative to the parent's font size, width percentages are relative to the parent's width, line-height percentages are relative to the element's own font size. This tool models the font-size case, so % is calculated against the element font size field — the same base as em — meaning 100% equals the element font size.
vw, vh, vmin, vmax — viewport units
Viewport units are relative to the browser window's dimensions. 1vw is 1% of the viewport width, 1vh is 1% of the viewport height, vmin tracks whichever of width/height is smaller, vmax tracks whichever is larger. Change the viewport width or height in this tool and the vw/vh/vmin/vmax results update accordingly.
- 1vw = viewport width ÷ 100
- 1vh = viewport height ÷ 100
- vmin/vmax = shorter/longer side ÷ 100
pt, pc, in, cm, mm — physical units on screen
CSS maps physical units to pixels using the 96px = 1in rule, even on screen. That gives you 1in = 96px, 1cm ≈ 37.8px, 1mm ≈ 3.78px, 1pt = 1/72in ≈ 1.333px, and 1pc = 12pt = 16px. These show up mostly in print stylesheets, but browsers apply the same ratio on screen.
- 1in = 96px
- 1pt = 96/72 ≈ 1.333px
- 1pc = 16px, 1cm ≈ 37.8px, 1mm ≈ 3.78px
A worked example: root vs element font size
Most browsers default the root font size to 16px. Converting 24px to rem then gives 24 ÷ 16 = 1.5rem — and that only depends on the root field. em is different: with an element font size of 16px, 24px is also 1.5em, but if you set the element font size to 20px, that same 24px becomes 24 ÷ 20 = 1.2em while the rem stays 1.5rem. rem and em only agree when the root and element fields hold the same value.
Which unit to reach for in responsive design
There's no single right answer, but some patterns hold up well: use rem for font sizes so they respect user preferences, em for spacing that should scale alongside a specific element, % or viewport units for element widths, and clamp() combined with vw for large fluid headings. Media query breakpoints are commonly written in em.
- Font size: rem (accessibility)
- Component-relative spacing: em
- Layout width: % or vw
- Fluid sizing: clamp() + vw
Common mistakes and limits to watch for
Mixing up the root and element font size fields is the most common mistake with this new two-base model — rem never moves with the element field, and em/% never move with the root field. The browser's default font size isn't guaranteed to be 16px — users can change it. Physical units are only an approximation of real-world size since they don't account for actual screen DPI. Results here are rounded for readability, so when a value doesn't land on a clean pixel, it's usually safer to keep the rem/em decimal rather than a rounded px figure.
- rem tracks the root field only; em/% track the element field only
- Users can override the browser's default font size
- Physical units are only approximate on screen
- Displayed results are rounded for readability
Copying a value straight into your CSS
Hover or focus any result card and a copy button appears. Clicking it copies the full value with its unit — something like "1.5rem" — ready to paste directly into a stylesheet. Set your root font size, element font size, and viewport first, and every conversion after that is calculated against those values.
- Copying a card grabs value + unit together
- Set root font size, element font size, and viewport first
- Use the sample button to try a 24px example
CSS unit conversion FAQ
How do I convert px to rem?
Divide the px value by the root font size. With a 16px root, 24px ÷ 16 = 1.5rem. Enter a px value in this tool and it automatically calculates rem along with every other unit, recalculating instantly if you change the root font size field.
What's the difference between rem and em?
rem is always relative to the root (html) font size. em is relative to the current element's font size — in this tool, that's the separate element font size field. rem and em only produce the same result when the root and element fields hold the same value; otherwise they diverge, and em still compounds when elements nest in real CSS.
Why is the root font size usually 16?
Because most browsers default their root font size to 16px, making 1rem = 16px the common baseline. That default can change if a user adjusts their browser settings or a stylesheet sets a different html font size — you can try that here by editing the root font size field directly.
What is % calculated against in this tool?
In CSS, what % is relative to depends on the property — parent font size, parent width, and so on. This tool models the font-size case, so % is calculated against the element font size field, the same base as em, meaning 100% equals the element font size. If you're working with width percentages or another context, you'll need to interpret that % differently.
How are vw and vh calculated?
1vw is 1% of the viewport (browser window) width, and 1vh is 1% of the viewport height. Change the viewport width or height in this tool and the vw, vh, vmin, and vmax results recalculate to match. The default viewport is 1920×1080.
The decimals are long — is it okay to round them?
Usually, yes. This tool rounds values for readability too. That said, if you keep rem or em as a decimal, the browser calculates it exactly, so when a value doesn't land on a clean pixel, using the rem or em decimal directly can be more accurate than a rounded px figure.
Checked as of 2026-07-17. Conversions follow the W3C CSS Values and MDN documentation's 96px = 1in standard.