CSS Unit Converter

To convert pixels to rem, divide the pixel value by the root font-size, which browsers set to 16px by default. So 24px is 24 / 16 = 1.5rem, 12px is 0.75rem, and 32px is 2rem. The reason developers move from px to rem is accessibility: rem scales with a visitor's chosen browser font-size, while hard-coded pixels ignore it, so text stays readable for people who zoom or enlarge fonts. If your project uses a different root size, the math changes, so the divisor must match your actual html font-size. This converter does it instantly across every unit at once, lets you set a custom root font-size instead of assuming 16px, and flags the matching Tailwind class (for example 16px maps to text-base) so you can paste straight into a utility-class codebase.

Both are relative font-size units, but they measure against different things. A rem is always relative to the root element's font-size, so 1rem equals the same pixel value everywhere on the page regardless of nesting. An em is relative to the font-size of the current element, which means it compounds: if a parent is 1.2em and a child inside it is also 1.2em, the child renders at roughly 1.44 times the base, and deeper nesting multiplies further. That compounding makes em useful for component-local scaling like padding that tracks its own text, but it can cause surprises in deep trees, where rem stays predictable. This tool lets you set both the root font-size and the parent font-size separately, so you can see exactly how an em value resolves in your specific nesting context versus a rem.

CSS uses a fixed reference standard rather than your monitor's real physical size, so the absolute units are defined relative to each other. By that standard 1 inch equals 96px and 72pt, which makes 1pt roughly 1.333px and 1pc (pica) exactly 16px since 1pc is 12pt. For metric units, 1cm is about 37.8px (96 divided by 2.54) and 1mm is about 3.78px. These conversions are most relevant in print stylesheets, where points and physical units genuinely map to paper, while on screens an inch is a CSS abstraction, not a measured inch. Rather than memorising these factors or doing the arithmetic by hand, paste any value into this converter and it returns the equivalent across px, pt, pc, cm, mm, and in simultaneously with one-click copy.

Both are viewport units equal to 1% of a viewport dimension, but they pick different dimensions. vmin is 1% of the smaller side of the viewport, while vmax is 1% of the larger side. On a portrait phone where width is the smaller side, 10vmin tracks the width and 10vmax tracks the height; rotate to landscape and the two swap, because the orientation changes which side is smaller. This makes vmin useful for elements that must stay fully visible in both orientations, such as a square that should never overflow, and vmax handy when you want something to scale with the dominant dimension. Regular vw and vh, by contrast, are locked to width and height specifically. This converter lets you enter your own viewport width and height, then shows how a value resolves in vw, vh, vmin, and vmax for that exact screen.

The clamp() function takes three values, a minimum, a preferred, and a maximum, written as clamp(min, preferred, max). The browser uses the preferred value but never lets it drop below the minimum or rise above the maximum. For fluid typography, the preferred value combines a rem base with a vw term so the size grows linearly with viewport width between two breakpoints, then locks at the min on small screens and the max on large ones. This avoids text that jumps abruptly at each media-query breakpoint and instead scales continuously. Working out the slope and intercept by hand is fiddly, so this tool's clamp generator does it for you: enter a minimum and maximum size plus the viewport range you want the scaling to happen across, choose rem or px output, and copy the finished clamp() value straight into your stylesheet.