How do I convert points to pixels for the web?

CSS defines one pixel as one ninety-sixth of an inch and one point as one seventy-second of an inch. So one point equals 96 divided by 72, which is about 1.333 pixels, and one pixel equals 0.75 points. A 12pt font is therefore 16px on the web.

What is the difference between em and rem?

Both are relative units. A rem is always relative to the root font size set on the html element, so it stays predictable across the page. An em is relative to the font size of the current element, which can compound when nested elements each scale up or down.

Why is the default base font size 16 pixels?

Browsers default the root font size to 16 pixels, so 1rem equals 16px and 100 percent equals 16px unless you change it. Setting other sizes relative to this base keeps layouts scalable and respects users who change their default text size for accessibility.

How do I convert pixels to rem?

Divide the pixel value by the base font size. With a 16px base, 24px is 24 divided by 16, which equals 1.5rem. Using rem instead of fixed pixels lets the whole layout scale if the user or designer changes the root size.

Are point sizes in CSS the same as in word processors?

They are close but the rendering context differs. CSS points are tied to the 96 pixel per inch reference, while print points map to physical inches on paper. For screen typography, working in pixels or rem is usually more reliable than points.

Font Size Conversion Chart

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

Typography spans print and screen units that all mean slightly different things. This converter turns any font size into points, pixels, em, rem, and percentage at once, so you can move between a design tool, a stylesheet, and a print spec without guessing.

How it works

The two absolute units are linked by the CSS reference resolution. CSS defines 1px as 1/96 inch and 1pt as 1/72 inch, which gives the fixed relationship:

1pt = 96 / 72 px = 1.3333… px
1px = 72 / 96 pt = 0.75 pt

The three relative units depend on a base. rem is relative to the root font size (the <html> element), em is relative to the current element’s font size, and percent is just em expressed out of 100. With the common 16px base:

1rem = 1em = 100% = base px
px   = rem × base
rem  = px / base

The tool first converts your input to absolute pixels, then derives every other unit from there using the base you set.

Example and notes

With a 16px base, a 24px heading is 18pt, 1.5rem, 1.5em, and 150% — all the same rendered size. Change the base to 20px and that same 24px becomes 1.2rem instead, which is why rem-based layouts scale cleanly when you adjust the root.

Prefer rem for page-level sizing so a single root change rescales everything, and reserve em for sizes that should track their local context, like padding that grows with its element’s text. Avoid mixing many nested em values, since they multiply and quickly drift from what you intended.