Variable font: Running into visual artifacts/overlap with components

I’m working on improving my font for Variable usage. I ran into several issues working with components & interpolations between masters and running into general visual quirks.

I’m using a terminal _part for letters like /t/j/f etc. Looks a bit like this:

Using the font somewhat normally this kind of approach works, but soon I ran into more serious issues what looks like overlapping paths and rounding errors:

This is the exported TTF from Glyphs 2.6.5 (1342) used via @font-face on a Mac.

Notice the /t on this 16px has some aliasing issues (hard not to):
Screen Shot 2021-05-17 at 12.03.17 PM

Same for other letters like /j using the same _part
macscreen

Checking out the variables in Samsa everything looks nominal:
Kapture 2021-05-17 at 12.06.06

Some questions:

  • Am I better off baking/flattening/remove-overlap manually all the glyphs using components before export? At the cost of loosing reusability.
  • Can I bake the variable font just before export so I get best of both worlds? Reusability and stability.
  • Is there a technique I’m missing out on to make this work? I tried with anchors, without anchors, smart components dont seem like the best use-case here.
  • From my limited testing it seems like it’s mostly a variable font issue, normal instance export seems fine. And worth noting that its most visible on smaller sizes, which leads me to think it might be a rounding issue.

Thanks for the help!

This is to be expects. For variable fonts, overlap is not removed to not disturb interpolation.

What you can do is to make the inside part much smaller. Make it a half circle or even a triangle with a height of half the stem width.

The antialiasing issue is discussed broadly in the Variable Font tutorial. I would let go of the modules and decompose them, so you can achieve clean edges.