Editorial layouts live and die by the type scale. My first prompts gave me clamp() values that looked fine on a laptop but ballooned to absurd sizes on a 32-inch monitor because the preferred vw term had no ceiling logic.
The insight was to make the model derive each step from a named ratio (I used the major third, 1.25) and pin the min/max to explicit rem values, using vw only for the middle term. I also had it enforce a minimum body size of 16px for legibility.
Curious if people prefer a modular scale in raw CSS vars vs generating a --step-n set with a container-relative unit like cqi.
Generate a fluid typographic scale in CSS custom properties. Method:
- Base body size 1rem (16px) minimum, never smaller.
- Use a major-third ratio (1.25) for step sizing: steps -1 through +5.
- Each `--step-n` uses `clamp(MIN, PREFERRED, MAX)` where MIN and MAX are explicit rem values computed from the ratio, and PREFERRED mixes a rem base plus a `vw` term so it scales between two named breakpoints (320px and 1240px). Show the formula you used for the vw coefficient.
- Cap growth: MAX must be a hard rem ceiling so a 2560px display does not keep enlarging text.
- Set `line-height` per step: tighter (1.1) for large display steps, 1.5 for body.
- Output: a `:root` block of `--step--1` .. `--step-5`, plus example `h1..h6, p` rules using them. Comment the ratio and the two breakpoints.