Fluid typography

font-size: value; /* px, rem, em, %, clamp() */

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

body {
  font-size: 1rem;
}

h1 {
  font-size: clamp(1.75rem, 4vw, 3rem);
}

.small-text {
  font-size: 0.875rem; /* 14px at 16px base */
}

Note Use rem for consistent sizing relative to the root. em is relative to the parent's font size which compounds in nested elements. clamp() creates fluid typography that scales between a minimum and maximum.

clamp(minimum, preferred, maximum)

.container {
  width: clamp(320px, 90%, 1200px);
  padding: clamp(16px, 4vw, 48px);
}

h1 {
  font-size: clamp(1.5rem, 2.5vw + 1rem, 3.5rem);
}

Note clamp() eliminates the need for many media queries. It sets a preferred value that flexes between a minimum and maximum. The preferred value usually includes a viewport unit so it scales fluidly. Ideal for typography and spacing.