0

I need to build an algorithm that will automatically interpolate a variable font in the layout based on the positions of the characters in space. It doesn't matter in which software it will be implemented, it can be anything from InDesign to Processing. Is it even possible?

I tried to implement this via JavaScript in InDesign, but I didn't find a suitable function to determine the position of the symbol in the layout space. I also made attempts to implement the algorithm through After Effects, but it (Still!) does not have native support for variable fonts. Third-party scripts either convert the font into shapes, which does not allow working with existing font axes, or they do not have the functionality to create the necessary logic.

The idea itself sounds extremely simple: to bind the values of the axes of a variable font with coordinates in space. As a result, I expect to get a character-by-character interpolation of the axis values. Below is a diagram of how it should work. I will be glad of any ideas.

enter image description here

Improve this question
1
  • It would be very helpful to see the actual layout. Perhaps this kind of script is overkill and a similar result could be reached with clever use of styles and grep?
    – Wolff
    Oct 18 at 10:56

2 Answers 2

Reset to default
0

This may not be exactly what you are looking for, but could bring you an idea of how to set the solution.

In variable fonts there are coordinates that allow you to modify parameters on demand, so ideally modifying those values with JavaScript should not be very difficult.

Taking into account this info I would do this:

Center value would be weight: 500 and slant: -5. Set steps or blocks with a grid. In this case it would be a 10x10 space, where each part has its own parameters: for the 1x1 (horizontal x vertical) values are S:0 W: 100; whereas in 3x5 values are S:3 W: 500;

In the case of Roboto Flex's variable font, css values are specified like this:

font-variation-settings:'wdth' 151, 'GRAD' -164, 'slnt' 0, 'XTRA' 603, 'XOPQ' 160, 'YOPQ' 117, 'YTLC' 514, 'YTUC' 712, 'YTAS' 750, 'YTDE' -244, 'YTFI' 723;

Where 'slnt' refer to slant and weight can be added as a value too.

I hope this brings you an idea on how to achieve your goal.

Improve this answer
0

Probably will be easiest to do this with html and a bit of javascript.

Demo: https://codepen.io/juliansteinmann/pen/ZEwopQq

enter image description here

Improve this answer
2
  • 1
    The way im reading this you have the same problem that op is trying to avoid. Dont know though. I mean this can be done in indesign too. The problem is not that the user does not know where the text box is but rather where each individual glyph on page is located at. So that each letter has a different value. Based on where the layout engine put them. But yes this wouldnt work easily in random lookup because changing weight would change location etc.
    – joojaa
    Nov 22 at 17:02
  • You just would need to split up character into separate containers and run a function on all of them to calculate the position (/font styles)...
    – Julian Steinmann
    Nov 22 at 17:10

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.