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
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. For the absolute units in this tool, CSS defines fixed conversion ratios such as 1in = 96px. Relative units (rem, em, %, vw, and friends) are calculated against a relevant base. Responsive design leans on relative units so layouts can adapt to the viewport and font-size choices.
- CSS absolute-length conversions: 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 the CSS pixel unit. rem is always a multiple of the root (html) font size. em is a multiple of the element font size — in this tool, that is the Element font size (em/% base) field, not the Root font size (rem base) field, so rem and em only match when both fields happen to be equal. rem is commonly used for font sizes, while em is useful when spacing should scale with the element it belongs to.
- px: CSS pixel unit
- 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 two-base model — rem never moves with the element field, and em/% never move with the root field. The browser's root font size is not guaranteed to be 16px; users or stylesheets can change it. Physical-unit results use CSS's defined 96px = 1in conversion, so they are not a promise of ruler-accurate size on every display. Results here are rounded for readability, so when a value does not land on a clean pixel, it is 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 or stylesheets can change the root font size
- CSS physical units are conversion ratios, not guaranteed display measurements
- 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.
Conversions follow the CSS 96px = 1in definition described by W3C CSS Values and MDN.