HEX Projects

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.

Feb 4 at 10:22amWeb
Show threadHEX ProjectsFeb 4
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.
Show threadRoel NieskensFeb 4
@HEX @css @kizu That looks so satisfying! The effect is even kinda fun in browsers that don't support the `sibling-*` stuff!
Show threadJosé SoléFeb 4
@HEX @css @kizu I can almost hear the boing/twang sound, it's a lovely effect made even nicer by Shop Sans.
Show threadHEX ProjectsFeb 4
@jmsole @css @kizu I kept thinking how fun it would be if each line had its own tone when plucked, like a guitar, so you could play songs with the type. Maybe that will be the next step.
Show threadJosé SoléFeb 4
@HEX @css @kizu That would be awesome! Depending on the length of the word you get different notes and could build your own scales. Though unless you want to go micro tonal, you'd need to quantise things.
Show threadRoma KomarovFeb 4
@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 :)
Show threadCJ DunnFeb 4
@HEX @css @kizu this rules!