CSS Unit Converter
Convert any CSS length between px, rem, em, %, pt, pc, in, cm, mm and Q at once. Set your own root and element font-size for accurate rem, em and percentage results. Everything runs in your browser; nothing is uploaded.
| Unit | Value | Copy |
|---|---|---|
px Pixels | 16px | |
rem Root em | 1rem | |
em Em | 1em | |
% Percent | 100% | |
pt Points | 12pt | |
pc Picas | 1pc | |
in Inches | 0.166667in | |
cm Centimeters | 0.423333cm | |
mm Millimeters | 4.233333mm | |
Q Quarter-mm | 16.933333Q |
How the converter works
Type a value and pick the unit you are converting from. The tool converts it to every
other CSS length unit at once and shows each result in the table, ready to copy. Because
rem, em and % are relative to a font-size rather than a
fixed physical length, two settings control them: the root font-size (used for
rem) and the element font-size (used for em and
%). Both default to the browser standard of 16px, so out of the box
16px = 1rem = 1em = 100% = 12pt = 1pc. Change either box to match your own CSS and
every affected result updates instantly.
px to rem, em, pt and % — common values
Computed at the default 16px root/element font-size:
| px | rem | em | pt | % |
|---|---|---|---|---|
8px | 0.5rem | 0.5em | 6pt | 50% |
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% |
40px | 2.5rem | 2.5em | 30pt | 250% |
48px | 3rem | 3em | 36pt | 300% |
64px | 4rem | 4em | 48pt | 400% |
The CSS length units explained
| Unit | Type | Definition |
|---|---|---|
px | Absolute (reference pixel) | The baseline CSS unit. 1px = 1/96 of an inch on a standard 96-DPI display and does not scale with font-size. |
rem | Font-relative | "Root em" — relative to the root (<html>) font-size. 1rem = the root font-size, 16px by default. The go-to unit for scalable, accessible sizing. |
em | Font-relative | Relative to the current element’s own font-size. 1em = that element’s font-size, so nested em values compound. |
% | Relative | For font-size, a percentage of the parent element’s font-size. 100% equals the parent font-size (16px by default). |
pt | Absolute (print) | Point, from print typography. 1pt = 1/72 inch = 4/3 px, so 12pt = 16px. Best reserved for print stylesheets. |
pc | Absolute (print) | Pica. 1pc = 12pt = 16px. |
in | Absolute (physical) | Inch. 1in = 96px = 2.54cm. Physical units are mainly for print. |
cm | Absolute (physical) | Centimeter. 1cm = 96/2.54 ≈ 37.8px. |
mm | Absolute (physical) | Millimeter. 1mm = 1/10 cm ≈ 3.78px. |
Q | Absolute (physical) | Quarter-millimeter. 1Q = 1/40 cm ≈ 0.945px. Rarely used outside fine print metrics. |
The quick way: px ↔ rem
With the default 16px root font-size, rem = px ÷ 16 and
px = rem × 16. So 24px is 1.5rem, 32px is 2rem, and 0.5rem is 8px. A popular
shortcut is to set html { font-size: 62.5% }, which makes the root 10px — then
rem = px ÷ 10 and the numbers become trivially readable (18px = 1.8rem). Enter 10 in
the “Root font-size” box above to work in that scale.
Which unit should I use?
- rem — the default choice for font-size, spacing and layout. It scales with the user’s browser font-size setting, which is important for accessibility, while staying predictable page-wide.
- em — when you want a value to scale with its local element, e.g. padding that grows with a component’s own font-size. Watch for compounding when nested.
- px — for hairline borders, fixed icon sizes and anywhere you need an exact, non-scaling length.
- % — for fluid widths and font-sizes that track a parent.
- pt / pc / in / cm / mm / Q — reserve for
@media printstylesheets, where a real physical output size exists.
Privacy
This converter is pure client-side arithmetic — the values you enter never leave your device, nothing is logged and there are no network requests. It keeps working offline once loaded.
Frequently asked questions
- How do I convert px to rem?
- Divide the pixel value by the root font-size. With the browser default root font-size of 16px, rem = px ÷ 16 — so 24px = 1.5rem, 32px = 2rem and 12px = 0.75rem. If your CSS sets a different root font-size on the <html> element (a common trick is 62.5%, which makes the root 10px so 1rem = 10px and the maths becomes "px ÷ 10"), enter that value in the "Root font-size" box and the tool recomputes every rem for you.
- What is the difference between em and rem?
- Both are font-relative, but they measure against different things. rem is always relative to the root (<html>) font-size, so 1rem is the same length everywhere on the page. em is relative to the current element’s own font-size, so 1em changes depending on where it is used and nested em values compound (an element at 1.2em inside a parent at 1.2em renders at 1.44 × the grandparent size). Use rem when you want predictable, page-wide sizing and em when you want a value to scale with its local context. This tool lets you set the root font-size (for rem) and the element font-size (for em and %) separately.
- Why do em and % ask for a separate font-size?
- Because they are relative to the element, not the root. 1em and 100% both equal the font-size of the element the value is applied to (or its parent, for an inherited property), which is not necessarily the root font-size. If you leave the "Element font-size" at 16px you get the default behaviour; change it to match the element you are styling — say 20px — and 1.5em correctly shows as 30px and 50% as 10px.
- How many pixels is 12pt?
- Exactly 16px. A point (pt) is defined as 1/72 of an inch and CSS defines 1 inch as 96px, so 1pt = 96/72 = 4/3 px ≈ 1.333px, and 12pt = 16px. That is why 12pt, 16px, 1rem, 1pc and 100% all describe the same default text size. Points come from print typography and are best kept to print stylesheets; use px or rem for screens.
- Are the physical units (in, cm, mm) accurate on screen?
- CSS treats them as fixed ratios of the reference pixel — 1in = 96px, 1cm ≈ 37.8px, 1mm ≈ 3.78px — regardless of the physical size or resolution of the actual display. So "1cm" in CSS is only truly one centimetre on a nominal 96-DPI screen; on a phone or a 4K monitor it will not measure a real centimetre with a ruler. That is why physical units are recommended only for print stylesheets, where the output medium has a real physical size.
- Is anything uploaded or saved?
- No. The whole converter runs in your browser with plain JavaScript and simple arithmetic — there is no network request, nothing is uploaded and nothing is stored. You can use it offline once the page has loaded.