---
title: "Fluid Scaling Systems"
category: studio-standards
status: recommended
url: https://webspecification.com/spec/studio-standards/fluid-scaling-systems/
source_repo: undefined
licence: CC-BY-4.0
---

# Fluid Scaling Systems

> Mandating mathematically strict CSS clamp rules for typography and spacing.

## What is it?

Fluid scaling abandons traditional fixed media query breakpoints (e.g., `@media (min-width: 768px)`) in favor of continuous, mathematical interpolation of sizes using the CSS `clamp()` function based on viewport width (`vw` or `cqi`).

## Why does it matter?

Devices do not exist in three strict buckets (mobile, tablet, desktop). An iPad Mini, a folding phone, and an ultra-wide monitor all require different visual balancing. Fluid typography ensures that font sizes, paddings, and margins grow perfectly linearly, utilizing every pixel of the screen gracefully without sudden "jumps" in layout when a breakpoint is crossed.

## How to implement it

### 1. Clamp Formula
Define tokens in your CSS root using a generator (like Utopia.fyi) that calculates the exact slope between your minimum and maximum values.

```css
:root {
  /* Scales from 18px at 320px viewport to 24px at 1200px viewport */
  --text-base: clamp(1.125rem, 0.9886rem + 0.6818vw, 1.5rem);
  
  /* Fluid spacing */
  --space-md: clamp(2rem, 1.5455rem + 2.2727vw, 3.25rem);
}

body {
  font-size: var(--text-base);
  padding-block: var(--space-md);
}
```

## Verification

- Slowly resize the browser window horizontally. Typography and spacing should scale smoothly and continuously, like a vector graphic, without suddenly snapping to larger sizes at specific pixel widths.