Replace px with CSS clamp() for Fluid Responsive Typography

px

is a familiar CSS unit, but on devices with vastly different screen sizes it often falls short.

Problems with px

px

is an absolute unit representing a physical pixel, so width: 300px; tries to render as 300 pixels on any device. Traditionally, developers use many @media queries to handle different screen sizes, leading to bulky and hard‑to‑maintain code.

.title {
  font-size: 48px;
}
@media (max-width: 768px) {
  .title {
    font-size: 32px;
  }
}
@media (max-width: 480px) {
  .title {
    font-size: 24px;
  }
}

CSS Math Function clamp()

The syntax is simple: clamp(MIN, PREFERRED, MAX). The browser first tries the PREFERRED value; if it is smaller than MIN, the MIN is used, otherwise the MAX is used.

Fluid Font Sizing

Using clamp() we can rewrite the font‑size example:

Interpretation of the code: 1.5rem (minimum): on very narrow screens the font size will not go below 1.5rem (≈24px) for readability. 5vw (preferred): the size scales dynamically with the viewport width (5% of the width), providing smooth scaling. 3rem (maximum): on very wide screens the size caps at 3rem (≈48px) to keep the design balanced.

Thus the font size smoothly transitions between 24px and 48px as the screen width changes, eliminating abrupt breakpoint jumps.

Applying clamp() in Layouts

The function can also control element dimensions. For example, a container that adapts to the viewport while staying within sensible limits:

.container {
  width: clamp(320px, 90%, 1200px);
  margin: 0 auto;
}

On small screens the width is 90% but never less than 320px.

On very large screens the width remains 90% but never exceeds 1200px.

It’s time to move beyond the fixed px mindset and adopt clamp(), a modern CSS feature with excellent browser support.