Post

Does this work across variable-width fonts, or does it assume monospace to keep the layout predictable?

The art you are creating may depend on the font. The technique I am using doesn't depend on the font. It's a uniform scaling of "everything".

I usually have more need for responsive block-axis text fit of single-line text. My go to for that is an inline svg with a script to size the svg's viewBox to the text element within it. const bbox = text.getBBox(); svg.setAttribute('viewBox', `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`);

Neat trick. Two getBBox gotchas I've hit: it returns zeros if the svg or an ancestor is display:none (visibility:hidden is fine), and measuring before webfonts finish loading gives you fallback-font metrics — worth awaiting document.fonts.ready before you set the viewBox.