Free CSS Unit Converter Online

Absolute vs relative CSS units

CSS units fall into two fundamental categories. Absolute units are fixed and do not change based on context — px, pt, cm, mm, and in all produce the same visual size regardless of parent elements, viewport, or user preferences. Relative units — rem, em, %, vw, vh — scale based on some reference: a font size, a parent's dimension, or the viewport.

In CSS, even "absolute" units like px are device-independent. On a high-DPI (HiDPI/Retina) display, one CSS px might equal two or more physical device pixels. The browser's devicePixelRatio determines this relationship. This is why px is called a reference pixel — it represents a pixel at 96 DPI regardless of the actual display density.

The choice between absolute and relative units has significant implications for accessibility and responsive design. Browsers allow users to set their preferred base font size — a user who sets 20px as their base benefits from rem-based layouts but not from px-based ones. Modern best practice is to use px only for fine details (borders, box shadows) and rem for everything else.

When to use rem vs px vs em — a practical guide

html { font-size: 16px; } /* keep browser default */
body { font-size: 1rem; }  /* inherit from root */

/* Use rem everywhere else */
.heading { font-size: 2rem; }       /* 32px */
.subheading { font-size: 1.25rem; } /* 20px */
.body-text { font-size: 1rem; }     /* 16px */
.small { font-size: 0.875rem; }     /* 14px */

The cascade and how em units accumulate

The most important thing to understand about em units is that they compound through the DOM. Each em value is calculated relative to the computed font size of the element itself (for font-size) or the element's own computed font size (for other properties). This creates a compounding effect in nested elements.

/* Root: 16px */
.parent { font-size: 1.5em; }   /* 1.5 × 16 = 24px */
.child { font-size: 1.5em; }    /* 1.5 × 24 = 36px */
.grandchild { font-size: 1.5em; } /* 1.5 × 36 = 54px */

/* With rem — no compounding */
.parent { font-size: 1.5rem; }      /* 1.5 × 16 = 24px always */
.child { font-size: 1.5rem; }       /* 1.5 × 16 = 24px always */
.grandchild { font-size: 1.5rem; }  /* 1.5 × 16 = 24px always */

This compounding is precisely why rem was introduced in CSS3. With rem, every value is anchored to the document root, making it predictable regardless of nesting depth.

Em is still useful when you want proportional scaling within a component. For example, a button's padding set in em will scale proportionally as the button's font size changes — making it trivial to create small, medium, and large button variants by only changing font-size.

Viewport units — vw, vh, dvh, svh, lvh

Viewport units measure percentages of the browser viewport. The classic vw and vh units have been available since CSS3, but mobile browsing created a fundamental problem: the browser's address bar and toolbar take up space, causing vh to produce an inaccurate measurement on mobile devices.

For full-screen mobile layouts, the modern recommendation is: min-height: 100svh as a safe fallback, with min-height: 100dvh for the ideal dynamic behavior where supported.

Print units — pt, cm, mm, in

Physical units are primarily used inside @media print rules to create accurately-sized printed documents. On screen, the browser resolves them at 96 DPI.

Responsive design strategies and fluid typography with clamp()

Modern CSS provides powerful tools for fluid layouts that adapt continuously across viewport sizes, without discrete breakpoint jumps.

/* Syntax: clamp(minimum, preferred, maximum) */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
  /* minimum: 24px, fluid between, maximum: 48px */
}

p {
  font-size: clamp(1rem, 1rem + 0.5vw, 1.25rem);
  /* Stays 1rem on small screens, grows slightly */
}

:root {
  --space-s: clamp(0.75rem, 2vw, 1rem);
  --space-m: clamp(1rem, 3vw, 1.5rem);
  --space-l: clamp(1.5rem, 5vw, 2.5rem);
}

.card {
  padding: var(--space-m);
  gap: var(--space-s);
  margin-bottom: var(--space-l);
}

html {
  font-size: 62.5%; /* makes 1rem = 10px */
}

body {
  font-size: 1.6rem; /* = 16px — restore readable default */
}

/* Now rem math is trivial */
h1 { font-size: 3.2rem; } /* = 32px */
.card { padding: 2.4rem; } /* = 24px */

CSS custom properties and unit best practices

Design systems increasingly encode their spacing, typography, and sizing scales as CSS custom properties. This approach separates the scale's values from their application, making global adjustments (like changing the base spacing unit) a one-line change.