CSS Units Converter
Convert between px, rem, em, vw, vh, vmin, vmax, pt, pc, cm, mm and in instantly. Set your custom base font size and viewport dimensions. See all unit conversions at once from a single input — with the rem vs em distinction explained.
CSS Units Converter Tool
rem vs em distinction, viewport reference input, all units at once — features most CSS unit converters miss
Most CSS unit converters convert from one unit to one other unit. This tool shows all 12 unit conversions simultaneously from a single input, correctly models the rem vs em distinction, accepts a custom parent font size for accurate em calculations, and lets you set the exact viewport dimensions for vw/vh accuracy.
How to convert CSS units
How this compares to other CSS unit converters
| Feature | LazyTools | nekocalc.com | unitconverters.net | BigDevSoon |
|---|---|---|---|---|
| All units simultaneously | Yes — 12 units | One at a time | One at a time | Yes |
| rem vs em distinction | Yes — separate fields | No | No | No |
| Custom viewport dimensions | Yes — W and H | No | No | Yes |
| Physical units (pt, cm, mm, in) | Yes | Yes | Yes | No |
| vmin / vmax | Yes | No | No | No |
| Conversion history | Yes | No | No | No |
| When-to-use guidance | Yes — per card | No | No | Partial |
CSS unit conversion formulas
| Unit | Equals (default 16px base) | Relative to | Best used for |
|---|---|---|---|
| 1rem | 16px | Root font size (:root / html) | Font sizes, spacing — respects user browser preference |
| 1em | 16px* | Parent element font size | Component-scoped sizing; compounds in nested elements |
| 1vw | 14.4px (1440px vp) | Viewport width | Fluid typography, hero widths, responsive spacing |
| 1vh | 9px (900px vp) | Viewport height | Full-screen sections, sticky headers, hero heights |
| 1vmin | min(vw,vh) | Smaller of vw/vh | Responsive elements that fit any orientation |
| 1vmax | max(vw,vh) | Larger of vw/vh | Overlay, full coverage regardless of orientation |
| 1pt | 1.333px | 1/72 inch (fixed) | Print stylesheets, email HTML |
| 1pc | 16px | 12 points (fixed) | Print typesetting; rarely used on screen |
| 1cm | 37.795px | Physical centimetre | Print layouts; fixed on screen |
| 1mm | 3.78px | Physical millimetre | Fine print detail, technical drawings |
| 1in | 96px | Physical inch (CSS def.) | Print; note: may not equal physical inch on screen |
*em with the same parent font size as root. When nested, em compounds: 1.2em inside a 1.2em element = 1.44x root size.
CSS Units — A Complete Guide to px, rem, em, vw and More
CSS offers two fundamental categories of length units: absolute and relative. Absolute units like px, pt, cm and in have fixed physical meaning. Relative units like rem, em, vw, vh and % derive their value from context — from the root font size, the parent element, the viewport dimensions, or the containing block. Choosing the right unit is one of the most impactful decisions in responsive CSS architecture, affecting accessibility, maintainability and how your design adapts across screen sizes and user preferences.
px to rem converter with custom base font size
The px-to-rem conversion is the most common CSS unit calculation in modern web development. The formula is simple: rem = px ÷ root font size. With the default browser root font size of 16px, 24px becomes 1.5rem. The reason to use rem instead of px for font sizes is accessibility: when a user changes their browser's default font size preference, rem units scale accordingly. px values do not. A design token system built in rem automatically respects user preferences site-wide.
CSS unit converter px rem em vw free
The em unit is fundamentally different from rem: it is relative to the current element's font size, which in practice usually means the parent element's font size. em = px ÷ parent font size. Where em becomes tricky is nesting: if you set a parent to 1.2em and a child also to 1.2em, the child's computed size is 1.44 times the root — because 1.2em × 1.2em = 1.44. This compounding is why rem is generally preferred for font sizes (predictable) while em is useful for component-scoped spacing where children should scale relative to their own component's font size.
How to convert px to rem in CSS
To convert px to rem manually: divide the px value by the root font size. 32px ÷ 16px = 2rem. To convert rem to px: multiply the rem value by the root font size. 2rem × 16px = 32px. If your project uses a different root font size (for example, some projects set html { font-size: 62.5% } to make 1rem = 10px for easier mental arithmetic), enter that base in the Root font size field above and all conversions recalculate automatically.
CSS viewport unit calculator
Viewport units are relative to the browser window dimensions. 1vw = 1% of the viewport width. 1vh = 1% of the viewport height. On a 1440px-wide screen, 1vw = 14.4px. On a 375px mobile screen, 1vw = 3.75px. This is what makes viewport units powerful for fluid typography — text sized in vw scales continuously with the window width. vmin is the smaller of vw and vh, vmax is the larger — useful for sizing elements that should adapt to both portrait and landscape orientations.
em vs rem difference calculator
The clearest way to understand the rem vs em difference is through a concrete example. Suppose your root font size is 16px, and you have a card component with font-size: 1.2em (= 19.2px with a 16px parent). If you add a caption inside the card with font-size: 0.8em, that caption is 0.8 × 19.2px = 15.36px — not 0.8 × 16px. If you had used rem instead, 0.8rem would always be 12.8px regardless of the card's font size. This is why em is appropriate for buttons (padding in em scales with the button's own font size) but rem is more predictable for a site-wide type scale.
Responsive CSS unit converter
Building a responsive type scale often requires converting a set of design token values from px to rem. For a type scale with steps at 12, 14, 16, 18, 20, 24, 30, 36, 48px, the rem equivalents at 16px base are 0.75, 0.875, 1, 1.125, 1.25, 1.5, 1.875, 2.25, 3rem. Rather than calculating each manually, paste each value in turn and click the rem card. The history row saves previous conversions so you can quickly reference the full scale as you work.