demo · v140

Fluid Type

A clamp-free, breakpoint-free fluid-type rule that interpolates between two font sizes based on container width. Drag the frame's bottom-right corner — the headline grows linearly with the container, computed entirely with typed arithmetic.

Less is more, but more is more, and we go again.

.display {
  /* Same-type division gives us a number between 0 and 1. */
  --ratio:
    calc((100cqi - 280px) / (760px - 280px));

  /* Multiply that number by a length to interpolate. */
  font-size: calc(16px + var(--ratio) * 48px);
}

life without typed arithmetic

The pre-140 trick is tan(atan2(100cqi - 280px, 760px - 280px)) — a numerically valid but semantically nonsensical pair of operations whose only purpose is to drop the unit. Authors used it because clamp()'s linear interpolation only works between fixed bounds against the viewport, not the container. With typed arithmetic the intent is readable.

see also