Post #954983

2026-02-04 10:22 UTC

An interactive web experiment combining a springy-baseline hover effect with a variable font whose glyphs can flex to match the baseline’s curvature: https://hex.xyz/Shop_Sans/boing/ The CSS code is based on demos from @css with tips from @kizu yesterday: https://front-end.social/@css/116006138838064149 The variable font is Shop Sans, which I made for exactly these kinds of curved-baseline situations: https://www.futurefonts.com/hex/shop-sans It’s just CSS with a variable web font (no JavaScript involved) and would have been impossible until fairly recently.

Replies (5)

@HEX@typo.social 2026-02-04 10:39

As noted in the disclaimers on that demo page, the curved baseline effect relies on some CSS functions that some browsers don’t support yet. In those browsers you will see the glyphs flex and wiggle when hovering, but without the baseline curving. It’s not the intended effect but it does help to understand how the variable font’s glyphs flex to match what the curvature of the baseline *would* be.

Open ##1485663
@pixelambacht@typo.social 2026-02-04 10:28

@HEX @css @kizu That looks so satisfying! The effect is even kinda fun in browsers that don't support the `sibling-*` stuff!

Open ##1485664
@jmsole@typo.social 2026-02-04 10:34

@HEX @css @kizu I can almost hear the boing/twang sound, it's a lovely effect made even nicer by Shop Sans.

Open ##1485666
@kizu@front-end.social 2026-02-04 11:21

@HEX @css Great font! It is for sure easier to adjust the variable axis compared to the current workarounds with regular fonts that people do, like with just positioning, or with more involved techniques like https://frontendmasters.com/blog/pure-css-circular-text-without-requiring-a-monospace-font/ by @amit_sheen :)

Open ##1485670
@cjtype@mastodon.social 2026-02-04 11:49

@HEX @css @kizu this rules!

Open ##1485671