Width is a variable
Notes on type that narrows instead of wrapping, which is how the headline on this site works.
Note
The headline on this site does not wrap and does not shrink. When the picture between its two words opens, the letters get narrower and keep their height.
One axis
A variable font with a width axis can be set anywhere between its narrowest and widest cut. That turns “make room” into a number the layout can solve for.
Solve, do not guess
The code measures each word at three widths, then works out the setting at which both words and the picture exactly fill the line. No breakpoints are involved.
Where it stops
Below the narrowest cut there is nothing left to give, so the words leave the frame instead. That felt more honest than squashing them.
