CSS Unit Converter

This CSS unit converter turns one CSS length unit into all the others — instantly and in both directions. Type a value in px, em, rem, pt, %, vh, or vw and every other row recalculates the moment you finish typing. Change the base font-size or the viewport dimensions and the whole grid updates with you. Each row has its own copy-to-clipboard button so a converted value drops straight into your stylesheet, already suffixed with the right unit. The tool runs entirely in your browser — no signup, no logging, no server round-trip.

px to em / rem cheat sheet (base 16)

Default browser root font-size is 16px, so on most projects 1rem = 1em = 16px. The table below covers the conversions designers reach for most often. For any value not in the table, type it into the CSS unit converter above and copy the result.

How to convert px to em or rem

To convert px to em or px to rem, divide the pixel value by the base font-size. With the default 16px base, the math is:

• 24px ÷ 16 = 1.5rem
• 18px ÷ 16 = 1.125rem
• 14px ÷ 16 = 0.875rem

If your project sets a different root size — a common pattern is html { font-size: 62.5% }, which makes 1rem = 10px — change the Base font-size field at the top of the CSS unit converter from 16 to 10. Every row recalculates against the new base, so 2rem now equals 20px and 1.6rem equals 16px.

How to convert rem to px (or em to px)

To convert rem to px (or em to px), multiply the value by the base font-size. With a 16px base:

• 1.5rem × 16 = 24px
• 2rem × 16 = 32px
• 0.75em × 16 = 12px

This is the reverse of the px-to-rem direction, and the CSS unit converter above does both at once: type 1.5 into the rem row and the px row immediately shows 24, while the % row shows 150 and the pt row shows 18.

px to pt and back

CSS defines the point as a fixed ratio: 1pt = 1/72 inch and 1in = 96px. That gives 1pt = 96/72 ≈ 1.333px, and the conversion does not depend on the actual screen DPI — it is a CSS specification constant, not a physical measurement. So:

• 12pt × 1.333 = 16px
• 10pt × 1.333 ≈ 13.33px
• 18px × 0.75 = 13.5pt

Use this CSS unit converter whenever you are translating a print specification (which is usually in points) into screen CSS, or exporting a PDF stylesheet from a web design.

px to vh and vw

vh is 1% of the viewport height; vw is 1% of the viewport width. To convert px to vh or vw, divide the pixel value by 1% of the target viewport. At 1920 × 1080:

• 24px ÷ 19.2 = 1.25vw
• 24px ÷ 10.8 ≈ 2.22vh
• 1080px ÷ 10.8 = 100vh (a full-height section)

Because viewport units depend entirely on the screen you measure against, the CSS unit converter lets you set both viewport dimensions explicitly. Drop the width to 1440, 1366, or 390 to match a laptop, an older laptop, or an iPhone 14 — and the vh and vw rows recompute on the fly. Tokens that look right at 1920 may need a different conversion at 390.

The seven CSS length units, explained

px — pixels (absolute)

The pixel is the baseline unit of CSS. Despite the name, a CSS pixel is not necessarily a physical hardware pixel — it is an anchor that scales with the display’s devicePixelRatio. Every other unit in this CSS unit converter ultimately resolves to pixels at render time.

em — relative to the current element’s font-size

One em equals the font-size of the element the property is applied to. If a button has font-size: 14px, then padding: 1em on that button means 14px of padding. em compounds when nested: a child element that inherits 1.2em from a parent that is also 1.2em ends up at 1.44em relative to the root.

rem — relative to the root font-size

One rem is the font-size of the html root element, regardless of any nested font-size declarations. rem is the default modern unit for type scales because it stays predictable: 1.5rem always means “1.5 times the root size” no matter how deep the element is nested. Most accessibility guides recommend rem over px for font-size because it scales correctly when a user changes their browser’s default text size.

pt — points

Points are a print-typography unit pinned to 1pt = 1/72 inch and 1in = 96px by the CSS spec. Points show up in PDF exports, in legacy CMS settings, and when you are converting print specs into screen CSS.

% — percentages

Percent always means “percent of something,” and what that something is depends on the property — width: 50% resolves against the parent’s content width, while font-size: 80% resolves against the parent’s font-size. This CSS unit converter treats % as a font-size percentage relative to the base, which is the common case for typography work. 100% always equals 1em in that interpretation.

vh and vw — viewport-relative

One vh is 1% of the viewport height; one vw is 1% of the viewport width. Both update if the user resizes the window. Viewport units are how hero sections fill the screen, how responsive type scales smoothly from phone to desktop, and how layout grids stay proportional across breakpoints.

The math behind every conversion

Every value typed into the CSS unit converter is normalised to pixels using the formulas below, then re-expressed in each target unit. The same table works in both directions:

When to pick which unit

• Font-size — prefer rem for the type scale, so values stay aligned with the root and scale when a user adjusts their browser’s default. Use em only when you specifically want a child to inherit its parent’s size.
• Padding and margin — rem for global spacing tokens, em for spacing that should scale with the element’s own font-size (a button’s internal padding, for instance).
• Borders, shadows, fine details — px, because hairline elements need exact pixel control and should not scale with typography.
• Full-screen sections and hero heights — vh on most projects, or dvh on modern projects that need to respond to mobile URL-bar collapse. vw works for full-bleed widths.
• Fluid type that scales with the screen — vw blended with rem inside clamp(). Use this CSS unit converter to translate your design-tool pixel values into a vw equivalent at your target viewport.
• Print stylesheets — pt and in map cleanly to physical output. The 1.333 px-to-pt ratio in this CSS unit converter is the one CSS itself enforces.

px to em vs px to rem — which should you use?

The short answer: prefer px to rem for font-size and global spacing tokens, and px to em only for properties that should scale with the element’s own font-size. rem resolves against the root and never compounds — 1.5rem means the same thing whether it is applied to a top-level heading or to a deeply nested label. em compounds: nesting two 1.2em elements gives you 1.44em at the inner level, which is exactly the right behaviour for things like a button’s internal padding (which should grow when the button text grows), and exactly the wrong behaviour for body copy.

Once you type a pixel value into the CSS unit converter, both em and rem rows show the same number — 1.5 for 24px on a 16-base — so the math is identical. The decision is purely about which behaviour you want at render time.

Privacy and how this CSS unit converter works

Every conversion in this CSS unit converter runs entirely inside your browser using plain JavaScript. No values are sent to a server, logged anywhere, or saved between sessions. There are no cookies tied to the tool, no analytics on individual conversions, and no signup of any kind. Refresh the page and the inputs reset to defaults — that is the only state the tool carries. The CSS unit converter also works offline: load the page once, disconnect, and the JavaScript continues to work because all the math is local.