v138 · css
Fluid Type Calc
Fluid typography built on typed <length> custom properties. Chrome 138's typed arithmetic lets the formula divide a font-size delta by a viewport delta to get a unitless slope, then multiply that slope by 100cqw to produce the final <length>.
Why typed properties unlock this formula
Before typed division — syntax error
calc(24px / 880px)
calc(24px / 880px * 100cqw)
JS slope calculation required
/* length / length was not accepted */
Typed (Chrome 138+) — works
@property --level-min { syntax: '<length>'; }
@property --level-max { syntax: '<length>'; }
(max - min) / (wide - narrow) * 100cqw
/* length / length → number, then number * length */
Type scale parameters
16px
20px
320px
1200px
1.25
Typed arithmetic in practice: The fluid type formula is
clamp(min, min + (max − min) × (vw − minVW) / (maxVW − minVW), max).
In plain CSS this requires unit algebra: a <length> divided by another
<length> becomes a number, and that number multiplied by the container
query width becomes a <length> again. The sliders only update registered
custom-property inputs; the browser resolves the visible font sizes at paint time.