CSS Unit Converter
Convert between px, rem, em, pt, vh, vw, cm, mm, in and %
rem
1
em
1
pt
12.0003
vh
1.111111
vw
1.111111
cm
0.423333
mm
4.233331
in
0.166667
%
100
About the CSS Unit Converter
This CSS unit converter moves between px, rem, em, vh, vw and the print units pt, cm, mm and in. Root font size, parent font size and viewport width are all configurable, so the relative units resolve against the values your project actually uses.
A CSS unit converter is needed because relative units only mean something in context. A rem is relative to the root font size, an em to the element's own font size, and vh and vw to the viewport — so 1.5rem is 24px only if the root is 16px.
That context is what the converter asks for. Change the root font size and every rem value shifts, which is exactly what happens on a site that sets html font-size to 62.5% so 1rem equals 10px.
Relative units are worth preferring for anything type-related, because they scale when a reader increases their browser font size while px does not. That is an accessibility difference rather than a stylistic preference — a px-based layout simply ignores the setting.
How to use the CSS Unit Converter
- Set the root font size. Enter the html font size your project uses, usually 16px.
- Enter your value. Type the measurement to convert.
- Choose the units. Pick what you have and what you want.
- Copy the result. Take the converted value into your stylesheet.
CSS Unit Converter features
- Screen units: px, rem, em, vh and vw
- Print units: pt, cm, mm and in
- Configurable root font size for rem
- Configurable parent font size for em
- Configurable viewport width for vh and vw
- Copy any converted value
Frequently asked questions
What is the difference between rem and em?
rem is relative to the root font size, so it is the same everywhere. em is relative to the font size of its own parent, which means it compounds through nesting — the reason a deeply nested element with em padding ends up unexpectedly large.
Why does the root font size matter?
Because every rem value depends on it. The browser default is 16px, so 1rem is 16px — but a project that sets 62.5% to make 1rem equal 10px changes every conversion, which is why it is configurable here.
When should I use px?
For things that should not scale with text: hairline borders, small icons, precise offsets. Use rem for type, spacing and anything that should respect a reader's font size preference — which is an accessibility issue, not a style one.
How do vh and vw behave on mobile?
Less predictably than you would like. 100vh has historically included the area behind mobile browser chrome, so full-height sections get clipped. The newer dvh unit addresses it; a fallback is still worth keeping.
Why are print units here?
Because print stylesheets use them: pt for type and cm, mm or in for margins and page geometry. They resolve against a fixed 96 pixels per inch, so the conversions are exact rather than device-dependent.