CSS Unit Converter
Convert any CSS unit (px, rem, em, %, vw, ex, ch, pt, pc).
Overview
The CSS Unit Converter translates a value between every common CSS length unit — px, rem, em, %, vw, vh, ex, ch, pt, pc, cm, mm, in — under a configurable base font size and viewport size. Pick a source unit, type the value, and see every equivalent at once.
Useful for designers and developers learning how to convert px to rem with a 16px root or how to convert vw to px for a given viewport. Reach for it auditing a design system, migrating from a px-based stylesheet to a relative-unit one, or just confirming the value of 1.5rem at the default browser font size.
How it works
CSS absolute lengths (px, pt, pc, in, cm, mm) have fixed ratios: 1in = 96px = 72pt = 6pc = 2.54cm. Relative units depend on context: rem resolves against the root element's font size (default 16px); em against the parent's font size; vw/vh against the viewport; ex against the x-height of the current font; ch against the width of the 0 glyph.
The converter does the arithmetic for every unit at once. For typography-related units (ex, ch), the result depends on the active font, so the value is an approximation based on a common UI font.
Examples
- 24px → 1.5rem at a 16px root, 18pt, 6.35mm.
- 1.25rem → 20px at a 16px root, 1.25em in a 16px parent, 1.05vw at 1920px viewport.
- 5vw → 96px at 1920px viewport, 60px at 1200px.
- 1in → 96px, 72pt, 6pc, 2.54cm.
FAQ
rem or em?
rem for predictable scale that follows the root size. em for component-local sizing that scales with the parent's font (useful for nested padding ratios).
Why are ex and ch approximate?
Both depend on the current font's metrics. The converter uses an average; the real value differs slightly per font and per browser version.
Does 1vw equal exactly 1% of viewport?
Yes — 1vw = 1% of viewport width. vh is 1% of viewport height. The values include scrollbars in some browsers, which is why dvw/dvh exist for dynamic equivalents.
When should I use absolute units like cm or in?
Almost never for screen design — they map to a fixed 96 CSS pixels per inch and don't represent the real physical size on most displays. Useful for print stylesheets.