CSS Unit Converter

CSS has more than a dozen length units, and each one answers a different question. Some are fixed against each other like inches and points, some depend on the font and some on the size of the browser window. Converting between them is simple when you know what the context is, and a common source of mistakes when you do not. This converter fixes the context in four boxes and shows your value in every unit at once.

Absolute units

The absolute family is tied together by definition. One inch is 96 pixels, 72 points, 6 picas, 2.54 centimetres, 25.4 millimetres and 101.6 quarter-millimetres. A CSS pixel is therefore 1/96 inch, but it is a reference unit: browsers scale it for high-density screens and zoom, so one CSS pixel is rarely one device pixel. Points and picas come from print, and Q, the quarter-millimetre, is rare but valid. The conversion between these units never changes.

Relative units

rem is the root element’s font size, usually 16 pixels. em is the font size of the current element, which for font-size itself means the parent’s. % on a font-size is a share of the parent size. The viewport units depend on the window: vw and vh are one percent of its width and height, vmin and vmax one percent of the smaller or larger side. A value in these units is the same length as a value in pixels only for the settings you chose, so the converter asks for them.

A worked example

Press Sample: 1.5 rem with a root size of 16, a parent size of 16 and a 1440 by 900 viewport. The table shows 24px, 1.5rem, 1.5em, 18pt, 1.5pc, 0.25in, 0.635cm, 6.35mm, 25.4Q, 1.6667vw, 2.6667vh, 2.6667vmin, 1.6667vmax and 150%. Read the viewport figures this way: 24 pixels is 24 ÷ 1440 × 100 = 1.6667% of the width and 24 ÷ 900 × 100 = 2.6667% of the height. The smaller side is the height, so vmin equals vh, and the larger side is the width, so vmax equals vw.

Other conversions

Enter 100 and choose vw and the table says 1440px for this viewport. Twelve points are 16 pixels, the usual body size. Ten millimetres is about 37.8 pixels. Change the root size to 10, a habit from the days of the 62.5% trick, and 1.5rem becomes 15px instead of 24px. Change the parent size and the em and % rows move while rem does not.

Choosing units in practice

Use rem for font sizes and most spacing so that readers who raise the browser’s text size get larger layouts. Use em for components that must scale with their own text. Use px for hairlines such as 1 pixel borders. Use viewport units for sections that should fill the screen, and combine them with min() and clamp() to avoid extremes. Avoid cm, mm and in for screen layouts; they are meant for print stylesheets.

Edge cases

Mobile browsers have a dynamic viewport that changes as the address bar slides away, so vh can be larger than the visible area; newer dvh and svh units address this and are not in the table. Percentages mean different things on different properties: of the parent width for width, of the parent height for height, of the font size for font-size. The converter’s percentage row is the font-size case only.

Limits

The converter handles lengths, not angles, times or resolutions. It does not read your page, so the context numbers are yours to supply. Very small viewports and root sizes are limited to sensible ranges. Everything is calculated in your browser.

Related tools

• PX to REM is the quick converter for the most common pair.
• CSS Clamp Calculator combines rem and vw into fluid sizes.
• Online Screen Ruler measures real centimetres on your own screen.
• Type Scale Calculator generates a set of rem sizes.