~/frontend-tools/css-unit-converter
CSS Unit Converter
Convert a length between every common CSS unit at once. Set the context that relative units depend on, the root font size, parent font size, parent width and viewport size, and see the value in px, rem, em, %, physical units and viewport units side by side.
Context for relative units
Using the CSS Unit Converter
Absolute units
In CSS, absolute units are fixed ratios of the pixel: 1in is 96px, 1cm is about 37.8px, 1pt is 1/72 of an inch and 1pc is 12pt. On screens they do not match real-world sizes exactly, so use them mainly for print stylesheets.
Relative units
rem is relative to the root font size, em to the parent element's font size, and % depends on the property: for widths it is the parent's width, for font size the parent's font size. That is why the converter asks for this context.
Viewport units
1vw is 1% of the viewport width and 1vh is 1% of the viewport height; vmin and vmax use the smaller or larger of the two. On mobile, the dynamic units dvh and svh account for browser toolbars that appear and disappear.
Picking a unit
Use rem for type and spacing so text scales with user settings, % or fr for fluid layout widths, viewport units sparingly for full-screen sections, and px for thin borders and fine details.
Frequently asked questions
Why does % show a different number for font size?
Percent for a width is based on the parent width; the converter assumes a length such as width or margin. For font size, % behaves like em.
Is 1pt the same as 1px?
No. 1pt is 1.333px in CSS.
Are the results rounded?
To four decimal places, which is far finer than a screen can show.