Episode 26 of 53

Font Size in CSS

Learn the different CSS units for font-size: px, em, rem, and more.

The font-size property controls how large text appears. CSS offers several units for specifying font sizes.

Pixels (px)

Fixed, absolute size. What you see is what you get:

h1 { font-size: 32px; }
p  { font-size: 16px; }

Simple, but doesn't scale well for accessibility.

Em

em is relative to the font-size of the parent element:

body { font-size: 16px; }
p    { font-size: 1.5em; }  /* 16 × 1.5 = 24px */

⚠️ Em units compound — if you nest elements, the sizes multiply, which can lead to unexpected results.

Rem (Root Em)

rem is relative to the root (<html>) font-size, avoiding the compounding problem:

html { font-size: 16px; }
h1   { font-size: 2rem; }    /* Always 32px */
h2   { font-size: 1.5rem; }  /* Always 24px */
p    { font-size: 1rem; }    /* Always 16px */

rem is the recommended unit for font sizes in modern CSS.

Other Units

  • % — percentage of parent's font-size
  • vw — percentage of viewport width (fluid typography)
  • clamp() — responsive sizing with min/max bounds
/* Fluid typography with clamp */
h1 {
    font-size: clamp(1.5rem, 4vw, 3rem);
}