# Responsive type scale with CSS clamp(), no media queries

> A fluid modular type scale that resizes between two viewport widths with a single clamp() declaration per heading. Pick base + ratio, copy CSS + Tailwind config.

- **Source:** https://amplifiedcreations.com/lab/responsive-type-scale
- **Publisher:** amplified creations (https://amplifiedcreations.com/)
- **Published:** 2026-05-16
- **Updated:** 2026-05-17
- **Language:** en
- **Stack:** HTML, CSS, clamp(), Modular scale, Typography, Design tokens
- **Live demo:** https://ptthe13.github.io/amplifiedlabs/responsive-type-scale/
- **Source code:** https://github.com/PTthe13/amplifiedlabs/tree/main/responsive-type-scale

---

Two ways most teams handle responsive type are bad. The first is to set body to a fixed `16px` and forget it — type looks tiny on a 4K monitor and cramped on a phone. The second is to stack five media queries per heading — the CSS file doubles, and the gaps between breakpoints look like a staircase.

The right way in 2025 is CSS `clamp()`. One declaration per heading. Fluid resize between two viewport widths. No media queries. The trick is computing the slope and intercept correctly so the type hits *exactly* your minimum at the smallest viewport and *exactly* your maximum at the largest.

## What it gives you

- **Seven type levels** — body, h6, h5, h4, h3, h2, h1 — generated from a base size and a scale ratio
- **Two output formats** — CSS custom properties + utility classes, and Tailwind `fontSize` config
- **Eight built-in ratios** from minor second (1.067, quiet) to golden (1.618, theatrical)
- **Live preview** at any viewport — resize your browser and watch the scale slide

## The clamp() formula

For a heading that should be `20px` at `360px` viewport and `32px` at `1400px` viewport, you want:

```css
font-size: clamp(20px, slope·vw + intercept, 32px);
```

Where slope = (32 − 20) / (1400 − 360) = 0.01154, expressed as `1.154vw`. And intercept = 20 − 0.01154 × 360 = 15.85px. So:

```css
font-size: clamp(20px, 1.154vw + 15.85px, 32px);
```

Doing that arithmetic seven times per project is annoying. This tool does it for you, across every heading level, for any base size and ratio.

## Choosing a ratio

Ratios are not interchangeable. A 1.125 (major second) feels editorial — long-read newspapers, journal posts, anything you want to disappear into. A 1.333 (perfect fourth) feels confident — marketing sites, product pages, decks. A 1.618 (golden) feels theatrical — hero pages, museums, fashion. Pick the ratio that matches the room you're putting the type into, not whichever sounds prestigious.

If you don't know which to pick, start at 1.25 (major third). It works for almost everything and signals nothing in particular.

## Why it has utility classes

CSS custom properties alone leave the line-height conversation unfinished. We bake matched line-heights into the utility classes — 1.05 for h1, climbing to 1.55 for body. Headings should breathe less than paragraphs. The tool's defaults are tuned for sans-serif at the default ratio; you'll want to nudge them for serif or for unusually tight scales.

## Use it

Single HTML file. [Open on GitHub →](https://github.com/PTthe13/amplifiedlabs/tree/main/responsive-type-scale). Open in a browser. Slide the controls. Copy the output. Paste into your design system.

---

Published by amplified creations, an independent technology studio in Leiria & Lisboa, Portugal. Contact: info@amplifiedcreations.com · More: https://amplifiedcreations.com/llms.txt