🔠 Fluid Type Scale Generator

Generates a typographic scale where every size scales smoothly between two screen widths, using the CSS clamp() function — no media queries, no jump at a breakpoint, and no text that is 14px on a phone and 14px on a 27″ monitor.

Scale ratio

Base size (px)

Growth to large screen

Small screen (px)

Large screen (px)

Root font size

Your CSS

How the clamp() is derived

A fluid size is a straight line between two points: size f₁ at width w₁ and f₂ at w₂. The slope is (f₂−f₁)/(w₂−w₁), and CSS expresses it as a viewport percentage, so slope × 100 becomes the vw term and f₁ − slope×w₁ becomes the fixed offset. clamp() then pins the extremes so the text stops growing on enormous screens and stays readable on tiny ones.

The output uses rem rather than px so it still respects the user's browser font-size setting, which is an accessibility requirement rather than a nicety. Line heights are set as unitless ratios so they scale with the type.