2026-07-24T16:42:08+02:00 https://nostr.ae HEX Projects https://nostr.ae/npub1usx026nu24mqex5mdesg6fhyu0h4fh5q8r3qlmxa8hwtpwp65ams279984 https://typo.social/system/accounts/avatars/109/320/909/169/861/872/original/12df783e5471478e.png https://typo.social/system/accounts/avatars/109/320/909/169/861/872/original/12df783e5471478e.png https://nostr.ae/nevent1qqspm7zmsr64n2llxw7y3qjmrq4n0m5c8008qnekvzh4z56g8lx562czyrjqeat2032hvry6ndhxprfxun3774x7squwyrlvm57aev9c82nhw5yg9ds An interactive web experiment combining a springy-baseline hover effect with a variable font whose glyphs can flex to match the baseline’s curvature:<br/><a href="https://hex.xyz/Shop_Sans/boing/">https://hex.xyz/Shop_Sans/boing/</a><br/><br/>The CSS code is based on demos from <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub19q8mse6f2amuz0f88trxh333clfe8x0whv553laqh2ekp76nyy4sy05kmj" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>CSS by T. Afif :verified:</span> (<span class="italic">npub19q8…5kmj</span>)</a></span> with tips from <span itemprop="mentions" itemscope itemtype="https://schema.org/Person"><a itemprop="url" href="/npub1p63kxvwm8rx05zhl038c8fltgqh5u6v2yj6n6cefpxpf4zspsyvqsvgl53" class="bg-lavender dark:prose:text-neutral-50 dark:text-neutral-50 dark:bg-garnet px-1"><span>Roma Komarov</span> (<span class="italic">npub1p63…gl53</span>)</a></span> yesterday:<br/><a href="https://front-end.social/@css/116006138838064149">https://front-end.social/@css/116006138838064149</a><br/><br/>The variable font is Shop Sans, which I made for exactly these kinds of curved-baseline situations:<br/><a href="https://www.futurefonts.com/hex/shop-sans">https://www.futurefonts.com/hex/shop-sans</a><br/><br/>It’s just CSS with a variable web font (no JavaScript involved) and would have been impossible until fairly recently.<br/><video controls width="100%" class="max-h-[90vh] bg-neutral-300 dark:bg-zinc-700"><source src="https://typo.social/system/media_attachments/files/116/011/626/236/207/639/original/0829b40a0017eacb.mp4"></video><br/> 2026-02-04T11:22:43+01:00 https://nostr.ae/nevent1qqsfukt3e4rg8y3tmwxhqwvwwly8jdd3zqsl53fnun09mqtlzxa5cwgzyrjqeat2032hvry6ndhxprfxun3774x7squwyrlvm57aev9c82nhwvl3520 In reply to <a href='/nevent1qqspsckksqe54gmp9cexkhtkkddj2hhz20a86jcykg2ct83wax3t60ssvllpy'>nevent1q…llpy</a><br/>_________________________<br/><br/>That Dymo script font wheel was what inspired my Plastic Script typeface! <br/><a href="https://hex.xyz/Plastic_Script/">https://hex.xyz/Plastic_Script/</a><br/><br/>It was a fun challenge to make a connecting script typeface where every glyph occupies the same monospaced width.<br/> <img src="https://typo.social/system/media_attachments/files/115/035/582/692/838/542/original/e8f5d9fe01fd6f14.png"> <br/> 2025-08-16T02:25:31+02:00