↓ Hover or tap the words ↓
This page demonstrates an interactive hovering effect using the Shop Sans ‘Curve’ variable font, where glyphs can flex to optimize details for typesetting on circles and curved text paths. The variable font is paired with a baseline-curving technique adapted from CSS demos by Temani Afif with suggestions from Roma Komarov.
⚠️ Technical disclaimer: The effect is accomplished with a variable web font and pure CSS (no JavaScript!) but curving the baseline relies on the sibling-count() and sibling-index() functions. Supporting browsers (Safari 26.2+, Chrome 144+, Edge 138+, Opera 122+) should show the intended springy rubber-band baselines (like so). However, some browsers don’t support those functions yet (most notably Firefox). In those browsers, you will probably see the glyphs flex and wiggle when hovering, without seeing the baseline curving (like so).
⚠️ Typographic disclaimer: The baseline-curving technique assigns the same width to each glyph – as with monospaced fonts – so the spacing with proportionally-spaced fonts like Shop Sans isn’t perfect. It’s still fun anyway. (I cheated a bit by avoiding wide or narrow letters in the sample words.) It may be possible to improve things with a splash of JavaScript, but I haven’t experimented with that yet. If you have any suggestions, drop a line via email or Mastodon.