CSS Length Unit Converter
Convert between px, rem, em, pt, in, cm, mm, vw and vh. Essential for responsive design and pixel-perfect CSS.
The absolute units
These have a fixed physical size and do not respond to user settings:
| Unit | Ratio | Notes |
|---|---|---|
px | 1/96 inch | The base unit; technically a CSS pixel, not a device pixel |
pt | 1/72 inch | The typographic point, from print |
pc | 12 pt = 1/6 inch | The pica, used in typography |
in | 96 px | Physical inches |
cm | 96/2.54 px | Physical centimetres |
mm | 96/25.4 px | Physical millimetres |
The relative units
These depend on context, which is what makes them good for accessibility:
| Unit | Relative to | Best for |
|---|---|---|
rem | Root font size (usually 16px) | Almost everything — respects user font settings |
em | Parent font size | Padding and margins that should scale with text |
% | Parent dimension | Fluid layouts |
vw / vh | 1% of viewport width/height | Full-screen sections |
ch | Width of the 0 character | Text inputs sized to their content |
Why rem beats px for font sizes
When a user increases their browser's default font size to read more comfortably, px sizes ignore that preference while rem scales with it. This is an accessibility requirement, not a stylistic choice. The recommended pattern is to set html { font-size: 62.5% } so that 1rem equals 10px in the source, then write all other sizes in rem.
When px is still correct
Use px for borders, hairline separators, and anything that should not scale — including box-shadow offsets. For media queries, use em rather than px so they respond to the user's font size.
Frequently asked questions
Is 1rem always 16px?
No. It equals the root font size, which is 16px by default but changes if the user adjusts their browser font size, or if the page sets html { font-size: 62.5% }.
Should I use rem or em for font sizes?
rem. It scales with the user's root font size preference, which is an accessibility requirement. em is better for padding and margins that should scale with the text.
When is px still correct?
For borders, hairline separators and shadow offsets — anything that should not scale. For media queries, use em so they respond to the user's font size.
How are vw and vh calculated?
1vw is 1% of the viewport width and 1vh is 1% of the viewport height. The converter assumes a 1920x1080 viewport.
Why did my vw conversion look wrong?
The result depends on the actual viewport, not a fixed number. This tool uses 1920x1080 as the reference, so treat vw and vh as approximations.