CSS Units Explained: px, pt, em and rem

Why does 12 pt text in a print layout match 16 px text on a web page? Both describe the same size, just in different units. CSS ties its units together with one fixed rule: an inch equals 96 pixels and 72 points. Once you know that rule and how em and rem scale, every font size becomes simple arithmetic.

CSS Unit Conversion Chart at a 16 px Base

The chart below lists common text sizes in four units at once. It assumes a 16 px root font size, the common browser default. Points convert at 0.75 pt per pixel, and rem divides the pixel size by 16.

The px and pt columns never change, because both are absolute units. The rem and percent columns hold only at a 16 px root. Change the root to 20 px, and 1.5 rem becomes 30 px instead of 24 px.

Five terms appear in every unit question. Here is what each one means.

Pixel (px)

The CSS reference unit, equal to one ninety-sixth of an inch. It is not the same as one dot on your screen.

Point (pt)

A print unit equal to one seventy-second of an inch, or 1.333 px.

Pica (pc)

A print unit equal to 12 points, one sixth of an inch, or 16 px.

em

A unit tied to the current font size. For font-size itself, it uses the inherited size from the parent.

rem

The “root em,” tied to the font size of the html element at the top of the page.

Which CSS Units Are Absolute and Which Are Relative?

Absolute units (px, pt, pc, in, cm, mm) have fixed sizes that never depend on other styles. Relative units (em, rem, percent) scale with a font size set somewhere else on the page.

The CSS Values and Units specification groups these into clear families. Absolute lengths all link to each other through the inch. Font-relative lengths, such as em and rem, take their size from an element’s font.

This split matters most when a size changes. Suppose a reader raises the default text size from 16 px to 20 px. A heading set at 24 px stays at 24 px. A heading set at 1.5 rem grows to 30 px, a rise of 25 percent.

Neither family is wrong. Absolute units suit fixed things, like a 1 px border or a printed page margin. Relative units suit text and spacing that should follow the reader’s settings.

Why Is One Inch 96 Pixels in CSS?

CSS defines 1 inch as exactly 96 px and 72 pt, so every absolute unit converts by fixed ratios. The spec keeps this 96-to-1 ratio because so much existing web content relies on it.

From that rule, the other ratios follow. One point is 96 divided by 72, or 1.333 px. One pica is 16 px, and one centimeter is about 37.80 px. One millimeter is about 3.780 px.

A CSS pixel is not always a single screen dot. The spec defines a “reference pixel” as a visual angle. At a reading distance of about 28 inches, one px looks about 0.26 mm wide. High-density screens then use several device dots for each CSS pixel.

How Is em Different From rem?

An em is based on the parent element’s font size, so it changes from place to place. A rem is always based on the root html font size, so it means the same thing across the whole page.

The Compounding Problem With em

Because em follows the parent, nested elements multiply. Take a root of 16 px and a rule that sets a span to 1.6 em. One span renders at 25.6 px. A span inside that span renders at 40.96 px, since 16 x 1.6 x 1.6 = 40.96.

The rem unit was created to avoid this. Set both spans to 1.6 rem, and both render at 25.6 px. Nesting has no effect, because both look only at the root.

A Detail That Trips People Up

The em rule has two sides. Used on font-size, 1 em equals the parent’s font size. Used on padding or margin, 1 em equals the element’s own font size. A button with 20 px text and 0.5 em padding gets 10 px of padding.

When Should You Use pt Instead of px?

Use points for print style sheets and documents that will be printed, since print is measured in physical units. Use pixels, em or rem for screens, where the reference pixel sets the scale.

The spec draws the same line. For print, it anchors lengths to physical units like the inch. For screens, it anchors them to the pixel. That means a 1 in box on a phone is rarely one real inch.

Converting a print design to a web page is simple math. A 10 pt caption becomes 13.33 px, and a 24 pt headline becomes 32 px. A US Letter page, 8.5 by 11 inches, measures 816 by 1,056 CSS pixels.

Photos follow a different rule. Image pixels and printer dots per inch are separate from CSS units. To size a printed photo, see how to calculate print size from megapixels. For fast unit swaps in either direction, the typography converter for px, pt, em and rem handles nine units at the base you set.

Which Units Keep Text Readable When Readers Zoom?

Relative units like rem and em follow the reader’s chosen default text size, so they scale up for people who need larger type. Fixed pixel font sizes may ignore that setting in some browsers.

Web accessibility guidelines ask that text can be resized up to 200 percent without losing content or function. At a 16 px base, that doubles body text to 32 px. Layouts built with rem grow in step with the text.

A reference guide on font-size warns that px font sizes are not accessible. Some browsers do not let users change them. To see the effect, set a different base size in our calculator. Try 20 px, and see how every rem value shifts.

Here is a quick test for any stylesheet. Raise the browser’s default font size, then reload the page. Text set in rem grows, while text fixed in px stays put. Boxes set in px may then clip the larger text.

Screen shape is a separate question from text size. For width and height proportions, read aspect ratios explained.

Questions People Ask About CSS Font Units

Where These Numbers Come From

This article is general web design education. Pixel values for em, rem and percent assume the stated root size. Reviewed for accuracy by Prof. Dr. Khalil Mudassar, PhD. Last updated September 27, 2026.