How px, rem, em and pt relate
CSS lets you size things in several units, and the most common confusion is between absolute and relative units. A px (pixel) is absolute: 16px is always 16px, regardless of any font settings. A rem (root em) is relative to the font size of the root <html> element. Because browsers default that root to 16px, 1rem equals 16px out of the box — but if the root changes, every rem scales with it.
An em is also relative, but to the font size of the current element rather than the root. Nested ems can compound, which is why rem is usually safer for global sizing while em is handy for padding that should track an element's own text size. A pt (point) comes from print: 1pt is 1/72 inch and 1px is 1/96 inch, so 1pt = 96/72 = 1.333px. This converter treats rem and em against the same base you choose.
Reference note: conversions use rem = px ÷ base, em = px ÷ base, and px = pt × 96 ÷ 72. Results are rounded for display; your browser may round sub-pixel values differently when rendering.
The reference table below lists the px values designers reach for most often, converted to rem at your chosen base. Copy the CSS column straight into a stylesheet.
| px | rem (at base) |
|---|
Frequently asked questions
- What is the difference between px and rem?
- A px is an absolute CSS pixel, so 16px is always 16px. A rem is relative to the root font size on the html element. With the default 16px root, 1rem equals 16px, but rem values scale if the root changes while px values stay fixed.
- How many px is 1rem?
- By default 1rem equals 16px, because the default root font size is 16px. If you change the root, 1rem equals that new value — for example 20px when the root is 20px.
- What is the default root font size?
- It is 16px in all major browsers. Unless you or the user overrides it on the html element, rem and the default em resolve against 16px.
- When should I use rem vs em vs px?
- Use rem for sizes that should scale with the root preference (font sizes, spacing, layout). Use em when a value should scale with its own element's font size, such as button padding. Use px for fixed details like 1px borders.
- How do I convert px to rem?
- Divide the px value by the root font size: with a 16px root, rem = px ÷ 16, so 24px ÷ 16 = 1.5rem. To reverse it, multiply px = rem × 16.
- What is pt in CSS?
- A pt is a point from print typography: 1pt is 1/72 inch and 1px is 1/96 inch, so 1pt is exactly 96/72 = 1.333px. Points are mainly for print stylesheets rather than screen layout.