Simon TrufferSep 21, 2025
Dear Variable Font friends and fellow tech wizards 🧙 I need your HELP!
I want to animate variable fonts values in sequences (like the GIF below) on a website.
My first idea was to wrap each letter in a <span> and add CSS animation with delays.
It worked… but the kerning disappears.
I searched for frameworks or other solutions but found nothing. Now I am stuck in the rabbit hole.
Any tips for animating variable fonts with per-letter delays, while keeping proper kerning? thanks 🔠 ❤️
Show threadvivaradoSep 21, 2025
@simontruffer If all the children containing letters are display inline, the kerning will be inherited as if it was a piece of text in one element. Then you can animate with CSS and provide a delay for the animation of each child, while also breaking the previously rendered kerning. So then you need to provide the kerning yourself, as margin-left, mimicking the values from your FEA for each letter pair. https://codepen.io/vivarado/pen/EaPawGv
variable letter animation ∞ 1.1

...

Show threadSimon TrufferSep 21, 2025

@vivarado Yes, I think this is where it ends for the browser-based side. I vibe coded a little script that first measured the kerning and then put the spans together.

https://codepen.io/Pistli6i/pen/MYKYOEO

Of course, it uses the "kerning table" from the starting instance, and it’s far from dynamic/usable. But maybe one day someone will create a Splitting JS framework that preserves kerning (let me keep my dreams ;)).

Thanks for your efforts 🫶 🫶

variable letter animation ∞ 1.1

...

Show threadErikSep 22, 2025
@simontruffer @vivarado Interesting! Some type folks are not sure inter-instance kerning should be happening. But there are good arguments in favor of it. The VF has continuous data for the kerning and some averaging could be very effective. Does this read the kerning?
Show threadvivaradoSep 22, 2025

@letterror @simontruffer Hello Mr. Erik, the most work here is by Simon with the script, I think it calculates the initial applied kerning in terms of pixels, not FEA, off screen - while the elements are inline overlapping each other as regular text, and then redistributes the values to each letter as margin before animation kicks in and breaks the inline into block.

We keep one kerning FEA for the sake of simplicity, I would assume that trained eyes will find issues, but there are tradeoffs

Show threadErikSep 22, 2025
@vivarado @simontruffer The movement is convincing!
Show threadSimon TrufferSep 22, 2025
@letterror @vivarado Hi Erik, thanks. Unfortunately, the kerning is not looked up from the kerning table. The letters are just measured on screen, and the kerning is calculated like this:
width of (AB) - (width of A + width of B) = Kerning
I saw that opentype.js has a function called getKerningValue(), which reads the kerning directly from the font file. I think it would be interesting to implement that. :) will look into later
Show threadErikSep 22, 2025
@simontruffer @vivarado I like the pragmatic calculation!
Show threadSimon Truffer

@letterror @vivarado

I put together a script that looks up the "real" kerning value in the font file:  
https://codepen.io/Pistli6i/pen/KwVwYXB

With opentype.js it’s pretty easy to read and much less hacky than measuring. But there’s no support for woff2 fonts, and it only works on the default axis with no option to read other instances. :(
I also checked fontkit.js, but it doesn’t provide kerning values like opentype

So yeah, measuring might be the better option and simpler way to get averages.

variable letter animation ( with kerning ) ∞ 1.3

...

Sep 22, 2025 at 12:12pmWeb
Show threadvivaradoSep 22, 2025

@simontruffer @letterror That is great, application level detail, if one would like to make a kerning app in the browser this is THE starter (I will probably try that at some point)

For just displaying though, in a website I would say your previous solution is for that. I would go as far as pre-rendering the advances array and include it statically on a data tag so as to not have an overhead of JS at all.

Good job sir! 🎉

Show threadSimon TrufferSep 22, 2025

@vivarado @letterror

Yes, for static text its probably makes the most sense to do it directly inline 👌👌

Cool, looking forward to the app ;)
I’ve started building a little variable font animation editor on the web; maybe I can implement sorting there.

Show threadRoel NieskensSep 22, 2025

@simontruffer @letterror @vivarado Checkout LibFont by @TheRealPomax, which I use in Wakamai Fondue to dive into the font's internals: https://github.com/Pomax/lib-font

And what @vivarado says, best dump this data once and include it, so you don't have to load a library and do the parsing every single time.

Show threadSimon TrufferSep 22, 2025

@pixelambacht @letterror @vivarado @TheRealPomax

Nice, didn’t know that library, I will look into it 🙌