⭐ 0
🔍
Text Image PDF & Docs Audio Music Electronics Time Utilities Validators Esoteric Games

Fluid Type Scale Generator

Compute a real fluid CSS clamp() value from a min and max size across two viewport widths, with the slope and intersection shown step by step and a live resize preview.

Processing... 0%

Result

This page opens the calculator directly in type-scale mode with a 16px base and a 1.25 (major third) ratio already selected — a solid, widely used starting point for a typographic scale. From those two numbers alone, six sizes are generated: small, base, h4, h3, h2 and h1, each one its own fluid clamp() value rather than a single fixed size.

Every step keeps the base size anchored at the same value on both the mobile and desktop end, while the headings scale up more aggressively on the wider desktop viewport than on the narrow mobile one — the same idea as choosing a gentler ratio for small screens and a bolder one for large screens, derived automatically from the single ratio you pick.

Changing the ratio to 1.125, 1.2, 1.333 or 1.5 regenerates the whole table instantly, and the button underneath copies all six clamp() values as a ready-to-paste block of CSS custom properties for the rest of the stylesheet to reference.

🛡️
Executed in Browser

Your files and inputs never leave this device. Processing runs completely offline. 100% Secure.

Accepted Formats & Rules

  • Real fluid-typography math: slope, vw coefficient and y-axis intersection shown explicitly, not just the final clamp() line.
  • Live preview: drag the viewport-width slider to watch sample text resize exactly as it would while a real browser window is resized.
  • Type-scale mode: a base size and a ratio from 1.125 to 1.5 generate six fluid clamp() steps — small, base, h4, h3, h2, h1 — as copy-ready CSS.

Key Benefits

✓ The clamp() line, the slope and intersection numbers, and the live preview all update as you type — no button to press.
✓ A viewport-width slider drives a live preview box, so you see the exact fluid scaling in action between the min and max breakpoints, not just a formula.
✓ A separate type-scale mode turns one base size and ratio into a full 6-step fluid heading scale, ready as a block of CSS custom properties.

Use Cases

  • • Turn a min/max font size and viewport range into a real clamp() line — slope, vw coefficient and intersection included — instead of eyeballing one from a tutorial.
  • • Drag a viewport-width slider to preview a fluid heading or body size resizing exactly as it would while a real browser window is resized, before committing it to a stylesheet.
  • • Generate a full 6-step fluid type scale (small through h1) from one base size and ratio, copied as a ready-to-paste block of CSS custom properties.
  • • Build a fluid clamp() for spacing (margin, padding, gap) instead of font-size — the same slope/intersection formula applies to any CSS property.