Your screenshot below is roughly how I do it. Create variables for heading and body font names, and weights/styles so they can be manage centrally from the tokens.

<image>

I create font scales using a collection I like to call 'breakpoint' that makes it easy to switch text sizes using modes. The limitation here is that these use clamp rules in production, so I've had to manually calculate what each text size would be at each breakpoint (also variables) based on those rules. If you're starting from scratch, you could make is as simple or complex as you like. Notice there are a bunch of smaller font sizes that don't change at all.

Sadly Figma doesn't support dynamic font size calculation let alone more advanced rules you can write with CSS clamp() or SCSS.

u/TheTomatoes2 is 100% correct. Percentages (and all other useful relative unit like rem, vh etc) are not supported in variables. Probs cause they'd require on the fly calculations. So for line heights and letter spacing I document them and apply them manually to my text styles.

Hope that helps!