font-size

Font-size controls text size. Use absolute values (px) for fixed sizes or relative units (em, rem, %) for scalable typography. Em/rem values scale with parent/root font size.

Font Size Units

Unit	Relative To	Use Case
px	Pixels	Fixed sizes, icons
em	Parent font-size	Relative sizing
rem	Root (html) font-size	Consistent scaling
%	Parent font-size	Flexible sizing

CSS

/* Pixel values (fixed) */
.element {
  font-size: 16px;
}

/* Em (relative to parent) */
.element {
  font-size: 1.5em;
  /* 1.5x parent font-size */
}

/* Rem (relative to root/html) */
.element {
  font-size: 1.5rem;
  /* 1.5x root font-size */
}

/* Percentage (relative to parent) */
.element {
  font-size: 120%;
  /* 120% of parent */
}

/* Named sizes */
.element {
  font-size: large;
  font-size: x-large;
}

Typography Scale

CSS

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

/* Heading hierarchy */
h1 {
  font-size: 2rem;     /* 32px */
}

h2 {
  font-size: 1.5rem;   /* 24px */
}

h3 {
  font-size: 1.25rem;  /* 20px */
}

/* Body text */
body {
  font-size: 1rem;     /* 16px */
}

/* Small text */
small {
  font-size: 0.875rem; /* 14px */
}

Note

Font-size controls text size. Use rem for scalable layouts that respect user preferences. Use em for component-relative sizing.

Font weight: [font-weight](/css/font-weight).