CSS Units

Units define sizes in CSS. Choosing the right unit affects responsiveness and accessibility.

Absolute Units

Fixed sizes that don’t change:

/* Pixels */
width: 100px;
font-size: 16px;

/* Points (print) */
font-size: 12pt;

/* Inches */
width: 5in;

/* Centimeters */
width: 10cm;

/* Millimeters */
width: 100mm;

Best for: Borders, small adjustments, print styles

Relative Units

Units relative to other values:

em

Relative to parent element’s font size:

/* Parent: 16px */
.parent {
  font-size: 16px;
}

.child {
  font-size: 1.5em;    /* 24px (16 × 1.5) */
  width: 10em;         /* 160px (16 × 10) */
  padding: 1em;        /* 16px (16 × 1) */
}

Problem: Compounds in nested elements.

rem

Relative to root element’s font size:

/* Root: 16px */
html {
  font-size: 16px;
}

h1 {
  font-size: 2rem;     /* 32px (16 × 2) */
}

p {
  font-size: 1rem;     /* 16px (16 × 1) */
}

.child {
  font-size: 1.5rem;   /* 24px (16 × 1.5) — doesn't compound */
}

Best for: Font sizes, consistent sizing

Percentage

Relative to parent element:

.parent {
  width: 500px;
}

.child {
  width: 50%;          /* 250px (500 × 0.5) */
  font-size: 120%;     /* 19.2px (16 × 1.2) */
}

Viewport Units

Relative to the viewport (browser window):

/* vw: viewport width */
.full-width {
  width: 100vw;        /* Full viewport width */
}

/* vh: viewport height */
.full-height {
  height: 100vh;       /* Full viewport height */
}

/* vmin: smaller of vw/vh */
.small-square {
  width: 50vmin;
  height: 50vmin;
}

/* vmax: larger of vw/vh */
.large-square {
  width: 50vmax;
  height: 50vmax;
}

Sized Units

Relative to font size:

/* ch: width of "0" character */
.narrow-column {
  width: 40ch;
}

/* ex: height of "x" character */
.tall-text {
  line-height: 2ex;
}

/* cap-height: height of capital letters */
.capital-text {
  font-size: 1cap;
}

Complete Example

/* Root font size for rem */
html {
  font-size: 16px;
}

/* Responsive typography */
h1 {
  font-size: clamp(1.5rem, 4vw, 3rem);
}

h2 {
  font-size: clamp(1.25rem, 3vw, 2rem);
}

p {
  font-size: 1rem;
  line-height: 1.6;
}

/* Container with max-width */
.container {
  width: min(100%, 1200px);
  margin: 0 auto;
  padding: 0 clamp(1rem, 3vw, 2rem);
}

/* Card with responsive sizing */
.card {
  width: min(100%, 300px);
  padding: clamp(1rem, 2vw, 2rem);
  margin: 1rem;
}

/* Hero section */
.hero {
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sidebar */
.sidebar {
  width: clamp(200px, 25vw, 300px);
}

/* Content area */
.content {
  flex: 1;
  min-width: 0; /* Prevent overflow */
}

CSS Functions with Units

clamp()

Minimum, preferred, maximum:

font-size: clamp(1rem, 2.5vw, 2rem);
/* Minimum: 1rem, Preferred: 2.5vw, Maximum: 2rem */

width: clamp(300px, 50%, 600px);

min() and max()

width: min(100%, 500px);    /* Smaller of the two */
width: max(300px, 50%);     /* Larger of the two */

calc()

Mathematical calculations:

width: calc(100% - 40px);
height: calc(100vh - 80px);
font-size: calc(1rem + 2vw);

Unit Comparison

Complete Example: Responsive Layout

:root {
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 2rem;
  --spacing-xl: 4rem;
}

body {
  font-size: 1rem;
  line-height: 1.6;
}

.container {
  width: min(100% - 2rem, 1200px);
  margin-inline: auto;
  padding-block: var(--spacing-lg);
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: var(--spacing-md);
}

.card {
  padding: var(--spacing-md);
  border: 1px solid #ddd;
  border-radius: 0.5rem;
}

/* Responsive typography */
h1 {
  font-size: clamp(1.75rem, 5vw, 3rem);
  margin-bottom: var(--spacing-md);
}

p {
  font-size: clamp(0.9rem, 2vw, 1rem);
  max-width: 65ch; /* Optimal reading width */
}

/* Hero section */
.hero {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: var(--spacing-xl) var(--spacing-md);
}

Best Practices

1. Use rem for font sizes — Scales with user preferences
2. Use em for padding/margin — Scales with font size
3. Use % for widths — Responsive to parent
4. Use vw/vh for full-screen — Viewport-relative
5. Use clamp() — Modern responsive sizing

Common Mistakes

1. Using px for everything — Doesn’t scale
2. Using em for everything — Compounds in nesting
3. Ignoring user preferences — Always use relative units
4. Not testing on mobile — Viewport units behave differently
5. Overusing viewport units — Can cause scrolling issues