CSS Unit Converter
Convert between px, rem, em, pt, vw, vh, cm and other CSS units, with your own root font size and viewport size.
You can type the unit too, e.g. 1.5rem or 12pt
Results
24px = 24px
- Pixels (px)input
- Root em (rem)
- Parent em (em)
- Percent (%, of parent font size)
- Points (pt)
- Picas (pc)
- Inches (in)
- Centimeters (cm)
- Millimeters (mm)
- Quarter-millimeters (Q)
- 1% of viewport width (vw)
- 1% of viewport height (vh)
- 1% of the smaller side (vmin)
- 1% of the larger side (vmax)
CSS
font-size: 1.5rem; /* 24px */Common sizes
With a 16px root and 16px parent font size
| px | rem | em | pt | % |
|---|---|---|---|---|
| 10px | 0.625rem | 0.625em | 7.5pt | 62.5% |
| 12px | 0.75rem | 0.75em | 9pt | 75% |
| 14px | 0.875rem | 0.875em | 10.5pt | 87.5% |
| 16px | 1rem | 1em | 12pt | 100% |
| 18px | 1.125rem | 1.125em | 13.5pt | 112.5% |
| 20px | 1.25rem | 1.25em | 15pt | 125% |
| 24px | 1.5rem | 1.5em | 18pt | 150% |
| 28px | 1.75rem | 1.75em | 21pt | 175% |
| 32px | 2rem | 2em | 24pt | 200% |
| 36px | 2.25rem | 2.25em | 27pt | 225% |
| 40px | 2.5rem | 2.5em | 30pt | 250% |
| 48px | 3rem | 3em | 36pt | 300% |
| 56px | 3.5rem | 3.5em | 42pt | 350% |
| 64px | 4rem | 4em | 48pt | 400% |
| 72px | 4.5rem | 4.5em | 54pt | 450% |
| 96px | 6rem | 6em | 72pt | 600% |
How to use
- Enter a value and pick its unit, or type a value with a unit such as 1.5rem or 12pt.
- Set the root font size (usually 16px), the parent font size and the viewport size to match your site; the viewport defaults to this browser window.
- The value appears in every unit instantly; click “Copy” on any of them.
- In the CSS box, enter a property name and choose an output unit to copy a whole declaration.
- The table below lists common pixel sizes in rem, em, pt and percent.
FAQ
What is the difference between rem and em?
rem is always relative to the root (html) font size, which browsers set to 16px by default, so 1.5rem is 24px. em is relative to the parent’s font size (or the element’s own font size for padding and margin) and compounds when nested. Use rem for layout sizes and em for spacing that should scale with the text.
Why use rem instead of px for font sizes?
People can raise the default font size in their browser settings. With rem the whole site scales with it; hard-coded px does not, which hurts readers with low vision.
Is 1cm in CSS really one centimeter?
Not necessarily. CSS defines 1in as 96px and derives cm, mm and pt from that, so the physical size on screen depends on the device’s pixel density and zoom. Physical units are mostly useful in print styles.
What is % relative to?
Here % is relative to the parent font size, as it is for font-size (150% = 1.5em). For width, padding and similar properties % refers to the container’s width instead, which cannot be converted to px on its own.
How are vw, vh, vmin and vmax calculated?
1vw is 1% of the viewport width and 1vh 1% of its height; vmin and vmax use the smaller and larger of the two. Mobile address bars affect vh, so consider the newer dvh and svh units where that matters. All calculations run in your browser.
Related tools
Unit Converter
Convert length, weight, temperature, area, volume and speed to every unit at once, including Taiwan units like ping and catty.Color Converter
Convert colors between HEX, RGB, HSL, HWB, OKLCH and OKLab, with a color picker and WCAG contrast check.Gradient Generator
Design linear, radial or conic CSS gradients with color stops, angle and center, preview them live and copy the CSS, with optional OKLCH interpolation.Contrast Checker
Check the WCAG contrast ratio of text and background colors for AA and AAA, with alpha support and the closest passing color suggestions.