Fluid type scale

Generate a hierarchy that grows smoothly with the viewport.

Field Notes · 026

A quieter way to build ambitious things.

Good systems make room for judgment. They provide structure without turning every decision into a form.

September 2026

Read the essay →

">

The prompt

Create a fluid typography scale calculator with Tailwind CSS. Include minimum and maximum viewport widths, base font sizes, and a modular ratio selector. Generate four responsive type steps, display each computed CSS clamp value, and show a live editorial preview. Add JavaScript that validates the ranges, calculates linear interpolation for clamp, updates the preview through CSS custom properties, and copies any generated declaration.

Paste it into Claude, Cursor, v0 or any AI coding tool. Prefer the finished markup? .