CSS Unit Converter

Two families of units

Every CSS length belongs to one of two families. Absolute units, such as px, pt, cm, mm, and in, describe a fixed physical or device size that does not change with context. Relative units, such as em, rem, percent, vw, vh, ch, and ex, describe a size in terms of something else, usually a font size or the viewport. The whole art of responsive, accessible CSS comes down to choosing the right family for each job, and this converter exists to translate cleanly between them.

The dividing line matters because absolute units freeze a value while relative units let it adapt. A heading set in pixels stays the same size no matter how the user has configured their browser, while the same heading in rem grows when they raise their default text size. One of those behaviors is friendly; the other quietly excludes people.

The pixel and the 16px baseline

The px is the reference point for almost every conversion. Despite the name, a CSS pixel is not always one physical screen dot; on high-density displays the browser maps it to several device dots so that a 16px word stays a comfortable reading size, which is why px counts as absolute even though the hardware varies. Most conversions in this tool hang off one number, the root font size, which defaults to 16px because that is the size browsers apply to the html element out of the box. Change that base in Advanced Settings and every rem and em result recalculates against it.

em versus rem: the cascade difference

This is the distinction that trips up the most developers. A rem is always relative to the root font size, so 1.5rem is the same length anywhere in the document, predictable and flat. An em is relative to the font size of the element it sits on, which means ems compound. If a list item is set to 1.2em and its parent is also 1.2em, the child is 1.2 times 1.2 of the grandparent, and nesting can quietly snowball your text to surprising sizes.

That compounding is occasionally what you want. Padding or margin expressed in em scales with the element's own text, so a button stays proportionally padded as its label grows. But for the global type scale, rem is usually the safer default precisely because it does not compound. This converter lets you set the root font size and the parent font size separately so the rem result and the em result reflect that exact difference.

Viewport units for fluid layouts

The viewport units measure against the size of the window itself. 1vw is one percent of the viewport width and 1vh is one percent of its height, so 50vw is always half the window wide regardless of font settings. They are the backbone of fluid layouts and large display headlines that should scale with the screen rather than with the text size.

Use them with care, though. Sizing body copy purely in vw means the text shrinks to unreadable on a narrow phone and balloons on a wide monitor, and it can ignore the user's zoom on some setups. The modern remedy is the clamp function, which takes a minimum, a preferred fluid value, and a maximum, letting a heading grow with the viewport but never fall below a floor or exceed a ceiling. Convert your floor and ceiling here in rem so they still respect user font settings.

Percent, ch, and ex

Percent is relative, but to what depends on the property. For width it is a percentage of the containing block's width; for font-size it is a percentage of the parent's font size, which makes it behave much like em for type. That context-sensitivity is why this tool asks for a parent font size when you convert percentages of font size. Two more font-relative units are easy to overlook: ch is the width of the digit zero in the current font, perfect for capping a paragraph at a comfortable reading measure of around 60ch, while ex is the height of a lowercase x, useful for vertical adjustments tied to the typeface's proportions.

Absolute print units: pt, in, cm, mm

The physical units are governed by exact ratios in the CSS spec, which is why the conversions here are not approximations. One inch equals 96px, one point is one seventy-second of an inch so it works out to one and one-third pixels, one centimeter is about 37.8px, and one millimeter is a tenth of that. These ratios are fixed regardless of the actual display.

On screen these units are mostly a trap, because a centimeter on the page rarely matches a centimeter on a ruler held to the monitor. Their real home is print stylesheets, where a physical sheet of paper gives them genuine meaning, and pt in particular remains the conventional way designers and word processors describe type sizes. Reach for pt, cm, and mm when you are styling for print, and reach for rem, em, and the viewport units when you are styling for screens.

Accessibility: why px fonts are a problem

When you set font sizes in px, you pin them. A user who increases their browser's default text size, often because they need to, sees no change, because a fixed pixel value ignores that preference entirely. Sizing text in rem instead means it scales with the root font size the user has chosen, which is one of the highest-impact accessibility wins available in CSS and costs you nothing visually for the default reader.

A practical workflow falls out of this: design in pixels because they are intuitive, then convert your type and spacing to rem before shipping so the layout honors user settings. That is the single most common conversion this tool performs, and at the default 16px base the arithmetic is friendly, since 16px is 1rem, 24px is 1.5rem, and 8px is 0.5rem.