Fluid Typography Without Runaway Font Sizes

Fluid typography lets text grow with the viewport instead of jumping between a series of fixed breakpoints. The awkward part is setting limits: font-size: 2vw looks reasonable at one width and absurd at another.

clamp() gives the browser a minimum, a fluid preferred value, and a maximum in one declaration:

h1 {
  font-size: clamp(2rem, 1rem + 4vw, 5rem);
}

The heading scales with the viewport, but it never becomes smaller than 2rem or larger than 5rem. This is the version I would reach for on a current site.

Why viewport units alone are not enough

A base size tied directly to the viewport is certainly fluid:

html {
  font-size: 2vw;
}

It is also allowed to become uncomfortably small on a phone and far too large on a wide display. Media queries can put boundaries around it:

html {
  font-size: 2vw;
}

@media (max-width: 599px) {
  html {
    font-size: 16px;
  }
}

@media (min-width: 600px) {
  html {
    font-size: 18px;
  }
}

That works, although the fixed rules remove fluid scaling outside the range you intended. clamp() expresses the same idea more directly.

Keep the scale readable

Relative units such as rem and em still matter. rem follows the root font size, while em follows the current element’s computed size. They are useful for building a consistent type scale without attaching every element directly to the viewport.

Test the smallest and largest widths, but also drag slowly through the space between them. A fluid formula can pass at the endpoints and still produce awkward sizes in the middle. The aim is not movement for its own sake; it is readable type with fewer abrupt jumps.