Type Lab
A headline that fits its box by changing width instead of size. A variable font's width axis used for layout.
Fitted by width
Fit this line
The usual way: shrink it
Measuring
The concept
The display face on this site has a width axis: every letter can be drawn anywhere from half as wide to half again as wide. That makes a third answer to the old question of what to do when a headline does not fit. Do not shrink it and do not break it. Narrow it.
Type a line, drag the box, and watch the fit. The measurement runs once per change, off screen, and then sets a single custom property. Nothing animates letter by letter.
Under the hood
Fitting by width
Text width is close to linear in the width axis, so two measurements are enough to predict the setting that fills the line. One more measurement corrects it. If even the narrowest setting is too wide, size comes down as the last resort, and the readout says so.
Where the site uses it
The headline rule on this site is the static version of the same idea. Short headlines get the largest size, and longer ones step down, chosen on the server from the character count so nothing shifts after the page loads.