Variable font stutter

Hi there,

I’m starting to experiment a little with the variable font export since it’s only a few clicks away. However, I found that while I was animating the axis value through JS on a web page, the characters don’t seem to neatly resize as they do in most demos I’ve seen. Is it likely to be a problem with the font spacing/kerning? (which is still a work in progress at this stage) or is that something to do with the rendering? Or maybe animating from 20 to 170 doesn’t provide enough granularity?

As you can see in this animation: https://imgur.com/a/9eJZT, there’s a lot of movement between the letters.

It’s not as noticeable when the text is left aligned instead of centred but having tried with another variable font (Source Sans Pro) which has a weight axis from 200 to 1000 I haven’t noticed the same problem, even centred.

Any leads appreciated!

Mathieu

Renderer rather than the font. Try deleting all hints. Which browser/OS? Can you do decimal steps in the JS?

Great, I suspected it might be the browser. This is Chrome 65.0.3325.181 on Mac OS 10.11.6. There are only a couple of glyphs with manual hints so it might not be related to that. Strangely, same Chrome version of Mac OS 10.12 on the newest Macbook Pro is getting the spacing all wrong leading to lots of collisions. Could be something in Chrome right now?

I tried animating with decimal steps but that didn’t lead to visible changes. At the moment I’m rounding the value.

This is the current code for the animation, just a quick sketch but seems to work: https://gist.github.com/MathieuLoutre/df4c5561f41bebf21a2d3de680aa002c

Can send me the html and the font that I can try it myself? Maybe it is a CoreText problem as proper variable font support is only officially supposed in 10.13.

Sent! I’ll see if I can get hold of 10.13 laptop for some tests. Thanks both for your quick and insightful replies.

You can try to apply -webkit-font-smoothing: antialiased; to the text and see if that helps.
Read more here.