# Fluid Typography with clamp()

**SHOULD** · **ID:** `content-fluid-clamp` · **Category:** content
**Source:** [Rauno](https://interfaces.rauno.me/)
**Interactive version:** https://ui-guides-agent-rules.netlify.app/principles/content-fluid-clamp

> SHOULD: Scale type fluidly with `clamp(min, preferred-vw, max)` instead of stacking font-size breakpoints.

Use CSS clamp() for fluid font sizes that scale between viewport sizes without breakpoints

Fixed font sizes require multiple breakpoints to look good across devices. CSS clamp() provides a minimum, preferred, and maximum value that scales smoothly with the viewport, creating responsive typography without media queries.

## Rule snippet

```tsx
h1 { font-size: clamp(48px, 5vw, 72px); }
```

## Bad — do not do this

`content-fluid-clamp-bad`

```tsx
export function FluidClampBad() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 overflow-hidden">
        <h2 className="text-4xl font-semibold text-foreground mb-2">Responsive Typography</h2>
        <p className="text-base text-muted-foreground">This heading uses a fixed 36px size. On small screens it overflows or wraps awkwardly. On large screens it may feel too small.</p>
      </div>
      <p className="text-xs text-error">Fixed font-size — doesn't adapt between viewports</p>
    </div>
  );
}
```

## Good — do this

`content-fluid-clamp-good`

```tsx
export function FluidClampGood() {
  return (
    <div className="w-full max-w-sm space-y-4">
      <div className="bg-card border border-border rounded-lg p-4 overflow-hidden">
        <h2 className="font-semibold text-foreground mb-2" style={{ fontSize: 'clamp(1.5rem, 4vw, 2.25rem)' }}>Responsive Typography</h2>
        <p className="text-sm text-muted-foreground" style={{ fontSize: 'clamp(0.875rem, 1.5vw, 1rem)' }}>This heading uses clamp() to fluidly scale between viewport sizes — no breakpoints needed.</p>
      </div>
      <p className="text-xs text-success">CSS clamp() — fluid scaling between min and max</p>
    </div>
  );
}
```

## References

- [interfaces.rauno.me](https://interfaces.rauno.me/)
- [MDN clamp()](https://developer.mozilla.org/en-US/docs/Web/CSS/clamp)