CSS Unit Converter
Convert pixels, rem, em, points, picas, millimeters, centimeters and inches for web and print.
CSS defines one inch as exactly 96 px, so 1 pt is 1.333 px, 1 mm is 3.7795 px and 1 pc is 16 px. A rem is the root font size, 16 px by default, so 1 rem is 16 px unless the root has been changed.
By Piero Nanni · Last checked
CSS Unit Converter
Sets what 1rem means. The browser default is 16.
Sets what 1em means on the element you are styling.
px
—
pt
—
pc
—
in
—
cm
—
mm
—
Q
—
rem
—
em
—
CSS absolute units are all anchored to one definition: an inch is 96 pixels. Everything else follows arithmetically, because a point is a seventy-second of an inch and a millimeter is a twenty-fifth-point-four of one. These are reference pixels rather than device pixels, so a high-density screen draws each CSS pixel with several physical ones and the sizes stay visually consistent.
The relative units are the ones that need care. A rem is the root element font size, which defaults to 16 px but follows the browser or user setting, so a layout in rem scales when someone increases their default text size. An em is the font size of the current element, which means it compounds through nesting: 0.9em inside 0.9em is 0.81 of the original.
CSS absolute units
Based on the CSS definition of 96 px to the inch and a 16 px root font size.
| Unit | Name | In pixels | Notes |
|---|---|---|---|
| px | Pixel | 1 | The reference unit, not a device pixel |
| rem | Root em | 16 | Root font size; changes with user settings |
| em | Em | 16 | Current element font size; compounds when nested |
| pt | Point | 1.3333 | 1/72 inch, the print typography unit |
| pc | Pica | 16 | 12 points |
| in | Inch | 96 | The anchor for every absolute unit |
| cm | Centimeter | 37.795 | 96 ÷ 2.54 |
| mm | Millimeter | 3.7795 | 96 ÷ 25.4 |
| Q | Quarter-millimeter | 0.9449 | Used in Japanese typography |
Common font sizes across units
| Pixels | Rem (16 px root) | Points | Millimeters |
|---|---|---|---|
| 10 | 0.625 | 7.5 | 2.65 |
| 12 | 0.75 | 9 | 3.18 |
| 14 | 0.875 | 10.5 | 3.70 |
| 16 | 1 | 12 | 4.23 |
| 18 | 1.125 | 13.5 | 4.76 |
| 20 | 1.25 | 15 | 5.29 |
| 24 | 1.5 | 18 | 6.35 |
| 32 | 2 | 24 | 8.47 |
| 40 | 2.5 | 30 | 10.58 |
| 48 | 3 | 36 | 12.70 |
| 64 | 4 | 48 | 16.93 |
Why rem rather than px for type
A pixel size ignores the reader. Someone who has set a larger default font size in their browser, which is the main accessibility control most people ever touch, sees no change on a page whose type is fixed in pixels. The same page in rem scales with them.
The usual pattern is to leave the root font size alone, so it inherits the user preference, and express type and spacing in rem from there. Dividing by 16 gives the rem value: 24 px is 1.5rem, 14 px is 0.875rem. Setting the root to 62.5 percent to make 1rem equal 10 px is a well-known trick, but it also scales down whatever the user asked for.
em compounds, rem does not
An em resolves against the font size of the element it is used on, or of the parent when it sets font-size. Nest three elements each at 0.9em and the innermost is 0.729 of the outermost, which is rarely what anyone intended.
That compounding is occasionally useful. Padding expressed in em scales with the component’s own text, so a button with 0.5em padding keeps its proportions at any size. Use em for things that should track the local font size and rem for things that should track the page.
Print and physical units
On screen, mm and in are still tied to the 96 px reference, so they are not physically accurate; a browser has no idea how large the display is. In a print stylesheet they map to real paper measurements, which is why mm is the right unit for print margins and px is not.
Points remain the unit of typographic tradition and of print specifications, at 72 to the inch. That gives the awkward 1 pt = 1.3333 px, and it is why a 12 pt document body renders as 16 px, the same as the browser default.
Frequently Asked Questions
How many pixels is 1rem?
16 px, unless the root font size has been changed from the browser default.
How do I convert px to rem?
Divide by the root font size, normally 16. So 24 px is 1.5rem and 14 px is 0.875rem.
How many pixels is 1pt?
One point is 1.3333 px, because CSS defines 72 points and 96 pixels to the inch.
What is the difference between em and rem?
A rem is always the root font size. An em is the current element’s font size, so it compounds through nesting.
Is 1in in CSS a real inch?
On screen, no. It is 96 CSS pixels. In print stylesheets it maps to a physical inch.