Possible fix for kerning with two different fontvariations(wght) for neighbouring letters??

[snaders]

Hope I can explain this correctly:

I'm drawing letters next to each other, and they all get their own fontVariatons(wght). But the MOMENT two letters next to each other have different weights, the kerning jumps. This only happens for kerning pairs like YO and TA, not for other letters. I get a perfect animation if I change the O for an X for example.

I want to make a kind of animation where the letters get bolder in a wave form. I get this to work, but the first time two letters next to each other are different, the kerning jumps. It stays like this until the moment the two letters are the same again in weight.

I tested a couple of variable fonts and it happens in all of them, although in some it's a lot less noticeable.

I use append to add a letter to a formattedString and draw it in a bezierPath, or a textBox. Same results. I also tried setting the tracking to 0.

Any suggestions would be MUCH appreciated! Really stuck on this one...

[snaders]

Here the Y and O both have weight 335

Here the Y has 335, the O has 336.

[snaders]

So I 'fixed' it for now by always adding a small number to every letters weight, to they are never the same. This gives me the 'wrong' kerning for the kerning pairs, but then I change the kerning by hand for those letter combinations. Not a nice solution, but workable for now.

Still would like to have a better way of doing this.

[frederik]

mmm, this is not possible: see it as different styles. There is no kerning between a bold T and a light T of the same family. (This is also not possible in Indesign)

But you could write something to typeset an apply whatever kern value. What would that value be? is it the interpolated kerning of both instances divided by two? this could go wrong

[frederik]

you could also disable the kern feature, adding a small number to every letter seems like an easy cheat

[snaders]

Thanks Frederik.

The weird thing is that I can't replicate this issue it in Sketch for example. If I type 2 letters in that font, and select one and change the weight, the kerning does not jump. In Illustrator the kerning also seemed off, unless you use optical kerning.

Also, we spoke to the type foundry who made the font, and they said their programmer made the same kind of animation using CSS and JS, and they didn't have this issue. But I didn't get the change to verify this.

Anyway, the cheat with adding a small number seems to do the trick. I wrote a little function, which checks the text beforehand and applies custom minus kerning to know pairs. The designers who are going to work with this code can easily use this same function to overwrite values they don't like. Works for now.

Also, we have a plugin for After Effect that does the same kind of animation, and also doesn't do the kerning jump (could be using optical kerning). But the plugin has some other flaws, and is not user friendly, hence we built our own code to create the typographic animations we need

Thanks again for your time and thinking with me

[frederik]

cool!

still, I don't get what the kerning value would be?

Imagine an axis with a super black with almost no kerning and a tiny light with lots of kerning: the pair AV where A is somewhere in the super black part and V in the tiny light part. Optical kerning is not an option here

[snaders]

I get what you are saying. I also don't know what the kerning should be, but now it just jumps to a really wide setting the moment 2 letters next to each other have different weights. Also if it's just a difference of 1 (so no black and light).
It's not changing over time, it's just 'normal' or 'wide', nothing in between. I only get this in Drawbot for now, can't replicate it in Sketch or Illustrator.

Anyway, happy I got a workaround now

[frederik]

FYI: kerning over several variable settings does not work in Illustrator