Absolute Units (px, cm, pt) — CSS

Absolute Units

Absolute units are fixed measurements — they don't scale based on anything else (parent font size, screen width, or user preferences). A pixel is always a pixel; a centimetre is always a centimetre. For web development, px is the only absolute unit you'll use regularly. The physical units like cm and in are primarily for print stylesheets.

The absolute units

Unit	What it is	Use in web CSS
`px`	1 CSS pixel — on high-density screens, may be multiple hardware pixels	Yes — the primary absolute unit for web
`pt`	1/72 of an inch — the typographic point	Print stylesheets, email CSS
`pc`	1 pica = 12 points	Rarely used
`cm`	Centimetre — physical measurement	Print only
`mm`	Millimetre — 1/10 of a cm	Print only
`in`	Inch — 96px on screen	Print only
`Q`	1/40 of a cm — quarter millimetre	Print, Japanese typography

CSS pixels vs physical pixels

The CSS px is not the same as a hardware pixel on modern screens. It's defined as 1/96 of an inch and is the reference pixel that CSS uses. On a retina display (device pixel ratio of 2), one CSS pixel is rendered using four hardware pixels — a 2×2 grid. This is why images need to be 2× size for crisp rendering on high-DPI screens, but your CSS layout measurements stay the same.

CSS

/* These CSS measurements are in CSS pixels — not hardware pixels */
.box {
  width: 200px;   /* 200 CSS pixels wide */
  height: 100px;  /* On a 2× retina screen, this is 400×200 hardware pixels */
}

/* Querying device pixel ratio in media queries */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
  /* High-density screen — serve higher-res images */
  .logo {
    background-image: url('logo@2x.png');
    background-size: 100px 40px; /* scale down to CSS px size */
  }
}

CSS px is a reference pixel (~1/96 inch), not a hardware pixel — your layout CSS doesn't need to change for retina screens; only images and icons need @2x versions

This is one of the most confusing things about modern CSS. You write `font-size: 16px` and it looks the same on a regular monitor and a retina MacBook — the browser handles the scaling. Your CSS in pixel units is measuring in CSS reference pixels, which are then mapped to hardware pixels by the browser. You only need to think about hardware pixels when working with `<canvas>`, WebGL, or serving image assets.

When to use px

Even though relative units are often preferred for responsive design, pixels have clear use cases:

CSS

/* ✓ Good uses of px */

/* Borders — should always be crisp, not scale with font */
border: 1px solid #ddd;

/* Shadows — should stay visually proportional regardless of font size */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);

/* Small fixed decorative measurements */
border-radius: 4px;

/* Minimum/maximum size constraints */
min-width: 44px;  /* WCAG minimum touch target */

/* Offset values */
outline-offset: 3px;

/* Media query breakpoints */
@media (min-width: 768px) { ... }

/* Layout measurements where you want precise pixel control */
.sidebar { width: 280px; }

/* ✗ Avoid px for */
font-size: 16px;   /* Blocks user text size preferences — use rem instead */
line-height: 24px; /* Stops scaling with font — use unitless instead */
padding: 16px;     /* Usually fine, but rem maintains font-size proportionality */

Avoid px for font-size — it prevents browser text zoom from working, failing WCAG Success Criterion 1.4.4 (Resize Text)

Users who set a larger base font size in their browser (a common accessibility need) expect pages to zoom accordingly. When you use `px` for font sizes, you override their preference — `font-size: 16px` stays 16px regardless of their browser setting, while `font-size: 1rem` scales with their setting. Always use `rem` for font sizes, and `em` when you want scaling relative to the current element's font size.

Points (pt) in web email

Email clients — especially Outlook — have poor CSS support. Email HTML often uses pt for font sizes because it's the typographic standard and some email clients handle it better than px or rem:

CSS

/* Email CSS — pt is common here */
body { font-size: 14pt; }
h1   { font-size: 24pt; }
p    { font-size: 11pt; }

/* Rough conversion: 1pt ≈ 1.33px */
/* 12pt ≈ 16px (both are common "body text" sizes) */

Print stylesheets

Physical units make sense for print because you know the output medium — an A4 page has fixed physical dimensions:

CSS

@media print {
  body {
    font-size: 11pt;
    line-height: 1.4;
    color: black;
    background: white;
  }

  .page-break {
    page-break-before: always;
  }

  /* A4 margin */
  @page {
    margin: 2cm 2.5cm;
  }
}

Units that adapt to their context — the key to responsive typography and spacing: [Relative Units](/css/relative-units).